Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Verwendung von AJAX und JavaScript
Dieses Mal werde ich Ihnen die Verwendung von AJAX und JavaScript ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung von AJAX und JavaScript? Hier sind praktische Fälle.
AJAX ist keine JavaScript-Spezifikation, sondern nur eine von einem Freund „erfundene“ Abkürzung: Asynchronous JavaScript and XML, was bedeutet, dass JavaScript zum Ausführen asynchroner Netzwerkanforderungen verwendet wird.
Wenn Sie die Übermittlung eines Formulars sorgfältig beobachten, werden Sie feststellen, dass der Browser die Seite aktualisiert, sobald der Benutzer auf die Schaltfläche „Senden“ klickt und das Formular zu senden beginnt, und Ihnen dann die neue Seite mitteilt ob die Operation erfolgreich war oder nicht. Sollte das Netzwerk leider zu langsam sein oder aus anderen Gründen, erhalten Sie eine 404-Seite.
So funktioniert das Web: Eine HTTP-Anfrage entspricht einer Seite.
Wenn Sie möchten, dass der Benutzer auf der aktuellen Seite bleibt und gleichzeitig eine neue HTTP-Anfrage stellt, müssen Sie JavaScript verwenden, um die neue Anfrage zu senden. Nachdem Sie die Daten erhalten haben, aktualisieren Sie die Seite mit JavaScript. Auf diese Weise hat der Benutzer das Gefühl, dass er immer noch auf der aktuellen Seite bleibt, die Daten jedoch kontinuierlich aktualisiert werden können.
Der früheste groß angelegte Einsatz von AJAX war Gmail. Nachdem die Gmail-Seite zum ersten Mal geladen wurde, waren alle verbleibenden Daten zur Aktualisierung auf AJAX angewiesen.
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, die Antwort muss über die Rückruffunktion abgerufen werden.
Das Schreiben von AJAX in modernen Browsern basiert hauptsächlich auf dem XMLHttpRequest-Objekt:
function success(text) { var textarea = document.getElementById('test-response-text'); textarea.value = text; } function fail(code) { var textarea = document.getElementById('test-response-text'); textarea.value = 'Error code: ' + code; } var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象 request.onreadystatechange = function () { // 状态发生变化时,函数被回调 if (request.readyState === 4) { // 成功完成 // 判断响应结果: if (request.status === 200) { // 成功,通过responseText拿到响应的文本: return success(request.responseText); } else { // 失败,根据响应码判断失败原因: return fail(request.status); } } else { // HTTP请求还在继续... } } // 发送请求: request.open('GET', '/api/categories'); request.send(); alert('请求已发送,请等待响应...');
Für niedrigere Versionen von IE müssen Sie zu ActiveX wechselnObjektobjekt :
function success(text) { var textarea = document.getElementById('test-ie-response-text'); textarea.value = text; } function fail(code) { var textarea = document.getElementById('test-ie-response-text'); textarea.value = 'Error code: ' + code; } var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象 request.onreadystatechange = function () { // 状态发生变化时,函数被回调 if (request.readyState === 4) { // 成功完成 // 判断响应结果: if (request.status === 200) { // 成功,通过responseText拿到响应的文本: return success(request.responseText); } else { // 失败,根据响应码判断失败原因: return fail(request.status); } } else { // HTTP请求还在继续... } } // 发送请求: request.open('GET', '/api/categories'); request.send(); alert('请求已发送,请等待响应...');
Wenn Sie Standardschrift und IE-Schreibweise mischen möchten, können Sie so schreiben:
var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else { request = new ActiveXObject('Microsoft.XMLHTTP'); }
Bestandenerkennungwindow Ob das Objekt das Attribut XMLHttpRequest hat, bestimmt, ob der Browser den Standard XMLHttpRequest unterstützt. Beachten Sie, dass Sie nicht den navigator.userAgent des Browsers verwenden, um festzustellen, ob der Browser eine bestimmte JavaScript-Funktion unterstützt. Zum einen, weil die Zeichenfolge selbst gefälscht werden kann, und zum anderen, um JavaScript zu beurteilen Durch die IE-Version werden die Funktionen sehr komplex sein.
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 anhand von readyState === 4 beurteilen, ob die Anfrage abgeschlossen ist === 200Bestimmen Sie, ob es sich um eine erfolgreiche Antwort handelt. Die Methode
XMLHttpRequest des Objekts hat 3 Parameter Zwei Parameter geben die URL-Adresse an, und der dritte Parameter gibt an, ob asynchron verwendet werden soll. Der Standardwert ist true, daher ist es nicht erforderlich, ihn zu schreiben. Hinweis: Geben Sie den dritten Parameter niemals als
false an, sonst reagiert der Browser nicht mehr, bis AJAX aktiviert ist Die Anfrage ist abgeschlossen. Wenn diese Anfrage 10 Sekunden dauert, werden Sie innerhalb von 10 Sekunden feststellen, dass sich der Browser in einem „Suspended Death“-Zustand befindet. Rufen Sie abschließend die send()-Methode auf, um die Anfrage tatsächlich zu senden. GET-Anfragen erfordern keine Parameter und POST-Anfragen erfordern die Übergabe des Textteils als Zeichenfolge oder FormData-Objekt.
SicherheitseinschränkungenDie URL im obigen Code verwendet relative Pfade. Wenn Sie es von
in „http://www.sina.com.cn/“ ändern und erneut ausführen, wird auf jeden Fall ein Fehler gemeldet. In der Chrome-Konsole wird auch eine
Fehlermeldung angezeigt. Dies wird durch die Same-Origin-Richtlinie des Browsers verursacht. Wenn JavaScript eine AJAX-Anfrage sendet, muss der Domänenname der URL standardmäßig genau mit dem der aktuellen Seite übereinstimmen. 完全一致的意思是,域名要相同(www.example.com和example.com不同),协议要相同(http和https不同),端口号要相同(默认是:80端口,它和:8080就不同)。有的浏览器口子松一点,允许端口不同,大多数浏览器都会严格遵守这个限制。 那是不是用JavaScript无法请求外域(就是其他网站)的URL了呢?方法还是有的,大概有这么几种: 一是通过Flash插件发送HTTP请求,这种方式可以绕过浏览器的安全限制,但必须安装Flash,并且跟Flash交互。不过Flash用起来麻烦,而且现在用得也越来越少了。 二是通过在同源域名下架设一个代理服务器来转发,JavaScript负责把请求发送到代理服务器: 第三种方式称为JSONP,它有个限制,只能用GET请求,并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源: JSONP通常以函数调用的形式返回,例如,返回JavaScript内容如下: 以163的股票查询URL为例,对于URL:http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice,你将得到如下返回: 因此我们需要首先在页面中准备好回调函数: 最后用getPrice()函数触发: 就完成了跨域加载数据。 CORS 如果浏览器支持HTML5,那么就可以一劳永逸地使用新的跨域策略:CORS了。 CORS全称Cross-Origin Resource Sharing,是HTML5规范定义的如何跨域访问资源。 了解CORS前,我们先搞明白概念: Origin表示本域,也就是浏览器当前页面的域。当JavaScript向外域(如sina.com)发起请求后,浏览器收到响应后,首先检查Access-Control-Allow-Origin是否包含本域,如果是,则此次跨域请求成功,如果不是,则请求失败,JavaScript将无法获取到响应的任何数据。 用一个图来表示就是: 假设本域是my.com,外域是sina.com,只要响应头Access-Control-Allow-Origin为http://my.com,或者是*,本次请求就可以成功。 可见,跨域能否成功,取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin,决定权始终在对方手中。 上面这种跨域请求,称之为“简单请求”。简单请求包括GET、HEAD和POST(POST的Content-Type类型 仅限application/x-www-form-urlencoded、multipart/form-data和text/plain),并且不能出现任何自定义头(例如,X-Custom: 12345),通常能满足90%的需求。 无论你是否需要用JavaScript通过CORS跨域请求资源,你都要了解CORS的原理。最新的浏览器全面支持HTML5。在引用外域资源时,除了JavaScript和CSS外,都要验证CORS。例如,当你引用了某个第三方CDN上的字体文件时: 如果该CDN服务商未正确设置Access-Control-Allow-Origin,那么浏览器无法加载字体资源。 服务器必须响应并明确指出允许的Method: 浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method,才会继续发送AJAX,否则,抛出一个错误。 由于以POST、PUT方式传送JSON格式的数据在REST中很常见,所以要跨域正确处理POST和PUT请求,服务器端必须正确响应OPTIONS请求。 相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章! 推荐阅读:
'/proxy?url=http://www.sina.com.cn'代理服务器再把结果返回,这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。<html>
<head>
<script src="http://example.com/abc.js"></script>
...
</head>
<body>
...
</body>
</html>
foo('data');这样一来,我们如果在页面中先准备好foo()函数,然后给页面动态加一个节点,相当于动态读取外域的JavaScript资源,最后就等着接收回调了。
refreshPrice({"0000001":{"code": "0000001", ... });function refreshPrice(data) {
var p = document.getElementById('test-jsonp');
p.innerHTML = '当前价格:' +
data['0000001'].name +': ' +
data['0000001'].price + ';' +
data['1399001'].name + ': ' +
data['1399001'].price;
}
function getPrice() {
var
js = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
head.appendChild(js);
}
/* CSS */
@font-face {
font-family: 'FontAwesome';
src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}
对于PUT、DELETE以及其他类型如application/json的POST请求,在发送AJAX请求之前,浏览器会先发送一个OPTIONS请求(称为preflighted请求)到这个URL上,询问目标服务器是否接受:
OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von AJAX und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!