AJAX學習筆記

2019-11-14 16:05:42

字體：大中小

來源：轉載

供稿：網友

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":"zhangsan@163.com"    },    {        "name":"李四",        "sex":"女",        "email":"lisi@163.com"    }]

使用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": "zhangsan@163.com"    },    {        "name": "李四",        "sex": "女",        "email": "lisi@163.com"    }];    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>zhangsan@163.com</email>  </User>  <User id="2">    <name>李四</name>    <sex>女</sex>    <email>lisi@163.com</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 += "郵箱：zhangsan@163.com<br>";    }    else if (strName == "李四")    {        strHtml += "姓名：李四<br>";        strHtml += "性別：女<br>";        strHtml += "郵箱：lisi@163.com<br>";    }    strHtml += "</div>";    Response.Write(strHtml);     %>

View Code

使用$.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 += "郵箱：zhangsan@163.com<br>";    }    else if (strName == "李四" && strSex == "女")    {        strHtml += "姓名：李四<br>";        strHtml += "性別：女<br>";        strHtml += "郵箱：lisi@163.com<br>";    }    strHtml += "</div>";    Response.Write(strHtml);     %>

View Code

使用$.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 ());        }

    }}