【web】Ajax Study Note
1.Create a XMLHttpRequest Object
（1）For IE7+、Firefox、Chrome、Safari and Opera
variable = new XMLHttpRequest();
（2）For old version like Internet Explorer （IE5 and IE6）
variable = new ActiveXObject("Microsoft.XMLHTTP");
[Example]
var xmlhttp; if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest; } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
2.Sent Server Request
if you want sent request to service , you'd better use XMLHttpRequest Object's open() and send()
[Example]
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open( method ,url , async ) | 規定請求的型別、URL 以及是否非同步處理請求。 * method ：請求的型別；GET 或 POST * url ：檔案在伺服器上的位置 * async |
| send( string ) | 將請求傳送到伺服器。 * string ：僅用於 POST 請求 |
GET
[Example]
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
In the above example, you might get cached results. To avoid this, Please add a unique ID to the URL.
like this:
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); xmlhttp.send();
if you want to use "get" to sent message ,please add message to URL.
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
POST
a easy post request example:
xmlhttp.open("POST","/try/ajax/demo.php",true);
xmlhttp.send();
If you want to sent POST data like HTML form,Please use setRequestHeader() to add HTTP head .and then in "sent()" specify the data you want to send.
xmlhttp.open("POST","try/ajax/demo.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded);
xmlhttp.send("fname=mllt9920&lname=xrilang");
| 方法 | 描述 |
|---|---|
| setRequestHeader( header,value ) | 向請求新增 HTTP 頭。 * header : 規定頭的名稱 * value : 規定頭的值 |
URL -Files on server
The URL parameter of the open () method is the address of the file on the server.
xmlhttp.open("GET"."ajax_test.html",true);
Asynchronous JavaScript and XML - True or False
！if XMLHttpRequest Object want to use in AJAX, The async parameter of open() method must set true.
xmlhttp.open("GET","ajax_test.html",true);
Async=true
When you use async=true , Specify the function to execute when the response is in the ready state in the onreadystatechange event：
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200 )
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
readyState
0：初始化，XMLHttpRequest物件還沒有完成初始化 1：載入，XMLHttpRequest物件開始傳送請求 2：載入完成，XMLHttpRequest物件的請求傳送完成 3：解析，XMLHttpRequest物件開始讀取伺服器的響應 4：完成，XMLHttpRequest物件讀取伺服器響應結束 ———————————————— 版權宣告：本文為CSDN博主「LIU SHIHUA」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。 原文連結：https://blog.csdn.net/S_imon_/article/details/104722438State
1xx：資訊響應類，表示接收到請求並且繼續處理 2xx：處理成功響應類，表示動作被成功接收、理解和接受 3xx：重定向響應類，為了完成指定的動作，必須接受進一步處理 4xx：客戶端錯誤，客戶請求包含語法錯誤或者是不能正確執行 5xx：服務端錯誤，伺服器不能正確執行一個正確的請求 100——客戶必須繼續發出請求 101——客戶要求伺服器根據請求轉換HTTP協議版本 200——交易成功 201——提示知道新檔案的URL 202——接受和處理、但處理未完成 203——返回資訊不確定或不完整 204——請求收到，但返回資訊為空 205——伺服器完成了請求，使用者代理必須復位當前已經瀏覽過的檔案 206——伺服器已經完成了部分使用者的GET請求 300——請求的資源可在多處得到 301——刪除請求資料 302——在其他地址發現了請求資料 303——建議客戶訪問其他URL或訪問方式 304——客戶端已經執行了GET，但檔案未變化 305——請求的資源必須從伺服器指定的地址得到 306——前一版本HTTP中使用的程式碼，現行版本中不再使用 307——申明請求的資源臨時性刪除 400——錯誤請求，如語法錯誤 401——請求授權失敗 402——保留有效ChargeTo頭響應 403——請求不允許 404——沒有發現檔案、查詢或URl 405——使用者在Request-Line欄位定義的方法不允許 406——根據使用者傳送的Accept拖，請求資源不可訪問 407——類似401，使用者必須首先在代理伺服器上得到授權 408——客戶端沒有在使用者指定的餓時間內完成請求 409——對當前資源狀態，請求不能完成 410——伺服器上不再有此資源且無進一步的參考地址 411——伺服器拒絕使用者定義的Content-Length屬性請求 412——一個或多個請求頭欄位在當前請求中錯誤 413——請求的資源大於伺服器允許的大小 414——請求的資源URL長於伺服器允許的長度 415——請求資源不支援請求專案格式 416——請求中包含Range請求頭欄位，在當前請求資源範圍內沒有range指示值，請求也不包含If-Range請求頭欄位 417——伺服器不滿足請求Expect頭欄位指定的期望值，如果是代理伺服器，可能是下一級伺服器不能滿足請求 500——伺服器產生內部錯誤 501——伺服器不支援請求的函式 502——伺服器暫時不可用，有時是為了防止發生系統過載 503——伺服器過載或暫停維修 504——關口過載，伺服器使用另一個關口或服務來響應使用者，等待時間設定值較長 505——伺服器不支援或拒絕支請求頭中指定的HTTP版本
Async=false
To use async = false, change the third parameter in the open () method to false:
xmlhttp.open("GET","test1.txt",false);
！ When you use async = false, do not write the onreadystatechange function - just put the code after the send () statement
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Get Server Response
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字串形式的響應資料。 |
| responseXML | 獲得 XML 形式的響應資料。 |
responseText
If the response which from server is not XML ,please use responseText.
responseText return String . you can use it like this:
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML
if the response which from server is XML , and need analysis as XML Object , please use responseXML.
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;