title: 《锋利的jQuery》七、jQuery和Ajax的应用
date: 2017-07-23 22:48:00
tags: 锋利的jQuery

在jQuery中对Ajax进行了封装，在jQuery中$.ajax()属于最底层方法，第二层是$.post()、load()、$.get()方法，第三层是$.getScript()和$.getJson()方法。通常第二层的方法使用频率最高。

load()方法

load()方法能载入远程html页面到dom中。

格式为：load( url , [data] , [callback] )

url：请求html页面的地址。

data: 可选参数，发送至服务器的数据。

callback：可选参数，请求完成后的回调，不论请求成功或者失败。

载入html文档

假设有一个test.html的页面，那么只需要这样写就能引入这个test到当前页面。

当前页面的html部分

<div id=""resText></div>

当前页面发送请求

$('#resText').load('text.html');

筛选载入html文档

上面是将test.html的所有内容都加载进来，如果只需要加载一部分那么只需要改变url参数即可，格式为：url selector。

只将test.html页面中类名为.para的元素加载进来。

$('#resText').load('text.html .para')

回调函数

load()的回调有三个参数，分别是：

responseText：请求返回的内容。

textStatus：请求状态：success、error、notmodified、timeout 四种。

XMLHttpRequest： XMLHttpRequest对象。

$.get()和$.post()方法

使用get的方式进行异步请求，格式为：$.get( url , [data] , [callback] , [type] )。

url：请求的文件地址。

data：可选参数，发送至服务器的数据，会附加到url地址中。

callback：可选参数，载入成功时回调函数，只有当Response返回的状态是success才能调用。

type：可选参数，服务器返回的格式，包括 xml、html、script、json、text、_default。

回调函数

回调函数只有当数据成功返回(success)才能被调用，这点和load()方法不同，回调函数有两个参数，分别是data、textStatus。

data是成功后返回的数据，textStatus是请求状态。

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

$.getScript()用于加载一个新的js文件，和写一个<script>标签的效果是一样的，但因为在页面初次加载时就取得所有js文件是没有必要的，所以就需要这个方法。

$.getScript()的第一个参数是js文件的地址，第二个参数是回调函数，回调只会在js文件成功加载后才会运行。

$.getJson()用于获取json文件，使用方法和$.getScript()相同。只是在回调函数中可用一个参数来获取json的内容。

$.ajax()方法

$.ajax()是jQuery最底层的ajax实现，上面的所有方法都可以用这个方法代替。

$.ajax()的参数是一个对象，对象中的每个参数都是可选的，具体的参数如下：

需要注意的是，如果将传递给服务器的数据使用字符串拼接的方式拼接到url上，必须使用encodeURIComponent()方法转码，如果是写到data属性则不需要。

序列化元素

serialize()方法

在提交表单的时候，需要给服务器传表单中的数据，如果表单的内容比较多，一个个获取比较麻烦，jQuery提供了一个简化的方法serialize(),它能够将dom元素的内容序列化为字符串，用于ajax请求。例如表单的id为form，那么可以将ajax的data属性直接写为$('#form').serialize()。

serializeArray()方法

和serialize()方法类似，但是serializeArray()方法不是返回字符串，而是将DOM元素序列化后，返回json格式的数据。

html代码

    <input type="checkbox" name="user" value="1" checked>
    <input type="checkbox" name="user" value="2" checked>
    <input type="checkbox" name="user" value="3">
    <input type="checkbox" name="user" value="4">

js代码

    var fields = $(":checkbox").serializeArray();
    console.log(fields);   // 打印一个数组[ {name:'user',value:'1'} , {name:'user',value:'2'} ]

$.param()方法

这是serialize()方法的核心，用以将一个数组或对象按照key/value进行序列化。比如将一个普通对象序列化

var obj = { a:1,b:2,c:3 };
var k = $.param(obj);
console.log(k);      // 输出a=1&b=2&c=3    

Ajax全局事件

通过jQuery提供的一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。

例如当请求开始时，会触发ajaxStart()方法的回调函数，当请求结束时，会触发ajaxStop()方法的回调函数。这些都是全局方法，因此无论创建它们于代码何处，只要有Ajax请求发生时，就会触发它们。

html代码

<div id="loading">加载中...</div>

js代码

$('#loading').ajaxStart(function(){
    $(this).show();
})

$('#loading').ajaxStop(function(){
    $(this).hide();
})

还有另外几个方法：

如果不想让Ajax触发这些全局方法，可以将global设置为false，在jQuery1.5版本之后可以设置：

$.ajaxPrefilter(function(options){
    options.global = true;
})