AJAX學習筆記

AJAX:Asynchronous Javascript And XML.

AJAX不是新的編程語言，而是一種使用現有標准的新技術。AJAX是在不重新加載整個頁面的情況下，與服務器交換數據並異步更新部分網頁的藝術。

 

一、傳統javascript使用ajax方式：

XMLHttpRequest對象：所有現代瀏覽器均支持XMLHttpRequest對象，XMLHttpRequest用於在后台與服務器交換數據。

1）生成XMLHttpRequest對象：

<script type="text/javascript" >
        function CreateXMLHTTP() {
            var objXmlHttp;
            // 檢測MSXMLHTTP版本，為了兼容IE各個版本
            var activeKey = new Array("MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP");
            if (window.ActiveXObject) {
                for (var i = 0; i < activeKey.length; i++) {
                    try {
                        objXmlHttp = new ActiveXObject(activeKey[i]);
                        if (objXmlHttp != null)
                            return objXmlHttp;
                    }
                    catch (error) {
                        throw new Error("您的瀏覽器版本過低，請更新瀏覽器");
                    }
                }
            }
            else if (window.XMLHttpRequest) {
                objXmlHttp = new XMLHttpRequest();
            }
            return objXmlHttp;
        }
    </script>

2）XMLHttpRequest對象向服務器發送請求：

objXmlHttp.open(method,url,async);
objXmlHttp.send();

method：請求的類型有GET貨POST;

url:文件在服務器上的位置；

async:true（異步）或false(同步).

 

使用GET還是POST？

與post相比，get更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用post請求：

無法使用緩存文件（更新服務器上的文件或數據庫）；

向服務器發送大量數據（post沒有數據量的限制）；

發送包含未知字符的用戶輸入時，post比get更穩定可靠。

 

3）服務器響應：

如需獲得來自服務器的響應，使用XMLHttpRequest對象的responseText或responseXML屬性。

例如：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;


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;

 

4）客戶端響應事件onreadystatechange

XMLHttpRequest對象的三個重要屬性：

onreadystatechange:存儲函數（或函數名），每當readystate屬性改變時，就會調用該函數。

readystate：有5個狀態，0：請求未初始化，1：服務器連接已建立，2：請求已接收，3：請求處理中，4：請求已完成，且響應已就緒。

status:有200：“OK”，404：未找到頁面。

 

跟進javascript使用ajax的步驟編寫一具體實例：

<script type="text/javascript" >
        function GetSendData() {
            document.getElementById("divTip").innerHTML = "正在加載中";
            var strSendUrl = "b.html?date=" + Date();
            CreateXMLHTTP();
            objXmlHttp.open("GET", strSendUrl, true);
            objXmlHttp.onreadystatechange = function () {
                if (objXmlHttp.readyState == 4) {
                    if (objXmlHttp.status == 200) {
                        document.getElementById("divTip").innerHTML = objXmlHttp.responseText;
                    }
                }
            }

            objXmlHttp.send(null);
        }
    </script>

 

二、jQuery中ajax技術

1、jQuery下load方法

在jQuery中使用load方法可以輕松獲取異步數據的功能，語法格式如下：

load(url,[data],[callback])

具體實例：

<script type="text/javascript" >
        $(function () {
            $("#Button2").click(function () {
                $("#divTip2").load("b.html");
            })
        })
    </script>

 

2、getJSON方法

雖然load方法可以很快的加載數據到頁面上，但是有時需要對獲取的數據進行處理，如果將load方法獲取的數據內容進行遍歷，也可以進行數據的處理，但這樣獲取的內容必須先插入頁面中，然后才能進行，因此它的執行效率不高。為了解決此問題，采用另一種較為輕量級的數據交互格式json文件格式。其調用語法格式為：

$.getJSON(url,[data],[callback])

 具體調用實例：

首先創建一個.json格式的文件UserInfo.json:

[
    {
        "name":"張三",
        "sex":"男",
        "email":"[e-mail]"
    },
    {
        "name":"李四",
        "sex":"女",
        "email":"[e-mail]"
    }
]

使用getJSON方法進行調用：

