偽AJAX
阿新 • • 發佈：2018-07-02
inpu get發送 rom syn test ole 整數 html lose
“偽”AJAX
由於HTML標簽的iframe標簽具有局部加載內容的特性，所以可以使用其來偽造Ajax請求。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>請輸入要加載的地址：<span id="currentTime"></span></p>
<p>
<input id="url" type="text" />
<input type="button" value="刷新" onclick="LoadPage();"> </p>
</div>
<div>
<h3>加載頁面位置：</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
<script type="text/javascript">
window.onload= function(){ var myDate = new Date();
document.getElementById(‘currentTime‘).innerText = myDate.getTime();
};
function LoadPage(){
var targetUrl = document.getElementById(‘url‘).value;
document.getElementById("iframePosition").src = targetUrl;
}
</script>
</body>
</html>
|
原生AJAX
Ajax主要就是使用 【XmlHttpRequest】對象來完成請求的操作，該對象在主流瀏覽器中均存在(除早起的IE)，Ajax首次出現IE5.5中存在（ActiveX控件）。
1、XmlHttpRequest對象介紹
XmlHttpRequest對象的主要方法：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
a. void open(String method,String url,Boolen async)
用於創建請求
參數：
method： 請求方式（字符串類型），如：POST、GET、DELETE...
url： 要請求的地址（字符串類型）
async： 是否異步（布爾類型）
b. void send(String body)
用於發送請求
參數：
body： 要發送的數據（字符串類型）
c. void setRequestHeader(String header,String value)
用於設置請求頭
參數：
header： 請求頭的key（字符串類型）
vlaue： 請求頭的value（字符串類型）
d. String getAllResponseHeaders()
獲取所有響應頭
返回值：
響應頭數據（字符串類型）
e. String getResponseHeader(String header)
獲取響應頭中指定header的值
參數：
header： 響應頭的key（字符串類型）
返回值：
響應頭中指定的header對應的值
f. void abort()
終止請求
|
XmlHttpRequest對象的主要屬性：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
a. Number readyState
狀態值（整數）
詳細：
0-未初始化，尚未調用open()方法；
1-啟動，調用了open()方法，未調用send()方法；
2-發送，已經調用了send()方法，未接收到響應；
3-接收，已經接收到部分響應數據；
4-完成，已經接收到全部響應數據；
b. Function onreadystatechange
當readyState的值改變時自動觸發執行其對應的函數（回調函數）
c. String responseText
服務器返回的數據（字符串類型）
d. XmlDocument responseXML
服務器返回的數據（Xml對象）
e. Number states
狀態碼（整數），如：200、404...
f. String statesText
狀態文本（字符串），如：OK、NotFound...
|
2、跨瀏覽器支持
- XmlHttpRequest
IE7+, Firefox, Chrome, Opera, etc. - ActiveXObject("Microsoft.XMLHTTP")
IE6, IE5 -
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <h1>XMLHttpRequest - Ajax請求</h1> <input type="button" onclick="XmlGetRequest();" value="Get發送請求" /> <input type="button" onclick="XmlPostRequest();" value="Post發送請求" /> <script src="/statics/jquery-1.12.4.js"></script> <script type="text/javascript"> function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; } function XhrPostRequest(){ var xhr = GetXHR(); // 定義回調函數 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 已經接收到全部響應數據，執行以下操作 var data = xhr.responseText; console.log(data); } }; // 指定連接方式和地址----文件方式 xhr.open(‘POST‘, "/test/", true); // 設置請求頭 xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘); // 發送請求 xhr.send(‘n1=1;n2=2;‘); } function XhrGetRequest(){ var xhr = GetXHR(); // 定義回調函數 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ // 已經接收到全部響應數據，執行以下操作 var data = xhr.responseText; console.log(data); } }; // 指定連接方式和地址----文件方式 xhr.open(‘get‘, "/test/", true); // 發送請求 xhr.send(); } </script> </body> </html> 基於原生AJAX - DemoView Code
jQuery Ajax
jQuery其實就是一個JavaScript的類庫，其將復雜的功能做了上層封裝，使得開發者可以在其基礎上寫更少的代碼實現更多的功能。
- jQuery 不是生產者，而是大自然搬運工。
- jQuery Ajax本質 XMLHttpRequest 或 ActiveXObject
註：2.+版本不再支持IE9以下的瀏覽器
偽AJAX