jQuery笔记——Ajax

Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）， 它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用 Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验

Ajax中使用的技术主要包括：

1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为；

2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服 器发送请求；

3.服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；

4.其它 的JavaScript技术，解释来自服务器的数据并将其呈现到页面上。

异步和同步

同步，意为执行一段程序才能执行下一段，需要等待前一段程序执行完毕才可以执行下一段，如果前一段程序没有执行完，就必须等待。而异步可以同时执行多条任务，不会因为某一条任务阻塞而停止所有程序

JQuery中使用Ajax的方法

jQuery 采用了三层封装：最底层的封装方法为：$.ajax()，而通过对这层封装形成了第二层，第二层有三种方法：.load()、$.get()和$.post()，最高层是$.getScript()和$.getJSON() 方法

.load()方法

.load()方法可以参数三个参数：url(必须，请求 html 文件的 url 地址，参数类型为 String)、 data(可选，发送的 key/value 数据，参数类型为 Object)、callback(可选，成功或失败的回调函数，参数类型为函数 Function)

如果想让 Ajax 异步载入一段 HTML 内容，我们只需要使用第一个参数，给一个一个 HTML 请求的 url 即可

//HTML
<input type="button" value="异步获取数据" />
<div id="box"></div>

//jQuery
$('input').click(function () {
$('#box').load('test.html');
});

如果是向服务器提交数据，那么我们就可以使用第二个可选参数 data。向服务器提交数据有两种方式：get 和 post，.load默认是get方式

默认方式get(使用了URL给一个servlet传值):

$('#box').load('MyServlet?abc=abc123');

如果传递data值就是post：

$('input').click(function () {
$('#box').load('MyServlet', {
abc : 'abc'
});
});

在 Ajax 数据载入完毕之后，就能执行回调函数 callback，也就是第三个参数。回调函数也可以传递三个可选参数：response（请求返回）、status（请求状态)、XMLHttpRequest 对象

