Grundlegender Prozess der domänenübergreifenden Ajax-Operation

1. AJAX

AJAX (Asynchronous JavaScript and XML), was bedeutet, dass JavaScript zum Ausführen asynchroner Netzwerkanforderungen verwendet wird.
Domänenübergreifend kann hauptsächlich durch die Einrichtung eines Proxyservers, JSONP und CORS erreicht werden.
Das Schreiben eines vollständigen AJAX-Codes in JavaScript ist nicht kompliziert, aber Sie müssen darauf achten: AJAX-Anfragen werden asynchron ausgeführt Das heißt, Sie müssen die Antwort über die Rückruffunktion erhalten.

Verwandte Empfehlungen: „Python-Video“

Der Prozess zum Erstellen von Ajax ist im Allgemeinen wie folgt:

Erstellen Sie ein XMLHttpRequest-Objekt, das heißt, erstellen Sie die XHR-Objektattribute und geben Sie die Methode, die URL und die Überprüfungsinformationen der HTTP-Anfrage an auf Änderungen im HTTP-Anforderungsstatus reagieren; die vom asynchronen Aufruf zurückgegebenen Daten abrufen; verwenden Sie JavaScript und DOM, um eine teilweise Aktualisierung zu implementieren.

Code.

var xmlhttp;function createXMLHttpRequest () {
    xmlhttp = null;    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }    // 异步调用服务器段数据
    if (xmlhttp != null) {        // 创建http请求
        xmlhttp.open('GET/POST', url, true);        // 设置http请求状态变化的函数
        xmlhttp.onreadystatechange = httpStateChange;        // 发送请求
        xmlhttp.send(null);
    } else {        console.log('不支持XHR');
    }
} 
// 响应HTTP请求状态变化的函数function httpStateChange () { //判断异步调用是否完成
    if (xmlhttp.readyState == 4) {//readyState==4表示后台处理完成了
        if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status == 304){        //判断异步调用是否成功,如果成功开始局部更新数据
            //code...
        } else{            console.log("出错状态码：" + xmlhttp.status + "出错信息：" + xmlhttp.statusText);
        }
    }
}

Für niedrigere Versionen des IE müssen Sie zu einem ActiveXObject-Objekt wechseln. Wenn Sie Standard-Schreiben und IE-Schreiben kombinieren möchten, können Sie es so schreiben.

var request;if (window.XMLHttpRequest) {
   request = new XMLHttpRequest();
} else {
  request = new ActiveXObject('Microsoft.XMLHTTP');
}

Bestimmen Sie, ob der Browser Standard-XMLHttpRequest unterstützt, indem Sie erkennen, ob das Fensterobjekt über ein XMLHttpRequest-Attribut verfügt. Beachten Sie, dass Sie nicht den navigator.userAgent des Browsers verwenden sollten, um festzustellen, ob der Browser eine bestimmte JavaScript-Funktion unterstützt. Erstens kann die Zeichenfolge selbst gefälscht werden, und zweitens ist es sehr kompliziert, die JavaScript-Funktion anhand der IE-Version zu beurteilen.

Nachdem Sie das XMLHttpRequest-Objekt erstellt haben, müssen Sie zunächst die Rückruffunktion von onreadystatechange festlegen
. In der Rückruffunktion müssen wir normalerweise nur über readyState === 4 beurteilen, ob die Anforderung abgeschlossen ist. Wenn sie abgeschlossen ist, beurteilen Sie anhand des Status, ob es sich um eine erfolgreiche Antwort handelt.

Die open()-Methode des XMLHttpRequest-Objekts verfügt über drei Parameter. Der erste Parameter gibt an, ob es sich um GET oder POST handelt, der zweite Parameter gibt die URL-Adresse an und der dritte Parameter gibt an, ob asynchron verwendet werden soll ist wahr, daher ist es nicht nötig zu schreiben. Beachten Sie, dass der dritte Parameter niemals als „false“ angegeben werden darf, da der Browser sonst nicht mehr reagiert, bis die AJAX-Anfrage abgeschlossen ist. Wenn diese Anfrage 10 Sekunden dauert, werden Sie innerhalb von 10 Sekunden feststellen, dass sich der Browser in einem „Suspended Death“-Zustand befindet.

Zuletzt wird die Methode send() aufgerufen, um die Anfrage tatsächlich zu senden. Für GET-Anfragen sind keine Parameter erforderlich, und für POST-Anfragen muss der Textteil als Zeichenfolge oder FormData-Objekt übergeben werden.

2. Domänenübergreifende Sicherheitseinschränkungen

Aufgrund der „Same-Origin-Policy“ des Browsers ist der Zugriff nicht möglich, wenn Protokoll, Domänenname und Portnummer unterschiedlich sind. AJAX selbst kann keine Domänengrenzen überschreiten, was das Problem des domänenübergreifenden Zugriffs ohne Erlaubnis mit sich bringt. Dies ist jedoch nicht zulässig.

Da die Same-Origin-Richtlinie Browser einschränkt, Server jedoch nicht einschränkt, können Server domänenübergreifend sein.
Liegt es daran, dass JavaScript keine URLs von externen Domänen (d. h. anderen Websites) anfordern kann? Es gibt noch Methoden, wahrscheinlich die folgenden.

2.1 CORS

CORS (Cross-Origin Resource Sharing, Cross-Origin Resource Sharing) ist ein Entwurf des W3C, der das Durchsuchen definiert, wenn auf domänenübergreifende Ressourcen zugegriffen werden muss . Wie soll der Server mit dem Server kommunizieren?

Die Grundidee von CORS besteht darin, benutzerdefinierte HTTP-Header zu verwenden, um dem Browser die Kommunikation mit dem Server zu ermöglichen, um zu bestimmen, ob die Anfrage oder Antwort erfolgreich sein soll oder fehlschlagen soll.