<script type="text/javascript" >
        $(function () {
            $("#Button1").click(function () {
                $.getJSON("UserInfo.json", function (data) {
                    $("#divTip").empty();
                    var strHtml = "";
                    $.each(data, function (infoIndex, info) {
                        strHtml += "姓名：" + info["name"] + "<br>";
                        strHtml += "性別：" + info["sex"] + "<br>";
                        strHtml += "郵箱：" + info["email"] + "<br>";
                    })
                    $("#divTip").html(strHtml);
                })
            })
        })
    </script>

 

3、getScript方法
直接實例說明，創建一個文件UserInfo.js:

var data = [
    {
        "name": "張三",
        "sex": "男",
        "email": "[e-mail]"
    },
    {
        "name": "李四",
        "sex": "女",
        "email": "[e-mail]"
    }
];

    var strHtml = "";
    $.each(data, function () {
        strHtml += "姓名：" + this["name"] + "<br>";
        strHtml += "性別：" + this["sex"] + "<br>";
        strHtml += "郵箱：" + this["email"] + "<br>";
    })
    $("#divTip").html(strHtml);

調用方法：

<script type="text/javascript" >
        $(function () {
            $("Button1").click(function () {
                $.getScript("UserInfo.js");
            })
        })
    </script>

 

4、jQuery中異步加載xml文檔

具體實例：創建一個UserInfo.xml文件

<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User id="1">
    <name>張三</name>
    <sex>男</sex>
    <email>[e-mail]</email>
  </User>
  <User id="2">
    <name>李四</name>
    <sex>女</sex>
    <email>[e-mail]</email>
  </User>
</Info>

調用方法：

<script type="text/javascript" >
        $(function () {
            $("Button1").click(function () {
                $.get("UserInfo.xml", function (data) {
                    $("#divTip").empty();
                    var strHtml = "";
                    $(data).find("User")
                        .each(function () {
                            var $strUser = $(this);
                            strHtml += "姓名：" + $strUser.find("name").text() + "<br>";
                            strHtml += "性別：" + $strUser.find("sex").text() + "<br>";
                            strHtml += "郵箱：" + $strUser.find("email").text() + "<br>";
                        })
                        $("#divTip").html(strHtml);
                })
            })
        })
    </script>

 

5、$.get()

jQuery中異步加載xml數據中使用$.get()函數，除此之外，$.get()函數還可以實現數據的請求。具體實例說明：

創建一個頁面UserInfo.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>

<%
    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);
    string strHtml = "<div>";
    if (strName == "張三")
    {
        strHtml += "姓名：張三<br>";
        strHtml += "性別：男<br>";
        strHtml += "郵箱：[e-mail]<br>";
    }
    else if (strName == "李四")
    {
        strHtml += "姓名：李四<br>";
        strHtml += "性別：女<br>";
        strHtml += "郵箱：[e-mail]<br>";
    }

    strHtml += "</div>";
    Response.Write(strHtml);
     %>

使用$.get()進行調用：

<script type="text/javascript" >
        $(function () {
            $("#Button1").click(function () {
                $.get("UserInfo.aspx",
                { name: encodeURI($("#txtName").val()) },
                function (data) {
                    $("#divTip")
                    .empty()
                    .html(data);
                })
            })
        })
    </script>

 

6、$.post()

　　帶參數向服務器發出數據請求，全局函數$.post()和$.get()在本質上沒有太大的區別，不同的是Get方式不適合傳遞數據量較大的數據，同時get請求的歷史信息也會保存在瀏覽器的緩存中，有一定的安全風險。而以post方式向服務器發送數據請求，則不存在這兩個方面的不足。

具體實例：創建一個頁面UserInfo2.aspx

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>

<%
    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);
    string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);
    string strHtml = "<div>";
    if (strName == "張三" && strSex == "男")
    {
        strHtml += "姓名：張三<br>";
        strHtml += "性別：男<br>";
        strHtml += "郵箱：[e-mail]<br>";
    }
    else if (strName == "李四" && strSex == "女")
    {
        strHtml += "姓名：李四<br>";
        strHtml += "性別：女<br>";
        strHtml += "郵箱：[e-mail]<br>";
    }

    strHtml += "</div>";
    Response.Write(strHtml);
     %>

