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 ());        }

    }}