jquery ajax

Ajax（Asynchronous JavaScript and XML），其核心是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。这种利用Ajax技术进行的数据交互并不局限于Web动态页面，在普通的静态HTML页面中同样可以实现。

在页面开发过程中，为了加快整体页面打开的速度，对于某局部的数据采用异步读取（Ajax技术）的方法获取，这一方法的应用，极大地优化了用户的体验，优化了页面的执行。

一、传统的javascript方法实现Ajax功能：

<!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>
        var objXmlHttp = null;
        function createXmlHttp() {
            if (window.ActiveXObject) {
                objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                if (window.XMLHttpRequest) {
                    objXmlHttp = new XMLHttpRequest();
                } else {
                    alert("initial error");
                }
            }
        }
        function getRequestData() {
            var content = document.getElementById("content");
            content.innerHTML = "加载中......";
            var url = "request.html?date=" + Date();
            //创建XMLHttpRequest对象
            createXmlHttp();
            //初始化XMLHttpRequest对象
            objXmlHttp.open("GET", url, true);
            //回调函数
            objXmlHttp.onreadystatechange = function () {
                //请求完成加载
                if (objXmlHttp.readyState == 4) {
                    //响应成功
                    if (objXmlHttp.status == 200) {
                        content.innerHTML = objXmlHttp.responseText;
                    }
                }
            }

            //send发送请求
            objXmlHttp.send(null);
        }
    </script>
</head>
<body>
    <div class="wrapper">
        <input type="button" name="name" value="请求" onclick="getRequestData()" />
        <div id="content">
        </div>
    </div>
</body>
</html>
request.html
<h1>Hello World!</h1>

二、jquery load()

其调用的语法格式为：

load（url, [data], [callback]）

url：被加载的页面地址；

可选项[data]参数表示发送到服务器的数据，其格式为key/value；

可选项[callback]参数表示加载成功后，返回至加载页的回调函数；

在load()方法中，参数url还可以用于过滤页面中的某类别的元素，如代码$("#content").load("request.html .div")，则表示获取页面request.html中类别名为"div"的全部元素。

<!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 src="scripts/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <input type="button" name="name" value="请求" id="request" />
        <div id="content">
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#request").click(function () {
            $("#content").load("request.html");
        })
    })
</script>
</html>
request.html
<h1>Hello World!</h1>

三、jquery getJSON()

使用load()方法可以很快地加载数据到页面中，但有时需要对获取的数据进行处理，如果将用load()方法获取的内容进行遍历，也可以进行数据的处理，但这样获取的内容必须先插入页面中，然后才能进行，因此，执行的效率不高。

在jquery中，专门有一个全局函数getJSON()，用于调用JSON格式的数据。

其调用的语法格式为：

$.getJSON（url, [data], [callback]）

参数url表示请求的地址；

可选项[data]参数表示发送到服务器的数据，其格式为key/value；

可选项[callback]参数表示加载成功时执行的回调函数；

<!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 src="scripts/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <input type="button" name="name" value="请求" id="request" />
        <div id="content">
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#request").click(function () {
            $.getJSON("users.js", function (data) {
                var content = $("#content");
                content.empty();
                var html = "<ul>";
                $.each(data, function (index, item) {
                    html += "<li>" + item.name + "</li>";
                })
                html += "</ul>";
                content.html(html);
            })
        })
    })
</script>
</html>
users.js
[
    {
        "name":"wosiwoxing",
        "age":20
    },
    {
        "name":"pengjielee",
        "age":22
    },    
    {
        "name":"meetbetterme",
        "age":24
    }
]

四、jquery getScript()

在jquery中，除通过全局函数getJSON获取.json格式的文件内容外，还可以通过另外一个全局函数getScript()获取.js文件的内容。其实，在页面中获取.js文件的内容有很多方法。

$("<script type='text/javascript' src='users.js' />").appendTo("head");

在jquery中，通过全局函数getScript()加载.js文件后，不仅可以像加载页面片段一样轻松地注入脚本，而且所注入的脚本自动执行，大大提高了页面的执行效率。

其调用的语法格式为：

$.getScript（url, [callback]）

参数url为等待加载的js文件地址；

可选项[callback]参数表示加载成功时执行的回调函数；

<!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 src="scripts/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <input type="button" name="name" value="请求" id="request" />
        <div id="content">
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#request").click(function () {
            $.getScript("users.js", function (data) {
                alert("success");
            })
        })
    })
</script>
</html>
users.js
var data = [
    {
        "name": "wosiwoxing",
        "age": 20
    },
    {
        "name": "pengjielee",
        "age": 22
    },
    {
        "name": "meetbetterme",
        "age": 24
    }
];
var html = "<ul>";
$.each(data, function (index, item) {
    html += "<li>" + item.name + "</li>";
})
html += "</ul>";
$("#content").empty().html(html);

