Eingehende Analyse von Ajax- und domänenübergreifenden Problemen im Zusammenhang mit AJAX

In diesem Artikel werden hauptsächlich Ajax- und domänenübergreifende Probleme im Detail vorgestellt und Ihnen erklärt, was Ajax und was domänenübergreifend ist. Interessierte Freunde können sich auf

Was ist Ajax

Ajax (Asynchrones JavaScript) beziehen. ist eine Technologie, die zusätzliche Daten vom Server anfordern kann, ohne die Seite zu aktualisieren.

Der Kern von Ajax ist XMLHttpRequest (XHR). Holen Sie sich Daten vom Server ohne Aktualisierung, es müssen jedoch keine XML-Daten sein, es kann auch JSON sein

1. Erstellen Sie ein XMLHttpRequest-Objekt

2. Senden Sie eine Anfrage

1). () Der Wert des POST-Anforderungsheaders Content-Type: application/x-www-form-urlencoded3).Anforderungstext festlegen xhr.send() Get Request übergibt Null, Post hängt von der Situation ab

3. Verarbeiten Sie die Serverantwort

Stellen Sie zunächst fest, ob die Antwort

Statuscode

und das asynchrone Objekt analysiert wurden. Abgeschlossen.

Statuscodestatus zurückgegeben vom Server

1xx: Nachricht

2xx: Erfolg

3xx: Weiterleitung

4xx: Anforderungsfehler

5xx: Serverfehler

Asynchroner Objektstatuscode Readystate

0: Das asynchrone Objekt wurde erstellt

1: Die asynchrone Objektinitialisierung ist abgeschlossen und die Anforderung wird gesendet2: Empfangen Sie die von der zurückgegebenen Originaldaten Server
3: Die Daten werden analysiert und die Analyse dauert einige Zeit
4: Die Datenanalyse ist abgeschlossen und die Daten sind einsatzbereit


XML

Eigenschaften von XML, aus einer renommierten Familie, entwickelt vom W3C, einem Datenformat, das von Microsoft und IBM dringend empfohlen wird. XML bezieht sich auf Extensible Markup Language (Extensible Markup Language), das für die Übertragung und Speicherung konzipiert ist Daten. HTML Es dient zur Darstellung von Seiten.

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


Sonderzeichen: a8093152e673feb7aba1828c43532094 Entity-Transfer Das Parsen der Zeichen

erfordert die Zusammenarbeit von Front- und Backend: 1. Wenn das Backend zurückkehrt, setzen Sie den Content-Type-Wert im Antwortheader auf application/xml 2. Das Frontend ist asynchron. Wenn das Objekt Hintergrunddaten empfängt, denken Sie daran, diese in Form von XML, xhr.responseXML, zu empfangen, und es gibt ein

Objektobjekt

zurück, der Inhalt ist #document

JSON

JSON (JavaScript Object Notation) stammt aus der Basis, ist eine Teilmenge von Javascript und ist für die Beschreibung des Datenformats selbst verantwortlich Zeichenfolge in einem speziellen Format, das in ein js-Objekt konvertiert werden kann und ein Netzwerk ist. Es gibt keines der am weitesten verbreiteten Datenformate zum Übertragen von Daten

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

JSON in js analysieren/betreiben:

1.JSON.parse(json string); Parse eine JSON-Formatzeichenfolge in ein js-Objekt

2 .JSON.stringify(js object); Konvertieren eines js-Objekts in ein json-Format. Der String

kapselt einen Ajax



Ajax in jQuery verwenden

API jQuery ajax

jQuery bietet uns ein praktischeres Ajax-Paket.

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

$.get( ) Ajax-Anfrage im Get-Modus initiieren

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

$.post() Ajax-Anfrage im Post-Modus initiieren

$('form').serialize() Serialisieren Formular (Formatschlüssel=val$schlüssel=val)

Parameterbeschreibung

URL: Schnittstellenadresse

Typ: Anforderungsmethode (get/post)

Timeout: Der Parameter muss vom Typ „Zahl“ sein. Legen Sie das Timeout für die Anforderung (Millisekunden) fest.
Datentyp: Es sollte ein Wert sein, der vom Client an den Server übergeben wird und dem Server mitteilt, wie er verarbeiten soll:
Daten: Anforderung senden data
beforeSend: Erforderlich, um ein Parameter vom Typ Funktion zu sein, bevor die Anforderung gesendet wird. Funktionen, die das XMLHttpRequest-Objekt ändern können, z. B. das Hinzufügen benutzerdefinierter HTTP-Header. Wenn in beforeSend „false“ zurückgegeben wird, kann diese Ajax-Anfrage abgebrochen werden.
Erfolg: Wird nach einer erfolgreichen Antwort aufgerufen.

Fehler: Wird aufgerufen, wenn eine Fehlerantwort auftritt.

Abgeschlossen: Wird aufgerufen, wenn die Antwort abgeschlossen ist (einschließlich Erfolg und Fehler)

Domänenübergreifend

Eine wesentliche Einschränkung der Ajax-Kommunikation über XHR (gleiche Domäne, gleicher Port, gleiches Protokoll), abgeleitet von der serverübergreifenden Sicherheitsrichtlinie. Standardmäßig kann XHR nur Ressourcen in derselben Domäne anfordern.

 //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'

CORS domänenübergreifend

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

JSONP

JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态3f1c4e4b6b16bbbd69b2ee476dc4f83a元素来使用,src属性知道一个跨域URL,JSONP是有效的JavaScript代码,浏览器可以跨域请求JS文件.
优点:简单易用,可以直接访问响应文本,支持在浏览器和服务器之间双向通信.
缺点:1.JSONP是从其他域加载代码执行,存在不安全风险.2.不好确定JSONP请求是否成败.

通过修改document.domain来跨子域

使用window.name来进行跨域

HTML5中新引进 window.postMessage方法来跨域传送数据

flash

iframe

服务器设置代理页面

图像Ping

通过使用标签,利用网页可以从任何网页加载图像原理.
图像Ping常用于跟踪用户点击页面或动态广告曝光次数.

2个缺点:1.只支持GET请求.2.无法访问服务器的响应文本.只能用于浏览器与服务器间的单项通信.

var img = new Image();
img.onload = img.onerror = function (){
alert("Done!");
};
img.src = "";

comet

一种更高级的ajax技术.ajax是页面向服务器请求数据的技术.comet是服务器向页面推送数据的技术.

SSE (Server-Sent Events) 服务器发送事件

Web Sockets

Web Sockets的目标是在一个单独的持久链接上提供全双工,双向通信.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

相关推荐：

实例分析jquery ajax异步提交表单数据的方法

前端ajax与后端交互详解

Ajax实现动态加载数据的实力分享

Das obige ist der detaillierte Inhalt vonEingehende Analyse von Ajax- und domänenübergreifenden Problemen im Zusammenhang mit AJAX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!