Ajax概念介紹（同步和非同步,XMLHttpRequest 對象,ajax-http請求,MLHttpRequest發送請求,XMLHttpRequest取得響應）

AJAX：Asynchronous JavaScript and XML （非同步 JavaScript 和 XML）Ajax 不是某種程式設計語言，是一種在無需重新載入整個網頁的情況下能夠更新部分網頁的技術。

1Ajax同步和非同步

Ajax三步驟：  Asynchronous Javascript And XML1、運用HTML和CSS實現頁面，表達資訊；2、運用XMLHttpRequest和web伺服器進行資料的非同步交換；3、運用JavaScript操作DOM，實現動態局部重新整理；1.同步：就是使用者填寫完資訊之後，全部提交給伺服器，等待伺服器的回應，是一次性全部的。2.非同步：當使用者填寫完一條資訊之後，這條資訊會自動向伺服器提交，然後伺服器響應用戶端，在此過程中，使用者依然在填寫表格的資訊，即向伺服器請求多次，節省了使用者的時間，提高了使用者的體驗。3.XMLhttpRequest對象來實現這一功能，也需要javascript來操作DOM實現局部的資訊更新。XMLHttpRequest對象的出現分割了同步和非同步。XMLHttpRequest出現之前是同步的，出現之後是非同步。同步：頁面請求即時傳給伺服器，導致必填資料沒有填的時候，要回到頁面上重新從頭填寫，耗時間長度、客戶體驗差。非同步：在頁面必填項寫上必填選項，不用通過傳給伺服器判斷必填內容是否已經填寫完整，耗時短、使用者體驗強。

2XMLHttpRequest 對象 所有現代瀏覽器均支援 XMLHttpRequest 對象，非同步實現是利用了XMLHttpRequest對象，利用該對象進行非同步作業，即後台可以和伺服器交換資料，而不需要重新載入整個頁面，只對網頁部分更新。 建立 XMLHttpRequest 對象的文法： variable=new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象： variable=new ActiveXObject("Microsoft.XMLHTTP"); 為了應對所有的現代瀏覽器，包括 IE5 和 IE6，檢查瀏覽器是否支援 XMLHttpRequest 對象。如果支援，則建立 XMLHttpRequest 對象。如果不支援，則建立 ActiveXObject ： 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"); } 3ajax-http請求

1.HTTP是電腦通過網路進行通訊的規則2.HTTP是一種無狀態的協議(不建立持久的串連，服務端不保留串連的相關資訊,瀏覽器發出請求和伺服器返迴響應是一個沒有記憶的過程)3.一個完整的【HTTP請求】過程有7個步驟：1>建立TCP串連2>Web瀏覽器向Web伺服器發送請求命令3>Web瀏覽器發送要求標頭資訊4>Web伺服器應答5>Web伺服器發送應答頭資訊6>Web伺服器向瀏覽器發送資料7>Web伺服器關閉TCP串連http請求：1.HTTP請求的方法或動作，post或get2.正在請求的URL3.要求標頭，包含一些用戶端環境資訊，身分識別驗證資訊等4.請求體(請求本文)，包含要發送的一些字串資訊,表單資訊等等//要求標頭和請求體之間有一個空行，表面要求標頭已經結束GET:一般用於資訊的擷取，使用URL傳遞參數，對發送資訊的數量也有限制，一般在2000字元。預設，一般用於查詢、擷取操作,不是很安全，任何人可見，資訊都顯示在URL中POST：一般用於修改伺服器上的資源，對所發送的數量無限制。一般用於發送表單資料，建立，修改，刪除等操作，要安全一些，不在URL中顯示，對其他人不顯示。【等冪】:一個操作任意多次執行所產生的影響均與一次執行的影響相同。GET請求就是一種等冪操作。【HTTP響應】一般由3部分組成：①一個數字或文字組成的狀態代碼，用來顯示請求是成功還是失敗②回應標頭，和要求標頭一樣包含許多有用資訊，如伺服器類型、日期時間、內容類型和長度等③響應體，即響應本文//回應標頭和響應體之間有空行【HTTP狀態代碼】1XX：資訊類，表示收到Web瀏覽器請求，正在進一步處理中2XX:成功，表示使用者請求被正確接收3XX:重新導向，表示請求沒有成功，客戶必須採取進一步動作4XX:用戶端錯誤，表示用戶端提交的請求有錯誤，例如：404 NOT Found,意味著請求中所引用的文檔不存在5XX:伺服器錯誤，表示伺服器不能完成對請求的處理，如：500

4XMLHttpRequest發送請求：兩個方法 open(method,url,async) method：規定HTTP發送請求的方式是get還是post,不區分大小寫，一般來說用大寫 url：請求地址(相對位址或絕對位址) async:同步/非同步(false/true)，預設是非同步也就是true，可以不用填寫 send(string):發送到伺服器（該參數可以填或者不填-----get方法不填或填null，post:一般要填） 例如： request.open("POST","create.php",true); request.setRequestHeader("Content-type","application/x-www-form-urlencoded ")//設定HTTP頭資訊--一定要寫在open()和send()之間 request.send("name=xxxx&set=xxx");

5XMLHttpRequest取得響應 * responseText:獲得字串形式的響應資料 * responseXML：獲得XML形式的響應資料（比較少） * status和statusText:以數字和文本形式返回HTTP狀態代碼 * getAllResponseHeader()：擷取所有的響應前序 * getResponseHeader()：查詢響應中的某個欄位的值 readyState屬性的變化代表格服務器響應的變化 0：請求未初始化，open還沒有調用 1：伺服器串連已建立，open已經調用了 2：請求已接收，也就是接收到頭資訊了 3：請求處理中，也就是接收到了響應主體 4：請求已完成，且響應已就緒，也就是響應完成了 var request = new XMLHttpRequest() //建立XHR對象 request.open("GET","get.php",true); //用get方法非同步開啟get.php request.send(); //發送要求標頭資訊 request.onreadystatechange=function(){ if(request.readState===4&&request.status===200){ //做一些事情 request.responseText; } } 通過onreadystatechange事件 ，對readyState屬性進行監聽即對伺服器的響應進行監聽， readyState===4響應完成； status===200，請求成功 建立非同步請求的過程4個步驟： a:new一個XHR對象 b:調用open方法 c:send一些資料 d:對過程進行監聽，來知道伺服器是不是正確地做出了響應，接著可以做一些事情 （監聽readyState,響應成功可以做一些事情，比如擷取伺服器響應的內容在頁面上做一些呈現）