使用$.post()進行調用：

<script type="text/javascript" >
        $(function () {
            $("#Button1").click(function () {
                $.post("UserInfo2.aspx",
                { name: encodeURI($("#txtName").val()), 
                  sex:encodeURI($("#selSex").val())
                },
                function (data) {
                    $("#divTip")
                    .empty()
                    .html(data);
                })
            })
        })
    </script>

 

7、$.ajax()

$.ajax()方法是jQuery中最底層的方法，該方法不僅可以方便的完成$.get(),$.post()方法，還可以關注更多的細節。

首先列舉一簡單實例：

創建一頁面：login.aspx

<%@ Page Language ="C#" ContentType="text/html" ResponseEncoding="gb2312"%>
<%
    string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]);
    string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
    bool isLogin = false;

    if (strName == "admin" && strPass == "admin")
    {
        isLogin = true;
    }
    Response.Write(isLogin);
     %>

創建一前台界面：

<div>
                <div id="divError"></div>
                <div>名稱：<input id="txtName" type="text"/></div>
                <div>密碼：<input id="txtPass" type="text" /></div>
                <div>
                    <input id="btnLogin" type="button" value="登錄" class="btn" />&nbsp;&nbsp;
                    <input id="btnReset" type="button" value="取消" class="btn" />
                </div>
            </div>

 

使用$.ajax()方法進行調用：

<script type="text/javascript" >
        $(function () {
            $("#btnLogin").click(function () {
                var strName = encodeURI($("#txtName").val());
                var strPass = encodeURI($("#txtPass").val());
                $.ajax({
                    url: "login.aspx",
                    dataType: "html",
                    data: { txtName: strName,
                        txtPass: strPass
                    },
                    success: function (strValue) {
                        if (strValue == "True") {
                            $("#divError")
                                    .show().html("操作提示，登錄成功");
                        }
                        else {
                            $("#divError")
                                    .show().html("用戶名或密碼錯誤");
                        }
                    }
                })
            })
        })
    </script>

 

$.ajax()方法中的參數有：url，type,data,dataType,beforeSend,complete,success,error,timeout,global,async,cache.它們所代表的具體意義，可以查些資料，此處就不一一贅述了。

$.ajaxSetup()設置全局Ajax。

 

8、ajax中全局事件：

ajaxComplete(callback),ajaxError,ajaxSend,ajaxStart,ajaxStop,ajaxSuccess.

ajax全局事件可以綁定在頁面的任何一個元素中。實例：

$("#divTip").ajaxStart(function(){
   $(this).html("正在處理中...") ;
})

 

9、綜合運用：

　　此次介紹它和后台系統的交互過程。編寫一個函數，其中使用ajax向后台傳遞數據，並從后台獲取數據，並顯示出來。testMethod5函數中，id為13，后台process方法得到id=13后，將字符串heightstr復制78，然后傳遞到前台testMethod函數中並顯示出來。

 

前台函數testMethod5：

<script type="text/javascript" >
        function testMethod5() {
            var id = 13;
            var age = 46;
            var address = "china";
            $.ajax({
                type: "POST",
                url: "Test.aspx/Process",
                data: {
                    "id": id,
                    "age": age,
                    "address": address
                },
                dataType: "json",
                success: function (jsonData) {
                    var result = jsonData[0]["result"];
                    if (result == "1") {
                        var getValue = jsonData[0]["height"];
                        alert(getValue);

                    } else {
                        alert("false");
                    }
                }
            });
        }
    </script>

簡單：

<div>
        <input type="button" id="Button1" value="btn3" onclick ="testMethod5()" />
    </div>

 

 

后台代碼編寫，其中使用反射技術完成ajax前后台交互。

