ajax——XMLHttpRequest
阿新 • • 發佈:2017-08-02
http err 及其 自身 blog rri 6.0 enc 文件信息
XMLHttpRequest對象。能夠讓ajax程序在不又一次載入的頁面的情況下更新頁面數據,頁面載入完畢後從server接受發生數據。這樣既減輕了server負擔又回顧了響應速度,縮短了用戶的等待時間,讓web程序更類似於傳統的桌面應用。
XMLHttpRequest對象4步用法:
1.建立XMLHttpRequest對象。
建立XMLHttpRequest對象時。要依據瀏覽器的不同版本號去建立,由於IE5.0和iE6.0,開發者就能夠在WEB頁面內部使用XMLHTTP ActiveX組件擴展自身的功能;而從IE7版本號以上以及其它廠商的瀏覽器,開始創建繼承XML的代理類XMLHttpRequest,所以創建上會有不同。
var xmlhttp;//定義全局變量<span style="white-space:pre"> </span>//1.創建xmlhttprequest對象 if (window.XMLHttpRequest) { //firefox等其它瀏覽器、ie7、8及以上版本號適用 xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType("text/xml"); } else if (window.ActiveXObject) { //ie5、6版本號版本號適用 var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"]; for (var i = 0; i < activexName.length; i++) { try { xmlhttp = new ActiveXObject(activexName[i]); break; } catch (e) { } } } if (xmlhttp==undefined || xmlhttp==null) { alert("當前瀏覽器不支持創建xmlhttprequest對象"); return; }2.註冊回調函數
//2.註冊一個回調方法 xmlhttp.onreadystatechange = callback;3.使用open方法設置和server交互的信息,並設置發送的數據。
open方法中的也有get和post的提交方式。
post的方式時。要設置它的頭文件。而且須要發送時須要將參數寫的send中
//GET方式交互 //3.設置和server交互的對應參數 xmlhttp.open("GET", "HtmlPage1.ashx?username=" + userName, true); ////設置server端發送的數據。啟動和server的交互 xmlhttp.send(null);
//POST方式交互 //3.利用open,設置和server交互的對應參數 xmlhttp.open("POST", "HtmlPage1.ashx", true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //POST方式所須要添加的代碼,頭文件 //設置server端發送的數據。啟動和server的交互。以及傳遞參數 xmlhttp.send("username=" + userName);4.在回調函數中推斷交互是否完畢,響應是否正確,並依據須要獲取server端返回的數據,更新頁面內容。
//回調函數 function callback() { //5.推斷和server器的交互是否完畢,server端是否正確返回了數據 if (xmlhttp.readyState == 4) {//表示server端的交互已經完畢 if (xmlhttp.status == 200) {//表示正確的返回了數據 //純文本的方法接受方法 var message = xmlhttp.responseText; //xml數據相應的dom對象的接受方法 //使用的前提是,server端須要設置 //記憶向div標簽中加入文本內容 var div1 = document.getElementById("message"); div1.innerHTML = message; } } }
XMLHttpRequest的具體屬性和方法:
open() 指定server端交互的http方法(post or get)、url地址、是否異步等信息 send() 向server發出請求。假設採用異步。該方法馬上返回。其內容能夠是null。dom對象。輸入流。字符串 setRequestjeader() 設置http的頭文件,在open方法以後調用。 getallResponseHeaders() 包括http的全部對應頭文件信息。 getResponseHeader() 返回http相應頭文件裏指定的鍵名header相應值。 abort() 停止當前http請求,相應的xmlhttprequest對象復位到未初始化的狀態 readyState 異步操作的狀態:未初始化(0),正在載入(1)。已載入(2)。交互(3)。已完畢(4) onreadystatechange() 請求狀態改變的事件觸發器。 (可註冊函數)
responseText server響應的文本內容。 responseXML server響應的XML內容相應的DOM對象 status server返回的HTTP狀態碼。200成功。
statusText server返回狀態碼的文本信息
總結:
在Ajax應用程序中,XMLHttpRequest對象負責將用戶信息以異步通信地發送到server端。並接收server響應信息和數據。
ajax——XMLHttpRequest