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: 성공

3xx: 리디렉션

4xx: 요청 오류

5xx: 서버 오류

비동기 개체의 상태 코드 ReadyState

0: 비동기 객체가 생성되었습니다

1: 비동기 객체 초기화가 완료되어 요청을 보냅니다

2: 서버에서 반환된 원본 데이터를 받습니다3: 데이터를 구문 분석하는 중이며 구문 분석에 시간이 걸립니다
4: 데이터 구문 분석이 완료되고 데이터를 사용할 수 있습니다

XML

W3C에서 공식화한 XML의 특징은 Microsoft와 IBM에서 강력하게 권장하는 데이터 형식입니다. XML은 확장 가능한 마크업 언어(Extensible Markup Language)를 의미합니다. , 데이터를 전송하고 저장하도록 설계되었으며 HTML은 페이지를 표현하도록 설계되었습니다.

문법 규칙: HTML과 유사하며 태그를 통해 표현됩니다.

특수 기호: <> ;
xml 구문 분석에는 프런트엔드와 백엔드 협력이 필요합니다.
1. 백엔드가 반환되면 응답 헤더의 Content-Type 값을 application/xml로 설정합니다.

2. 프런트엔드 비동기 객체는 백엔드를 수신합니다. end 데이터를 수신할 때 xml, xhr.responseXML 형식으로 수신해야 하며

객체 객체를 반환하며 내용은 #document

JSON

JSON(JavaScript Object Notation)입니다. 풀뿌리는 JavaScript입니다. 특히 데이터 형식을 설명하는 역할을 담당합니다. JSON 자체는 js 개체로 변환할 수 있는 특수 형식의 문자열이며 인터넷에서 데이터를 전송하는 데 가장 널리 사용되는 데이터 형식입니다.

문법 규칙:

데이터는 쉼표로 구분됩니다. 중괄호는 개체를 저장하고, 대괄호는 배열을 저장합니다. 이는 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==&#39;get&#39;){
  url = url + "?"+finalData;
  finalData = null;
 }

 //2.设置请求行
 xhr.open(method,url);

 // 如果是post请求,要设置请求头
 if (method==&#39;post&#39;){
  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(&#39;xml&#39;)!=-1){
    result = xhr.responseXML;
   }else if(rType.indexOf(&#39;json&#39;)!=-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.

$.ajax( {}) 구성 가능한 방식으로 Ajax 요청을 시작할 수 있습니다

$.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:&#39;&#39;,
  data:&#39;key=value&key=value&#39;,
  type:&#39;get&#39;,
  success:function (result) {
   console.log(result);
  }
 });

//ajax===post
$.ajax({
  url:&#39;&#39;,
  data:&#39;key=value&key=value&#39;,
  type:&#39;post&#39;,
  success:function (result) {
   console.log(result);
  }
 });

//$.get
$.get({
  url:&#39;&#39;,
  data:&#39;key=value&key=value&#39;,
  success:function (result) {
  console.log(result);
  }
});

//$.post
$.post({
  url:&#39;&#39;,
  data:&#39;key=value&key=value&#39;,
  success:function (result) {
  console.log(result);
  }
});
//在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求
 dataType:&#39;jsonp&#39;

로그인 후 복사

Cross-domain

XHR(동일 도메인, 동일 포트, 동일 프로토콜)을 통한 Ajax 통신의 주요 제한은 서버 간 보안 정책에서 비롯됩니다. 기본적으로 XHR은 동일한 리소스만 요청할 수 있습니다. 이는 일부 악의적인 행위를 방지하기 위한 것입니다.

CORS 크로스 도메인

CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。

JSONP

JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态

저자별 최신 기사