$('input').click(function () {
$('#box').load('MyServlet', {
abc : 'abc'
}, function (response, status, xhr) {
alert('返回的值为：' + response + '，状态为：' + status + '，
状态是：' + xhr.statusText);
});
});

status 得到的值，如果成功返回数据则为：success，否则为：error。那么 xhr 对象的 statusText 属性则返回'OK'（HTTP状态码）字符串。除了'OK'的状态字符串,常用的还有

Not found（HTTP状态码404），Internal Server Error（HTTP状态码500）等

$.get()和$.post

.load()方法是局部方法，因为他需要一个包含元素的 jQuery 对象作为前缀。而$.get()和 $.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取， 而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适

$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数 type，即服务器返回的内容格式：包括 xml、html、script、json、jsonp 和 text（但是这个参数可以不写，会自动对返回的数据进行格式判断），同样它们的第一个参数URL也是必须的，后面三个参数可以不指定

来看get的三种写法：

       // get写法一
        $.get('MyServlet?abc=abc',function(response,status,xhr){
            $('#box').html(response);
        });

        //get写法二
        $.get('MyServlet','abc=abc&bcd=bcs',function(response,status,xhr){
            $('#box').html(response);
        });

        //get写法三
        $.get('MyServlet',{
            abc:'abc',
            bcd:'bcd'
        },function(response,status,xhr){
            $('#box').html(response);
        });

其实这三种写法只有data部分的写法有所不同而已

来看POST的两种写法：

        //post写法一
        $.post('MyServlet','abc=abc&bcd=bcd',function(reesponse,status,xhr){
            $('#box').html(reesponse);
        });

       // post写法二
        $.post('MyServlet',{
            abc:'abc',
            bcd:'bcd'
        },function(response,status,xhr){
            $('#box').html(response);
        });

也只有data部分不同而已

建议不论get还是post都使用对象的方式处理data部分，也就是使用{}包裹，以键值对方式传值

解析XML和JSON文件（使用get和post的方式都一样，这里以post演示）

解析xml文件：

        //解析xml文件
        $.post('test.xml',function(response,status,xhr){
            alert($(response).find('root').find('url').text());
        });

解析JSON文件：

        //解析json文件
        $.post('test.json',function(response,status,xhr){
            alert(response[0].url);
        });

$.getScript()和$.getJSON()方法

在封装的最顶层（第三层）是.getScript和.getJSON,分别用于异步加载JavaScript和JSON数据

        //解析json的特有方法
        $.getJSON('test.json',function(response,status,xhr){
            alert(response[0].url);
        });

        //异步加载JavaScript的方法
       $.getScript('test2.js');

同样还有个jQuery.parseJSON()函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象，函数的返回值为任意类型

所谓"格式完好"，就是要求指定的字符串必须符合严格的JSON格式，例如：属性名称必须加双引号、字符串值也必须用双引号

jQuery.parseJSON( jsonString )    //jsonString是需要解析并转为JS对象的JSON格式字符串，

 

对底层的方法$.ajax()

$.ajax()是所有 ajax 方法中最底层的方法，所有其他方法都是基于$.ajax()方法的封装。 这个方法只有一个参数，传递一个各个功能键值对的对象

常用的键值对参数：

参数	类型	说明
url	String	发送请求的地址
type	String	请求方式：POST 或 GET，默认 GET
data	Object 或 String	发送到服务器的数据，键值对字符串或对象
timeout	Number	设置请求超时的时间（毫秒）
dataType	String	返回的数据类型，比如 html、xml、json 等
success	Function	请求成功后调用的回调函数
error	Function	请求失败时调用的回调函数
complete	Function	Function 请求完成后（不能论成功还是失败）调用的回调函数
global	Boolean	默认为 true，表示是否触发全局 Ajax

HTML部分

<form>
    用户名:<input type="text" name="userName"/>
    密码:<input type="password" name="password"/>
    性别：<input type="radio" value="男" name="sex"/>男
          <input type="radio" value="女" name="sex"/>女
    <input type="button" value="登录"/>
</form>

提交按钮使用了button而非submit

jQuery部分

        $.ajax({
            type:'post',
            url:'MyServlet2',
            data:{
                userName:$('form input[name=userName]').val(),
                password:$('form input[name=password]').val()
            },
            success:function (response,status,xhr) {
                $('#box').html(response);
            }
        });

这里向Servlet发送了对象（参数userName和password），它们的值是根据表单.val()获得的

如果表单选项比较多，一项一项给data设置值很麻烦，可以给表单序列化(就像封装为一个对象)：

        $.ajax({
            type:'post',
            url:'MyServlet2',
            data: $('form').serialize(),                  //表单序列化，方便表单数据提交
            success:function (response,status,xhr) {
                $('#box').html(response);
            }
        });

注意 : 其实还可以使用$.param()进行反序列化 , 将对象形式的键值对转为 URL 地址的字符串键值对，可以更准确的传递表单内容。因为有时程序对于复杂的序列化解析能力有限，所以直接传递 obj 对象要谨慎

Ajax事件

加载请求

在 Ajax 异步发送请求时，遇到网速较慢的情况，就会出现请求时间较长的问题。而超 过一定时间的请求，用户就会变得不再耐烦而关闭页面。而如果在请求期间能给用户一些提 示，比如：正在努力加载中...，那么相同的请求时间会让用户体验更加的好一些

jQuery 提供了两个全局事件，.ajaxStart()和.ajaxStop()。这两个方法是全局事件，只要用户触发 了 Ajax，请求开始时（未完成其他请求）激活.ajaxStart()，请求结束时（所有请求都结束了） 激活.ajaxStop()

HTML部分(增加一个span，其css默认是隐藏) :

<form>
    用户名:<input type="text" name="userName"/>
    密码:<input type="password" name="password"/>
    性别：<input type="radio" value="男" name="sex"/>男
          <input type="radio" value="女" name="sex"/>女
    <input type="button" value="登录"/>
</form>

<span class="loading">正在加载中...</span>

<div id="box"></div>

CSS部分：

.loading{
    color: red;
    font-size: 100px;
    display: none;
}

jQuery部分：

$(document).ajaxStart(function () {
$('.loading').show();
}).ajaxStop(function () {
$('.loading').hide();
});

如果请求时间太长，可以设置超时 :

$.ajax({
timeout : 500
});

如果某个 ajax 不想触发全局事件，可以设置取消 :

$.ajax({
global : false
});

成功或错误处理

高层的封装比如$.get()、$.post()和.load()可以通过连缀处理使用.success/.error()方法即可,而对于$.ajax()方法，不但可以用这种方法，还有自己的属性方法success：function(){}/ error : function () {}

$.ajax()使用属性 :

//$.ajax()使用属性提示
$.ajax({
type : 'POST',
url : 'MyServlet',
data : $('form').serialize(),
success : function (response, status, xhr) {
$('#box').html(response);
},
error : function (xhr, errorText, errorStatus) {
alert(xhr.status + ':' + xhr.statusText);
}
});

$.post()使用连缀方法提示 :

$.post('MyServlet').error(function (xhr, status, info) {
alert(xhr.status + ':' +xhr.statusText);
alert(status + ':' + info);
});

注意：在 jQuery1.5 版本以后，使用.success()、.error()和.complete()连缀的方法，可以用.done()、.fail()和.always()取代，可能在未来版本中，会被废弃取消

还有全局的成功和失败方法：

        $(document).ajaxError(function (event, jqxhr, settings, thrownError) {        //全局错误
            alert('错误'+thrownError);
        });

        $(document).ajaxSuccess(function (event, xhr, settings) {        //全局成功
            alert('成功');
        });

当全局范围的Ajax有成功或失败的情况发生就会自动调用