Zum Beispiel hat eine einfache Anfrage, die mit GET oder POST gesendet wird, keinen benutzerdefinierten Header und der Hauptinhalt ist Text/einfach. Beim Senden dieser Anfrage müssen Sie einen zusätzlichen Origin-Header anhängen, der die Quellinformationen der angeforderten Seite (Protokoll, Domänenname und Port) enthält, damit der Server anhand dieser Header-Informationen entscheiden kann, ob er antworten möchte. Unten finden Sie ein Beispiel für den Origin-Header.

Origin: http://www.nczonline.net

Wenn der Server denkt, dass die Anfrage akzeptabel ist, sendet er dieselben Quellinformationen im Access-Control-Allow-Origin-Header zurück (wenn es sich um eine öffentliche Ressource handelt, kann er „*“ zurücksenden. ). Zum Beispiel:

Access-Control-Allow-Origin: http://www.nczonline.net

Wenn kein solcher Header vorhanden ist oder dieser Header vorhanden ist, die Quellinformationen jedoch nicht übereinstimmen, lehnt der Browser die Anfrage ab. Normalerweise verarbeitet der Browser die Anfrage. Beachten Sie, dass weder die Anfrage noch die Antwort Cookie-Informationen enthalten.

Derzeit unterstützen alle Browser diese Funktion und der IE-Browser darf nicht niedriger als IE10 sein. Der gesamte CORS-Kommunikationsprozess wird automatisch vom Browser abgeschlossen und erfordert keine Benutzerbeteiligung. Für Entwickler gibt es keinen Unterschied zwischen CORS-Kommunikation und AJAX-Kommunikation aus derselben Quelle, und der Code ist genau derselbe. Sobald der Browser feststellt, dass die AJAX-Anfrage ursprungsübergreifend ist, fügt er automatisch einige zusätzliche Header-Informationen hinzu. Manchmal wird eine zusätzliche Anfrage gestellt, die der Benutzer jedoch nicht spürt.

Daher ist der Server der Schlüssel zum Erreichen der CORS-Kommunikation. Solange der Server die CORS-Schnittstelle implementiert, ist eine Cross-Origin-Kommunikation möglich.

Übliche Ajax-Anfragen können so aussehen:

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/damonare",true);
    xhr.send();</script>

Der damonare Teil oben ist ein relativer Pfad. Wenn wir CORS verwenden möchten, könnte der relevante Ajax-Code so aussehen:

<script type="text/javascript">
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
    xhr.send();</script>

Der Unterschied zwischen dem Code und dem vorherigen besteht darin, dass der relative Pfad durch den absoluten Pfad anderer Domänen ersetzt wird. Dies ist die Schnittstellenadresse, auf die Sie domänenübergreifend zugreifen möchten.

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

2.2 图像Ping

我们知道，一个网页可以从任何网页中加载图像，不用担心跨域不跨域。这也是在线广告跟踪浏览量的主要方式。我们也可以动态的创建图像，使用它们的onload和onerror事件处理成西来确定是否接收到了响应。

动态创建图像经常用于图像Ping。
图像Ping是与服务器进行简单、单向的跨域通信的一种方式。请求的数据是通过查询字符串形式发送的，而响应可以是任意内容，但通常是像素图或204响应。通过图像Ping，浏览器得不到任何具体的数据，但通过侦听load和error事件，它能知道响应是什么时候收到的。

来看下面的例子。

var img = new Image();
img.onload = img.onerror = function () {    console.log('Done');
};
img.src = 'http://www.example.com/test?name=Nico';

这里创建了一个Image的实例，然后将onload和onerror事件处理程序指定为同一个函数。这样无论是什么响应，只要请求完成，就能得到通知。请求从设置src属性那一刻开始，而这个例子在请求中发送了一个name参数。

图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。
图像Ping有两个主要的缺点：

只能发送GET请求。无法访问服务器的响应文本。

因此，图像Ping只能用于浏览器与服务器间的单向通信。

2.3 JSONP

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法。JSONP与JSON看起来差不多，只不过是被包含在函数调用中的JSON，如下。

callback({'name': 'Azure'});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的，而数据就是传入回调参数中JSON数据。下面是一个典型的JSONP请求。

http://freegeoip.net/json/?callback=handleResponse

这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定JSONP服务的回调参数是很常见的，就像上面的URL所示，这里指定的回调函数的名字叫handleResponse()。

JSONP是通过动态3f1c4e4b6b16bbbd69b2ee476dc4f83a元素来使用的，使用时可以为src属性指定一个跨域URL。
这里的fa606c102b26eb7f8e8a6d6e20193568元素与a1f02c36ba31691bcfe87b2722de723b元素类似，都有能力不受限制的从其他域加载资源。因为JSONP是有效的JS代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。来看一个例子。

function handleResponse (response) {    
console.log('u r at IP address ' + response.ip + ', which is in ' + response.city + ', ' + response.region_name);
} 
var script = document.createElement('script');
script.src = 'http://freegeoip.net/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);

这个例子通过查询地理定位服务来显示IP地址和地理位置信息。

JSONP之所以在开发人员中极为流行，主要原因是它非常简单易用。与图像Ping相比，它的优点在于能够直接访问响应文本，支持在浏览器与服务器之间双向通信。不过，JSONP也有两点不足。

首先，安全性问题。JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP调用之外，没有办法追究。因此在使用不是自己运维的Web服务时，一定得保证它安全可靠。
其次，要确定JSONP请求是否失败并不容易。

CORS和JSONP对比

JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。SONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

Das obige ist der detaillierte Inhalt vonGrundlegender Prozess der domänenübergreifenden Ajax-Operation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!