Ajax 도메인 간 문제에 대한 자세한 소개

이번에는 Ajax 크로스 도메인 문제에 대해 자세히 소개하겠습니다. Ajax 크로스 도메인 문제 사용 시 주의사항은 무엇인가요?

ajax란

Ajax(Asynchronous JavaScript 및 XML)는 페이지를 새로 고치지 않고도 서버에 추가 데이터를 요청할 수 있는 기술입니다. ajax의 등장으로 더 나은 사용자 경험이 제공됩니다.

Ajax는 XMLHttpRequest(XHR) 개체입니다. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 원활한 인터페이스를 제공합니다. 이름에는 DOM을 통해 새 데이터를 가져오고 페이지에 삽입할 수 있습니다. XML, Ajax 통신은 데이터 형식과 관련이 없습니다. 이 기술은 새로 고치지 않고 서버에서 데이터를 얻을 수 있지만 반드시 XML 데이터는 아니며 json일 수도 있습니다.

XMLHttpRequest 객체

사용. XMLHttpRequest 객체를 생성합니다2. 요청 보내기

1).요청 라인 설정 xhr.open()

2).

POST request

요청 헤더를 설정해야 합니다. xhr.setRequestHeader() POST의 값 요청 헤더 Content-Type: application/x-www-form-urlencoded

3) get 요청에서 null을 전달하도록 요청 본문 xhr.send()를 설정하고 상황에 따라 게시합니다
3.
먼저 응답 상태 코드와 비동기 개체가 구문 분석되었는지 확인합니다.

서버에서 반환된 상태 코드 상태

1xx: 메시지

2xx: 성공

3xx: 리디렉션

4xx: 요청 오류 5xx: 서버 오류


비동기 객체 Readystate의 상태 코드
0: 비동기 객체가 생성되었습니다.

1: 비동기 객체 초기화가 완료되고 요청이 전송됩니다.

2: 서버에서 반환된 원본 데이터를 받습니다.

3: 데이터는

4: 데이터 파싱이 완료되어 데이터를 사용할 수 있습니다.


XML

XML의 특징은 고유한 계열에서 왔으며 W3C에서 공식화한 데이터 형식으로, Microsoft와 IBM에서 강력히 권장하는 XML은 데이터를 전송하고 저장하도록 설계된 Extensible Markup Language이며, HTML은 페이지를 표현하도록 설계되었습니다. 문법 규칙: HTML과 유사하게 태그를 통해 표현됩니다.

특수 기호: 예를 들어 <>는 엔터티 전송 문자를 사용해야 합니다.

xml 구문 분석에는 프런트엔드 및 백엔드 협력이 필요합니다.

1 백엔드가 반환되면 Content-Type 값을 설정합니다. application/xml

2에 대한 응답 헤더에서 프런트 엔드 비동기 객체가 배경 데이터를 수신할 때 이를 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=='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 캡슐화 사용을 제공합니다.$.ajax({})는 ajax 요청을 시작하도록 구성할 수 있습니다

$.get() get 모드에서 ajax 요청 시작

$.post() 포스트 모드에서 ajax 요청 시작

$ ('form').serialize() 양식 직렬화(형식 키=val$key=val)

매개변수 설명

url :接口地址
type :请求方式(get/post)
timeout : 要求为Number类型的参数，设置请求超时时间（毫秒）
dataType: 应该是客户端传递给服务器一个值，告诉服务器如何进行处理:
data: 发送请求数据
beforeSend: 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在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'

跨域

通过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通过动态