AJAX XMLHttpRequest對象詳解

AJAX XMLHttpRequest對象詳解_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

AJAX是一種建立互動式網頁應用的網頁開發技術，是非同步Javascript和XML的集合。其核心是XMLHttpRequest對象，可以在不向伺服器端提交整個頁面的情況下，實現局部更新網頁，它是AJAX的Web應用程式架構的一項關鍵技術。
基本屬性：

基本方法：

XMLHttpRequest五步法：
第一：建立XMLHttpRequest對象
第二：註冊回呼函數
第三：設定和伺服器互動的參數
第四：設定向伺服器端發送的資料，啟動和伺服器端的互動
第五：判斷和伺服器端的互動是否完成，還有判斷伺服器端是否返回正確的資料
HTML代碼：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title></title>  <script type="text/javascript" >   var xmlhttp;   function submit() {       //1、建立XMLHttpRequest對象    if (window.XMLHttpRequest) {     xmlhttp = new XMLHttpRequest();     if (xmlhttp.overrideMineType) {//針對某些特定版本的mozillar瀏覽器的BUG進行修正      //將覆蓋發送給伺服器的頭部，強制 text/xml 作為 mime-type      xmlhttp.overrideMineType("text/xml");     }    } else if (window.ActiveXObject) {//針對IE瀏覽器進行處理     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、註冊回呼函數    xmlhttp.onreadystatechange = callback;    //擷取當前值    var username = document.getElementById("userName").value;    //設定字串參數，並進行編碼（用於POST提交方式）    var args = "username=" + encodeURIComponent(username);     //GET 互動    //3、設定和伺服器端互動的參數    //xmlhttp.open("GET", "XMLHttpRequest.aspx?username=" + username, true);     //POST互動    //3、設定和伺服器端互動的參數    //使用Post方式不用擔心緩衝    xmlhttp.open("POST", "XMLHttpRequest.aspx?username=" + username, true);    //設定Content-Type類型，告知伺服器實體中有參數    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");      //4、設定向伺服器端發送的資料，啟動和伺服器端的互動    //用於GET提交    //xmlhttp.send(null);    //用於POST提交    xmlhttp.send(args);     function callback() {     //5、判斷和伺服器端的互動是否完成，還有判斷伺服器端是否正確返回了資料     if (xmlhttp.readyState == 4) {//readyState=4表示互動完成      if (xmlhttp.status == 200) {//status=200表示正確返回了資料       //純文字資料的接收方法       var message = xmlhttp.responseText;       var div = document.getElementById("message");       div.innerHTML = message;      }     }    }   }  </script> </head> <body>  <input type="text" id="userName" />  <input type="button" value="使用者名稱校正" onclick="submit()" />  <br />  <div id="message"></div> </body> </html>

aspx中的代碼：

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;  namespace XMLHttpRequest五步法 {  public partial class XMLHttpRequest : System.Web.UI.Page  {   protected void Page_Load(object sender, EventArgs e)   {    //Response.Clear();    //擷取當前值，get提交使用Request.QueryString方法    //string username = Request.QueryString["username"];    //POST提交，使用Request.Form    string username = Request.Form["username"];     Response.Write("姓名：'"     + username + "'<br/>時間：'" + DateTime.Now.ToString() + "'");    Response.End();   }  } }

總結：

XMLHttpRequest是AJAX的核心部分，需要好好理解。剛開始接觸的時候，有些不明白是怎麼回事，而且視頻中講的也是原生的AJAX，表面上看來不太好理解，但是通過具體的demo實踐，就會發現其實這個挺容易理解的。

以上就是本文的全部內容，希望對大家的學習有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More