AJAX學(xué)習(xí)筆記

2019-11-14 16:05:42

字體：大中小

供稿：網(wǎng)友

Ajax:Asynchronous javascript And xml.

AJAX不是新的編程語(yǔ)言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新技術(shù)。AJAX是在不重新加載整個(gè)頁(yè)面的情況下，與服務(wù)器交換數(shù)據(jù)并異步更新部分網(wǎng)頁(yè)的藝術(shù)。

一、傳統(tǒng)Javascript使用ajax方式：

xmlhttpRequest對(duì)象：所有現(xiàn)代瀏覽器均支持XMLHttPRequest對(duì)象，XMLHttpRequest用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。

1）生成XMLHttpRequest對(duì)象：

<script type="text/javascript" >        function CreateXMLHTTP() {            var objXmlHttp;            // 檢測(cè)MSXMLHTTP版本，為了兼容IE各個(gè)版本            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("您的瀏覽器版本過(guò)低，請(qǐng)更新瀏覽器");                    }                }            }            else if (window.XMLHttpRequest) {                objXmlHttp = new XMLHttpRequest();            }            return objXmlHttp;        }    </script>

2）XMLHttpRequest對(duì)象向服務(wù)器發(fā)送請(qǐng)求：

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

method：請(qǐng)求的類(lèi)型有GET貨POST;

url:文件在服務(wù)器上的位置；

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

使用GET還是POST？

與post相比，get更簡(jiǎn)單也更快，并且在大部分情況下都能用。

然而，在以下情況中，請(qǐng)使用post請(qǐng)求：

無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）；

向服務(wù)器發(fā)送大量數(shù)據(jù)（post沒(méi)有數(shù)據(jù)量的限制）；

發(fā)送包含未知字符的用戶(hù)輸入時(shí)，post比get更穩(wěn)定可靠。

3）服務(wù)器響應(yīng)：

如需獲得來(lái)自服務(wù)器的響應(yīng)，使用XMLHttpRequest對(duì)象的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）客戶(hù)端響應(yīng)事件onreadystatechange

XMLHttpRequest對(duì)象的三個(gè)重要屬性：

onreadystatechange:存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng)readystate屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。

readystate：有5個(gè)狀態(tài)，0：請(qǐng)求未初始化，1：服務(wù)器連接已建立，2：請(qǐng)求已接收，3：請(qǐng)求處理中，4：請(qǐng)求已完成，且響應(yīng)已就緒。

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

跟進(jìn)javascript使用ajax的步驟編寫(xiě)一具體實(shí)例：

<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技術(shù)

1、jQuery下load方法

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

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

具體實(shí)例：

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

2、getJSON方法

雖然load方法可以很快的加載數(shù)據(jù)到頁(yè)面上，但是有時(shí)需要對(duì)獲取的數(shù)據(jù)進(jìn)行處理，如果將load方法獲取的數(shù)據(jù)內(nèi)容進(jìn)行遍歷，也可以進(jìn)行數(shù)據(jù)的處理，但這樣獲取的內(nèi)容必須先插入頁(yè)面中，然后才能進(jìn)行，因此它的執(zhí)行效率不高。為了解決此問(wèn)題，采用另一種較為輕量級(jí)的數(shù)據(jù)交互格式j(luò)son文件格式。其調(diào)用語(yǔ)法格式為：

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

具體調(diào)用實(shí)例：

首先創(chuàng)建一個(gè).json格式的文件UserInfo.json:

[    {        "name":"張三",        "sex":"男",        "email":"zhangsan@163.com"    },    {        "name":"李四",        "sex":"女",        "email":"lisi@163.com"    }]

使用getJSON方法進(jìn)行調(diào)用：

<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方法
直接實(shí)例說(shuō)明，創(chuàng)建一個(gè)文件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);

調(diào)用方法：

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

4、jQuery中異步加載xml文檔

具體實(shí)例：創(chuàng)建一個(gè)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>

調(diào)用方法：

<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數(shù)據(jù)中使用$.get()函數(shù)，除此之外，$.get()函數(shù)還可以實(shí)現(xiàn)數(shù)據(jù)的請(qǐng)求。具體實(shí)例說(shuō)明：

創(chuàng)建一個(gè)頁(yè)面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()進(jìn)行調(diào)用：

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

6、$.post()

　　帶參數(shù)向服務(wù)器發(fā)出數(shù)據(jù)請(qǐng)求，全局函數(shù)$.post()和$.get()在本質(zhì)上沒(méi)有太大的區(qū)別，不同的是Get方式不適合傳遞數(shù)據(jù)量較大的數(shù)據(jù)，同時(shí)get請(qǐng)求的歷史信息也會(huì)保存在瀏覽器的緩存中，有一定的安全風(fēng)險(xiǎn)。而以post方式向服務(wù)器發(fā)送數(shù)據(jù)請(qǐng)求，則不存在這兩個(gè)方面的不足。

具體實(shí)例：創(chuàng)建一個(gè)頁(yè)面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()進(jìn)行調(diào)用：

<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()方法，還可以關(guān)注更多的細(xì)節(jié)。

首先列舉一簡(jiǎn)單實(shí)例：

創(chuàng)建一頁(yè)面：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);     %>

創(chuàng)建一前臺(tái)界面：

<div>                <div id="divError"></div>                <div>名稱(chēng)：<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()方法進(jìn)行調(diào)用：

<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("用戶(hù)名或密碼錯(cuò)誤");                        }                    }                })            })        })    </script>

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

$.ajaxSetup()設(shè)置全局Ajax。

8、ajax中全局事件：

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

ajax全局事件可以綁定在頁(yè)面的任何一個(gè)元素中。實(shí)例：

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

9、綜合運(yùn)用：

　　此次介紹它和后臺(tái)系統(tǒng)的交互過(guò)程。編寫(xiě)一個(gè)函數(shù)，其中使用ajax向后臺(tái)傳遞數(shù)據(jù)，并從后臺(tái)獲取數(shù)據(jù)，并顯示出來(lái)。testMethod5函數(shù)中，id為13，后臺(tái)process方法得到id=13后，將字符串heightstr復(fù)制78，然后傳遞到前臺(tái)testMethod函數(shù)中并顯示出來(lái)。

前臺(tái)函數(shù)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>

簡(jiǎn)單：

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

后臺(tái)代碼編寫(xiě)，其中使用反射技術(shù)完成ajax前后臺(tái)交互。

namespace OSCEWEB.UI{    public partial class Test : System.Web.UI.Page    {        private const string PAGE_PATH_INFO = "/UI/Test.aspx";//URL訪問(wèn)路徑        private const string ASSEMBLY_NAME = "OSCEWEB";//程序集名稱(chēng)        private const string CLASS_NAME = "OSCEWEB.UI.Test";//類(lèi)名        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"];//從前臺(tái)獲取值            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 + "/"");//傳遞到前臺(tái)            jsonStringBuilder.Append("}]");            Response.Write(jsonStringBuilder .ToString ());        }

    }}