AJAX
AJAX = Asynchronous Javascript and XML (異步的javascript 和 XML)。
AJAX的作業原理
1.用戶從UI界面發送請求，JavaScript中呼叫XMLHttpRequest物件。
2.HTTP請求由XMLHttpRequest物件發送到服務器。
3.服務器使用JSP，PHP， Servlet， ASP.net等與資料庫互動。
4.檢索資料。
5.服務器將XML資料或JSON資料發送到XMLHttpRequest回呼函式。
6.XML和CSS資料顯示在瀏覽器上。
創建實體（兼容IE5和IE6）
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
XMLHttpRequest物件的屬性和方法
AJAX的實體
// 創建實體
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//監聽AJAX實體的狀態
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log(xmlhttp.responseText);//獲取文本資料
console.log(xmlhttp.getAllResponseHeaders();//獲取回應頭
console.log(xmlhttp.getResponseHeader('Last-Modified'));//獲取指定的回應頭
}
}
// open設定實體的狀態，請求方式GET， url， 異步
xmlhttp.open("GET",url,true);
// 發送攜帶的資料
xmlhttp.send();
AJAX實體狀態變化的程序
當發送一個請求后，readyState（存有 XMLHttpRequest 的狀態資訊）會隨之變化，表示不同的階段。每當readyState改變時，就會觸發onreadystatechange事件。
注意：onreadystatechange事件被觸發 5 次（0 - 4），對應著readyState的每個變化。
0：請求未初始化，還沒有呼叫 open()。
1：請求已經建立，但是還沒有發送，還沒有呼叫 send()。
2：請求已發送，正在處理中（通常現在可以從回應中獲取內容頭）。
3：請求在處理中；通常回應中已有部分資料可用了，沒有全部完成。
4：回應已完成；您可以獲取并使用服務器的回應了。
AJAX請求方式
常用的請求方式GET、POST
GET與POST
get更簡單更快，但是發送資料大小有限制
post安全性高，可以發送大量資料
在以下情況中，需要使用post：
①無法使用快取檔案
②向服務器發送大量資料
③發送包含位置字符的用戶輸入時
GET
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();
為了防止得到快取結果，我們通常可以使用唯一id，一般使用時間戳
GETqing'qiu的引數可以拼接在鏈接上
特點
GET請求可被快取
GET請求保留在瀏覽器歷史記錄中
GET請求可被收藏為書簽
GET請求不應在處理敏感資料時使用
GET請求有長度限制
GET請求只應當用于取回資料
POST
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
特點
POST請求不會被快取
POST請求不會保留在瀏覽器歷史記錄中
POST請求不能被收藏為書簽
POST請求對資料長度沒有要求
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/261211.html
標籤：JavaScript
上一篇：@font-face里面的路徑該怎么寫 dw沒有提示
下一篇：瀏覽器對字體的顯示問題