Heim > Artikel > Web-Frontend > Detaillierte Einführung in domänenübergreifende Ajax-Probleme

Detaillierte Einführung in domänenübergreifende Ajax-Probleme

php中世界最好的语言Original: 2018-04-02 09:25:121278Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Einführung in domänenübergreifende Ajax-Probleme geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung von domänenübergreifenden Ajax-Problemen?

Was ist Ajax

Ajax (Asynchrones JavaScript und XML) ist eine Methode, die zusätzliche Daten vom Server anfordern kann, ohne die Seite zu aktualisieren. Die Einführung von Ajax hat zu einer besseren Benutzererfahrung geführt. Der Kern von Ajax ist das XMLHttpRequest-Objekt (XHR), das eine reibungslose Schnittstelle zum Senden von Anforderungen an den Server und zum Parsen von Serverantworten bietet Das XHR-Objekt erhält neue Daten und fügt die neuen Daten über das DOM in die Seite ein. Obwohl der Name XML enthält, hat die Ajax-Kommunikation nichts mit dem Datenformat zu tun, ohne dass eine Aktualisierung erforderlich ist Es müssen XML-Daten sein, es kann auch JSON sein.

XMLHttpRequest-Objekt

XHR-Nutzung1. Erstellen Sie ein XMLHttpRequest-Objekt

2. Senden Sie eine Anfrage

1). >Der Anforderungsheader muss festgelegt werden xhr.setRequestHeader() POST Der Wert des Anforderungsheaders Content-Type: application/x-www-form-urlencoded

3). null übergeben, entsprechend der Situation posten

3. Verarbeiten Sie die Serverantwort Bestimmen Sie zunächst, ob der Antwortstatuscode und das asynchrone Objekt analysiert wurden.

Der zurückgegebene Statuscode durch den Serverstatus

1xx: Meldung

2xx: Erfolg

3xx: Weiterleitung

4xx: Anforderungsfehler

5xx: Serverfehler

Statuscode des asynchronen Objekts Readystate

0: Asynchrones Objekt wurde erstellt1: Die Initialisierung des asynchronen Objekts ist abgeschlossen und die Anforderung wird gesendet

2: Empfangen der vom Server zurückgegebenen Originaldaten

3: Die Daten werden analysiert und die Analyse wird einige Zeit dauern

4: Die Datenanalyse ist abgeschlossen und die Daten können verwendet werden

XML

Merkmale von XML, aus einer prestigeträchtigen Familie, formuliert vom W3C, einem Datenformat, das von Microsoft und IBM dringend empfohlen wurde. XML bezieht sich auf Extensible Markup Language (Extensible Markup Language), die für die Übertragung und Speicherung von Daten konzipiert ist Entwickelt, um Seiten darzustellen.

Grammatikregeln: Ähnlich wie bei HTML werden sie durch Tags ausgedrückt

Spezielle Symbole: wie <> Verwendung von Entity-Transfer-Zeichen

Xml Das Parsen erfordert die Zusammenarbeit von Front-End und Back-End:

1. Wenn das Back-End zurückkehrt, setzen Sie den Content-Type-Wert im Antwortheader auf application/xml

2 Das Front-End Wenn ein asynchrones Objekt empfängt Hintergrunddaten, denken Sie daran, diese in der Form von XML, xhr.responseXML, zu empfangen, und es gibt ein

Objektobjekt

zurück, mit dem Inhalt #document

JSON

JSON (JavaScript Object Notation) stammt von der Basis und ist eine Teilmenge von Javascript und für die Beschreibung des Datenformats verantwortlich. JSON selbst ist eine Zeichenfolge in einem speziellen Format, die in ein js-Objekt konvertiert werden kann wird im Internet verwendet. Es gibt keines der am weitesten verbreiteten Datenformate zur Datenübertragung

Grammatikregeln:

Daten werden durch Schlüssel/Wert-Paare dargestellt. und die Daten werden durch Kommas getrennt, eckige Klammern speichern Arrays und Namen und Werte müssen in doppelte Anführungszeichen gesetzt werden (dies ist ein kleiner Unterschied zur js-Analyse). /manipulieren von JSON in js:

1.JSON.parse(json string); Analysieren Sie eine JSON-Formatzeichenfolge in ein js-Objekt2.JSON.stringify(js object); Objekt in eine Zeichenkette im JSON-Format umwandeln
Einen Ajax selbst kapselnAjax in jQuery verwenden
API jQuery ajax

jQuery stellt uns zur Verfügung ein praktischeres Ajax-Paket.

$.ajax({}) kann so konfiguriert werden, dass eine Ajax-Anfrage initiiert wird

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);
  }
 }
}

$.get() um eine Ajax-Anfrage zu initiieren

$.post( ), um eine Ajax-Anfrage zum Posten zu initiieren$('form').serialize() Formular serialisieren (Format key=val$key=val)

Parameterbeschreibung

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