AJAX之XMLHttpRequest對象

時間 2019-12-19

原文原文鏈接

AJAX是一種建立交互式網頁應用的網頁開發技術，是異步Javascript和XML的集合。其核心是XMLHttpRequest對象，能夠在不向服務器端提交整個頁面的狀況下，實現局部更新網頁，它是AJAX的Web應用程序架構的一項關鍵技術。javascript

基本屬性：

屬性	描述
readyState	表示XMLHttpRequest對的狀態 0表示未初始化。對象已建立，未調用open 1表示open方法成功調用，send方法未調用 2表示send方法調用，還沒有開始接收數據 3表示正在接收數據，http響應頭信息已經接收，響應數據還沒有接收完成 4表示完成，響應數據接收完成。
onreadystatechange	請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上註冊的Javascript函數）。
responseText	服務器響應的文本內容
responseXML	服務器響應的XML內容對於的DOM對象
status	服務器返回的http狀態碼 200表示成功，404表示未找到，500表示服務器內部錯誤
statusText	服務器返回狀態碼的文本信息

基本方法：

方法	描述
open(String method,String url,boolean asynch,String username,String password)	指定和服務器端交互的HTTP方法，URL地址及其餘請求信息。其中，method表示HTTP請求方法，支持全部http方法，通常使用「GET」，「POST」 url表示請求的服務器地址 asynch表示是否採用異步方式，true表示異步，false表示同步後兩個參數能夠不指定，username和password分別表示用戶名和密碼，提供http認證機制須要的用戶名和密碼，通常爲null
send（content）	向服務器發出請求，若是採用異步方式，該方法會當即返回。 Content能夠不指定或者指定爲null表示不發送數據
setRequestHeader（String header，String value）	設置HTTP請求中的指定頭部header的值爲value 此方法須要在open方法以後調用
getAllResponseHeaders（）	返回包含HTTP的全部響應頭信息，其中響應頭包括Content-Length、Date、URI等內容返回值是一個字符串，包含全部頭信息，其中每個鍵名和鍵值用冒號隔開，每一組鍵之間用CR和LF（回車加換行符）來分隔
getResponseHeader（String header）	返回HTTP響應頭中指定的鍵名header對應的值
abort（）	中止當前http請求，對應的XMLHttpRequest對象會復位到未初始化的狀態

XMLHttpRequest五步法：

第一：建立XMLHttpRequest對象
第二：註冊回調函數
第三：設置和服務器交互的參數
第四：設置向服務器端發送的數據，啓動和服務器端的交互
第五：判斷和服務器端的交互是否完成，還有判斷服務器端是否返回正確的數據html

HTML代碼：java

<!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() {            
            //一、建立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;
            }

            //二、註冊回調函數
            xmlhttp.onreadystatechange = callback;
            //獲取當前值
            var username = document.getElementById("userName").value;
            //設置字符串參數，並進行編碼（用於POST提交方式）
            var args = "username=" + encodeURIComponent(username);

            //GET 交互
            //三、設置和服務器端交互的參數
            //xmlhttp.open("GET", "XMLHttpRequest.aspx?username=" + username, true);

            //POST交互
            //三、設置和服務器端交互的參數
            //使用Post方式不用擔憂緩存
            xmlhttp.open("POST", "XMLHttpRequest.aspx?username=" + username, true);
            //設置Content-Type類型，告知服務器實體中有參數
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");


            //四、設置向服務器端發送的數據，啓動和服務器端的交互
            //用於GET提交
            //xmlhttp.send(null);
            //用於POST提交
            xmlhttp.send(args);

            function callback() {
                //五、判斷和服務器端的交互是否完成，還有判斷服務器端是否正確返回了數據
                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();
        }
    }
}