namespace OSCEWEB.UI
{
    public partial class Test : System.Web.UI.Page
    {
        private const string PAGE_PATH_INFO = "/UI/Test.aspx";//URL訪問路徑
        private const string ASSEMBLY_NAME = "OSCEWEB";//程序集名稱
        private const string CLASS_NAME = "OSCEWEB.UI.Test";//類名

        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Params["PATH_INFO"].StartsWith(PAGE_PATH_INFO + "/"))
            {
                Response.End();
            }
        }

        protected override void OnInit(EventArgs e)
        {
            string pathInfo = Request.Params["PATH_INFO"];
            if (pathInfo.StartsWith(PAGE_PATH_INFO + "/"))
            {
                string[] nameList = pathInfo.Substring(PAGE_PATH_INFO.Length + 1).Split('/');
                if (nameList.Length < 1)
                {
                    Response.End();
                    return;
                }

                try
                {
                    Assembly assembly = Assembly.Load(ASSEMBLY_NAME);
                    Type type = assembly.GetType(CLASS_NAME);
                    MethodInfo method = type.GetMethod(nameList[0], System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance);
                    method.Invoke(this, null);
                }
                catch (Exception ex)
                {
                    Response.End();
                    return;
                }
            }
        }

        private void Process()
        {
            string idStr = Request.Form["id"];//從前台獲取值
            int id = Convert.ToInt32(idStr);
            string heightStr;
            if (id == 13)
            {
                heightStr = "78";
            }
            else
            {
                heightStr = "96";
            }

            StringBuilder jsonStringBuilder = new StringBuilder(string.Empty);
            jsonStringBuilder.Append("[{");
            jsonStringBuilder.Append("\"result\":\"1\",");
            jsonStringBuilder.Append("\"height\":\"" + heightStr + "\"");//傳遞到前台
            jsonStringBuilder.Append("}]");

            Response.Write(jsonStringBuilder .ToString ());
        }


    }
}

 筆停此處，如有更深層次的理解，再行更新。

 

補充：

上文提到ajax調用頁面，那頁面是如何處理ajax請求的呢？實例中使用了反射技術，在平時的項目操作時更多的是使用一般處理程序，下面簡單介紹下一般處理程序：

一般處理程序，一般處理程序是什么呢？ 一般處理程序實際上就是一個處理程序類。對於ASP.NET網站來說，網站最常見的處理結果就是HTML網頁，生成網頁的工作通常使用拓展名為ASPX的web窗體來完成。對於處理結果不是HTML的請求，都可以通過一般處理程序完成，例如：RSS、Feed、XML、圖片等。一般處理程序是ASP.NET網站中最為簡單、高效的處理程序，在處理返回類型不是HTML的請求中有着重要的作用。

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var param = context.Request["act"];
            context.Response.Write(param);
        }

HttpContext類：封裝有關個別HTTP請求的所有HTTP特定的信息，又叫上下文。 看到這個解釋，我覺得有些抽象，Http特定信息具體又是什么？看了下備注：

為繼承 IHttpModule 和 IHttpHandler 接口的類提供了對當前 HTTP 請求的 HttpContext 對象的引用。該對象提供對請求的內部 Request、Response 和 Server 屬性的訪問。

    1.生命周期：從用戶發送請求開始到服務器處理完請求並生成內容返回到客戶端為止。針對每個不同用戶的請求,服務器都會創建一個新的HttpContext實例直到請求結束,服務器銷毀這個實例.

    2.HttpContext的作用：處理請求的屬性如：request，response，server等。其實我們在開發asp.net頁面的時候，可以直接使用request等，那為什么要通過HttpContext類來訪問呢？因為request等這些可以在aspx頁面的代碼中直接使用，但是在IHttpModule或IHttpHandler中就不能直接使用。HttpContext類對Request、Response、Server等進行了封裝，保證在整個請求周期內都可以隨時隨地地調用。

    3.HttpContext其它功能：HttpContext還可以處理CacHe，HttpContext.Item等，在其生命周期內可以存儲一些臨時數據，方便隨時使用。當用戶發送某個Http請求，我們可以通過HttpContext進行截獲，查看里面包含了哪些請求的信息，然后可以進行一系列的操作，比如說切換到其他的頁面，這個時候，可以重組請求的數據滿足新頁面的要求。即：即使不在page頁面中，也可以通過HttpContext的Current屬性來獲取當前的web狀態。