五、jquery get()

在日常的页面开发中，有时也会遇到使用xml文档保存数据的情况，对于这种格式的数据，jquery中使用全局函数$.get()进行访问。

其调用的语法格式为：

$.get（url, [data], [callback], [type]）

参数url表示等待加载的数据地址；

可选项[data]参数表示发送到服务器的数据，其格式为key/value；

可选项[callback]参数表示加载成功时执行的回调函数；

可选项[type]参数表示返回数据的格式，如html、xml、js、json、text等。

在下面代码中，先通过each()方法遍历文档中的User节点，然后在遍历的过程中使用find方法，查询该节点中的name选项，并通过text()方法获取各选项的值。

<!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 src="scripts/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <input type="button" name="name" value="请求" id="request" />
        <div id="content">
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#request").click(function () {
            $.get("users.xml", function (data) {
                var html = "<ul>";
                $(data).find("user").each(function () {
                    var user = $(this);
                    html += "<li>" + user.find("name").text() + "</li>";
                })
                $("#content").empty().html(html);
            })
        })
    })
</script>
</html>
users.xml
<?xml version="1.0" encoding="utf-8" ?>
<data>
  <user>
    <name>wosiwoxing</name>
    <age>20</age>
  </user>
  <user>
    <name>pengjielee</name>
    <age>22</age>
  </user>
  <user>
    <name>meetbetterme</name>
    <age>24</age>
  </user>
</data>

Ajax技术最终体现在与服务器的动态数据实现人机交互中，即客户端传递带有参数的请求，服务器接收后，分析所传递来的请求，并做出相应的响应，发送对应数据至客户端，客户端接收请求返回的数据，从页实现了数据的双向传递。

六、$.get()请求服务器数据

客户端向服务端传递参数时，使用的格式是{key0:value0，key1:value1，...}，"key0"为参数名称，"value0"为参数的值。

如果参数的值是中文格式，必须通过使用encodeURI()进行转码，当然，在客户端接收时，使用decodeURI()进行解码即可。

<!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 src="scripts/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <input type="text" name="name" value=" " id="username" />
        <input type="button" name="name" value="请求" id="request" />
        <div id="content">
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#request").click(function () {
            $.get("Process.ashx", { name: encodeURI($("#username").val()) }, function (data) {
                $("#content").empty().html(data);
            })
        })
    })
</script>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Practice
{
    public class Process : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string username = System.Web.HttpUtility.UrlDecode(context.Request["name"]);
            context.Response.Write(username);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

七、$.post()请求服务器数据

全局函数$.post()与$.get()在本质上没有太大的区别，所不同的是，get方式不适合传递数据量较大的数据，同样，其请求的历史信息会保存在浏览器的缓存中，有一定的安全风险。而post方式向服务器发送数据请求，则不存在这两个方面的不足。

其调用格式为：

$.post（url，[data]，[callback]，[type]）

<!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 src="scripts/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <input type="text" name="name" value=" " id="username" />
        <input type="button" name="name" value="请求" id="request" />
        <div id="content">
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#request").click(function () {
            $.post("Process.ashx", { name: encodeURI($("#username").val()) }, function (data) {
                $("#content").empty().html(data);
            })
        })
    })
</script>
</html>

Process.ashx如上

八、serialize()序列化表单

在使用全局函数$.get()和$.post()向服务器传递参数时，其中的参数是通过名称属性逐个搜索输入字段的方式进行传输的，如果表单的输入字段过多，这种方式就比较麻烦，而且不利于拓展。

为了解决这个问题，jquery引入serialize()方法，该方法可以简化参数传值的方式。

其调用的语法格式如下：

serialize()

该方法的功能是将所选择的dom元素转换成能随ajax传递的字符串，即序列化所选择的dom元素。

虽然serialize()方法可以很完美地模拟浏览器提交表单的操作，同时自动解决了中文编码问题，但它自身有很多不足，如表单中有多项被选中时，该方法只能传递一项的值，因此，在选择传递参数时，须慎重考虑。

<!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 src="scripts/jquery.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <form id="regForm">
            <input type="text" name="name" value="" id="username" placeholder="姓名" />
            <input type="text" name="email" value="" id="email" placeholder="邮箱" />
            <input type="button" name="name" value="请求" id="request" />
        </form>
        <div id="content">
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#request").click(function () {
            $.post("Process.ashx", $("#regForm").serialize(), function (data) {
                var content=$("#content");
                var html = content.html();
                content.html(html + "<br />" + data);
            })
        })
    })
