Ajax 및 크로스 도메인 문제에 대한 심층 분석_AJAX 관련
이 글에서는 주로 Ajax와 크로스 도메인 문제를 자세히 소개하면서 Ajax가 무엇이고 크로스 도메인이 무엇인지 알려드립니다. 관심 있는 친구들은
What is ajax
를 참고하면 됩니다. Ajax(Asynchronous JavaScript 및 XML)는 페이지를 새로 고치지 않고도 서버에 추가 데이터를 요청할 수 있는 방식입니다. Ajax의 핵심은 XMLHttpRequest(XHR) 개체입니다. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 원활한 인터페이스를 제공합니다. 이름에 XML이 포함되어 있지만 Ajax 통신은 데이터 형식과 관련이 없습니다. 이 기술은 새로 고치지 않고도 서버에서 데이터를 가져올 수 있지만 반드시 XML 데이터일 필요는 없습니다.
XMLHttpRequest 객체
POST 요청 사용
요청 헤더 xhr.setRequestHeader() POST 요청 헤더 Content-Type 값: application/x-www-form-urlencoded3)을 설정해야 합니다. .요청 본문 xhr.send() get 요청을 null로 설정하고 상황에 따라 게시합니다 3. 서버 응답을 처리합니다
먼저 응답
상태 코드와 비동기 개체가 파싱되었는지 확인합니다.
서버에서 반환된 상태 코드 상태
1xx: message
2xx: 성공
4xx: 요청 오류
5xx: 서버 오류0: 비동기 객체가 생성되었습니다
1: 비동기 객체 초기화가 완료되어 요청을 보냅니다2: 서버에서 반환된 원본 데이터를 받습니다3: 데이터를 구문 분석하는 중이며 구문 분석에 시간이 걸립니다
4: 데이터 구문 분석이 완료되고 데이터를 사용할 수 있습니다
XML
W3C에서 공식화한 XML의 특징은 Microsoft와 IBM에서 강력하게 권장하는 데이터 형식입니다. XML은 확장 가능한 마크업 언어(Extensible Markup Language)를 의미합니다. , 데이터를 전송하고 저장하도록 설계되었으며 HTML은 페이지를 표현하도록 설계되었습니다.
문법 규칙: HTML과 유사하며 태그를 통해 표현됩니다.
특수 기호: <> ;
xml 구문 분석에는 프런트엔드와 백엔드 협력이 필요합니다.
1. 백엔드가 반환되면 응답 헤더의 Content-Type 값을 application/xml로 설정합니다.
객체 객체를 반환하며 내용은 #document
JSON 문법 규칙:
데이터는 쉼표로 구분됩니다. 중괄호는 개체를 저장하고, 대괄호는 배열을 저장합니다. 이는 js와 약간의 차이입니다.
js에서 JSON을 구문 분석/조작합니다.
1.JSON.parse(json string); json 형식 문자열을 js 객체로 구문 분석합니다.2.JSON.stringify(js 객체 ); js 객체를 json 형식의 문자열로 변환
직접 ajax 캡슐화function pinjieData(obj) {
//obj 就相当于 {key:value,key:value}
//最终拼接成键值对的字符串 "key:value,key:value"
var finalData = "";
for(key in obj){
finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
}
return finalData.slice(0,-1);//key:value,key:value
}
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var success = obj.success;
var finalData = pinjieData(obj.data);
//finalData最终的效果key:value,key:value
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//get方法拼接地址,xhr.send(null)
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.设置请求行
xhr.open(method,url);
// 如果是post请求,要设置请求头
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.发送
xhr.send(finalData);
//4.监听服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//获取返回的数据类型
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse 的意思是 将 json格式的字符串
//比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
//转成js对象
result = JSON.parse(xhr.responseText);
}else{//当成普通的字符串去处理
result = xhr.responseText;
}
//将这里解析好的数据交给页面去渲染
success(result);
}
}
}
jQuery에서 ajax 사용API jQuery ajax
jQuery는 다음 작업에 더 편리한 ajax 패키지를 제공합니다. use.
$.get() get 방식으로 ajax 요청 시작
$.post() 포스트 방식으로 ajax 요청 시작 $('form').serialize() 양식 직렬화(형식 키=val$key=val)
매개변수 설명
url: 인터페이스 주소type: 요청 방법(get/post)
timeout: 필요 숫자 유형 매개변수, 요청 시간 제한(밀리초) 설정dataType: 클라이언트가 서버에 전달하는 값이어야 하며 서버에 처리 방법을 알려주어야 합니다.
data: 요청 데이터 보내기beforeSend: 매개변수는 필수입니다. 함수 유형 요청을 보내기 전에 사용자 정의 HTTP 헤더를 추가하는 등 XMLHttpRequest 객체의 함수를 수정할 수 있습니다. beforeSend에서 false가 반환되면 이 ajax 요청이 취소될 수 있습니다.
success: 성공적인 응답 후에 호출됩니다.
error: 오류 응답 시 호출됩니다.
complete: 응답이 완료될 때 호출됩니다(성공 및 실패 포함)
//ajax===get
$.ajax({
url:'',
data:'key=value&key=value',
type:'get',
success:function (result) {
console.log(result);
}
});
//ajax===post
$.ajax({
url:'',
data:'key=value&key=value',
type:'post',
success:function (result) {
console.log(result);
}
});
//$.get
$.get({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//$.post
$.post({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求
dataType:'jsonp'
Cross-domain
XHR(동일 도메인, 동일 포트, 동일 프로토콜)을 통한 Ajax 통신의 주요 제한은 서버 간 보안 정책에서 비롯됩니다. 기본적으로 XHR은 동일한 리소스만 요청할 수 있습니다. 이는 일부 악의적인 행위를 방지하기 위한 것입니다.
CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
JSONP
JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7773
15
1644
14
1399
52
1296
25
1234
29
Oracle 오류 3114에 대한 자세한 설명: 신속하게 해결하는 방법
Mar 08, 2024 pm 02:42 PM
Oracle 오류 3114에 대한 자세한 설명: 이를 신속하게 해결하는 방법, 구체적인 코드 예제가 필요합니다. Oracle 데이터베이스를 개발 및 관리하는 동안 다양한 오류가 발생하는 경우가 많으며 그중 오류 3114는 비교적 일반적인 문제입니다. 오류 3114는 일반적으로 네트워크 오류, 데이터베이스 서비스 중지 또는 잘못된 연결 문자열 설정으로 인해 발생할 수 있는 데이터베이스 연결 문제를 나타냅니다. 이 문서에서는 오류 3114의 원인과 이 문제를 신속하게 해결하는 방법을 자세히 설명하고 특정 코드를 첨부합니다.
PHP 및 Ajax: 자동 완성 제안 엔진 구축
Jun 02, 2024 pm 08:39 PM
PHP 및 Ajax를 사용하여 자동 완성 제안 엔진 구축: 서버측 스크립트: Ajax 요청을 처리하고 제안을 반환합니다(autocomplete.php). 클라이언트 스크립트: Ajax 요청을 보내고 제안을 표시합니다(autocomplete.js). 실제 사례: HTML 페이지에 스크립트를 포함하고 검색 입력 요소 식별자를 지정합니다.
웜홀 NTT 구문 분석: 모든 토큰을 위한 개방형 프레임워크
Mar 05, 2024 pm 12:46 PM
Wormhole은 블록체인 상호 운용성의 선두주자로서 소유권, 통제 및 무허가형 혁신을 우선시하는 탄력적이고 미래 지향적인 분산 시스템을 만드는 데 중점을 두고 있습니다. 이 비전의 기초는 단순성, 명확성 및 광범위한 다중 체인 솔루션 제품군으로 상호 운용성 환경을 재정의하기 위한 기술 전문 지식, 윤리적 원칙 및 커뮤니티 조정에 대한 헌신입니다. 영지식 증명, 확장 솔루션 및 풍부한 기능의 토큰 표준이 등장하면서 블록체인은 더욱 강력해지고 상호 운용성은 점점 더 중요해지고 있습니다. 이 혁신적인 애플리케이션 환경에서 새로운 거버넌스 시스템과 실용적인 기능은 네트워크 전반의 자산에 전례 없는 기회를 제공합니다. 프로토콜 빌더는 이제 이 새로운 멀티체인에서 어떻게 기능할지 고민하고 있습니다.
PHP에서 중간점의 의미와 사용법 분석
Mar 27, 2024 pm 08:57 PM
[PHP 중간점의 의미와 사용법 분석] PHP에서 중간점(.)은 두 개의 문자열이나 객체의 속성이나 메소드를 연결하는 데 사용되는 일반적으로 사용되는 연산자입니다. 이 기사에서는 구체적인 코드 예제를 통해 PHP에서 중간점의 의미와 사용법을 자세히 살펴보겠습니다. 1. 문자열 중간점 연산자 연결 PHP에서 가장 일반적인 사용법은 두 문자열을 연결하는 것입니다. 두 문자열 사이에 .을 배치하면 두 문자열을 이어붙여 새 문자열을 만들 수 있습니다. $string1=&qu
jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까?
Feb 23, 2024 pm 04:27 PM
jQueryAJAX 오류 403 문제를 해결하는 방법은 무엇입니까? 웹 애플리케이션을 개발할 때 jQuery는 종종 비동기 요청을 보내는 데 사용됩니다. 그러나 때때로 jQueryAJAX를 사용할 때 서버에서 액세스가 금지되었음을 나타내는 오류 코드 403이 발생할 수 있습니다. 이는 일반적으로 서버 측 보안 설정으로 인해 발생하지만 문제를 해결하는 방법이 있습니다. 이 기사에서는 jQueryAJAX 오류 403 문제를 해결하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 만들다
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?
Mar 09, 2024 pm 05:36 PM
Ajax를 사용하여 PHP 메소드에서 변수를 얻는 것은 웹 개발의 일반적인 시나리오입니다. Ajax를 통해 데이터를 새로 고치지 않고도 페이지를 동적으로 얻을 수 있습니다. 이 기사에서는 Ajax를 사용하여 PHP 메소드에서 변수를 가져오는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 Ajax 요청을 처리하고 필요한 변수를 반환하기 위해 PHP 파일을 작성해야 합니다. 다음은 간단한 PHP 파일 getData.php에 대한 샘플 코드입니다.
Win11의 새로운 기능 분석: Microsoft 계정 로그인을 건너뛰는 방법
Mar 27, 2024 pm 05:24 PM
Win11의 새로운 기능 분석: Microsoft 계정 로그인을 건너뛰는 방법 Windows 11이 출시되면서 많은 사용자는 Windows 11이 더 편리하고 새로운 기능을 제공한다는 사실을 알게 되었습니다. 그러나 일부 사용자는 시스템을 Microsoft 계정에 연결하는 것을 좋아하지 않아 이 단계를 건너뛰기를 원할 수도 있습니다. 이 문서에서는 사용자가 Windows 11에서 Microsoft 계정 로그인을 건너뛰고 보다 개인적이고 자율적인 환경을 달성하는 데 도움이 되는 몇 가지 방법을 소개합니다. 먼저 일부 사용자가 Microsoft 계정에 로그인하기를 꺼리는 이유를 이해해 보겠습니다. 한편으로는 일부 사용자들은 다음과 같은 걱정을 합니다.
Apache2는 PHP 파일을 올바르게 구문 분석할 수 없습니다.
Mar 08, 2024 am 11:09 AM
공간 제한으로 인해 다음은 간략한 기사입니다. Apache2는 일반적으로 사용되는 웹 서버 소프트웨어이고 PHP는 널리 사용되는 서버측 스크립팅 언어입니다. 웹 사이트를 구축하는 과정에서 Apache2가 PHP 파일을 올바르게 구문 분석할 수 없어 PHP 코드가 실행되지 않는 문제가 발생하는 경우가 있습니다. 이 문제는 일반적으로 Apache2가 PHP 모듈을 올바르게 구성하지 않거나 PHP 모듈이 Apache2 버전과 호환되지 않기 때문에 발생합니다. 이 문제를 해결하는 방법은 일반적으로 두 가지가 있는데, 그 중 하나는
