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);
}
}
}Nach dem Login kopieren
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');
}Nach dem Login kopieren
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
Nach dem Login kopieren
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
Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
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';Nach dem Login kopieren
这里创建了一个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'});Nach dem Login kopieren
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的，而数据就是传入回调参数中JSON数据。下面是一个典型的JSONP请求。
http://freegeoip.net/json/?callback=handleResponse
Nach dem Login kopieren
这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定JSONP服务的回调参数是很常见的，就像上面的URL所示，这里指定的回调函数的名字叫handleResponse()。
JSONP是通过动态