</script>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Practice
{
    public class Process : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string username = System.Web.HttpUtility.UrlDecode(context.Request["name"]);
            string email = System.Web.HttpUtility.UrlDecode(context.Request["email"]);
            context.Response.Write(username + " : " + email);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

九、$.ajax()方法

在jquery中，还有一个功能更为强悍的最底层的方法$.ajax()，该方法不仅可以很方便地实现load()、get()、post()三个函数完成的功能，还更多地关注实现细节。

其调用的语法格式为：

$.ajax（[options]）

可选参数[options]为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器响应后回调的数据。

$.ajax()方法中的参数列表：

url：string，

　　发送请求的地址（默认为当前页面）；

type：string，

　　数据请求方式（post或get），默认为get；

data：string或object，

　　发送到服务器的数据。如果不是字符串则自动转成字符串格式，如果是get请求方式，那么，该字符串将附在url后面；

dataType：string，

　　服务器返回的数据类型，如果没有指定，jquery将自动根据HTTP包MINE信息自动判断，服务器返回的数据根据自动判断的结果进行解析，传递给回调函数，其可用类型为：

　　html，返回纯文本的html信息，包含的script标记会在插入页面时被执行；

　　script，返回纯文本的javascript代码；

　　text，返回纯文本字符串；

　　xml，返回可被jquery处理的xml文档；

　　json，返回json格式的数据；

beforeSend：function

　　该函数用于发送请求前修改XMLHttpRequest对象，其中的参数就是XMLHttpRequest对象，由于该函数本身是jquery事件，因此，如果函数返回false，则表示取消本次事件；

complete：function

　　请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，其中有两个参数：

　　第一个是XMLHttpRequest对象，

　　第二个是strStatus，用于描述成功请求类型的字符串；

success：function

　　请求成功后调用的回调函数，该函数有两个函数：

　　第一个是根据参数dataType处理后服务器返回的数据，

　　第二个是strStatus，用于描述状态的字符串；

error：function

　　请求失败后调用的回调函数，该函数有三个参数：

　　第一个是XMLHttpRequest对象，

　　第二个是出错信息strError，

　　第三个是捕捉到的错误对象strObject；

timeout：number

　　请求超时的时间（毫秒），该设置将覆盖$.ajaxSetup()方法中的同样设置；

global：boolean，

　　是否响应全局事件，默认是true，表示响应，如果设置成false，表示不响应，那么，全局事件$.ajaxStart等将不响应；

async：boolean，

　　是否为异步请求，默认是true，表示是异步，如果设置成false，表示是同步请求；

cache：boolean，

　　是否进行页面缓存，true表示进行缓存，false表示不进行页面缓存；

十、$.ajaxSetup()设置全局ajax

在使用$.ajax()方法时，有时需要调用多个$.ajax()方法，如果每个方法都设置其中的请求细节，将是一件十分麻烦的事。为了简化这种工作，jquery可以使用$.ajaxSetup()方法设置全局性的ajax默认选项，一次设置，全局有效，这样大大简化了$.ajax()方法中细节的编写。

其调用格式为：

$.ajaxSetup（[options]）

可选参数[options]是一个对象，通过该对象可以设置$.ajax()方法中的参数；

十一、Ajax中的全局事件

在jquery中，除了全局性的函数外，还有6个全局性的Ajax事件。由于在使用$.ajax()方法时，其中的选项参数global的值默认情况下为true，这也就意味着，所有在执行的ajax的数据请求，都绑定了全局事件。

jquery中的6个全局性ajax事件：

ajaxComplete(callback)，ajax请求完成进执行函数；

ajaxError(callback)，ajax请求发生错误时执行函数，其中捕捉到的错误可以作为最后一个参数进行传递；

ajaxSend(callback)，ajax请求发送前执行函数；

ajaxStart(callback)，ajax请求开始前执行函数；

ajaxStop(callback)，ajax请求结束前执行函数；

ajaxSuccess(callback)，ajax请求成功时执行函数；

在jquey中，使用ajax获取异步数据时，ajaxStart与ajaxStop这两个全局事件的使用频率非常高。前者是当请求开始执行时触发，往往用于编写一些准备性的工作；后者是当请求结束时触发，在这一事件中，常常与前者配合，说明请求的最后进展状态。

在事件绑定中，ajax中的全局事件可以绑定在页面的任何一个元素中。

posted @ 2015-03-25 10:19 pjlee 阅读(180) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

pengjielee

jquery ajax

一、传统的javascript方法实现Ajax功能：

二、jquery load()

三、jquery getJSON()

四、jquery getScript()

五、jquery get()

六、$.get()请求服务器数据

七、$.post()请求服务器数据

八、serialize()序列化表单

九、$.ajax()方法

十、$.ajaxSetup()设置全局ajax

十一、Ajax中的全局事件

公告