jQuery AJAX 简单使用教程

在上一篇文章 AJAX简单使用教程 中，我写了原生 AJAX 的使用，但是编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

有关 AJAX 的介绍可以参考我的上一篇文章 AJAX简单使用教程

jQuery 提供了多种使用 AJAX 的方法，下面就来简单写一下这些方法的使用。

get() 方法

代码：

//  通过get方式请求
$.get("server.php", 'userName=12346',
    function (response , textStatus, jqXHR) {
        console.log(data);  //  在控制台输出请求到的数据
        console.log(typeof(data));  //  在控制台输出数据类型
    },
    "json"  //  设置返回的数据类型
);

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

下面是参数说明：

特别说明：这里的 dataType 参数可以根据设置的参数自动转换返回的数据类型，例如我设置 dateType 参数为 json，jQuery 就会把请求返回的数据自动转换为 JSON 对象，如果我设置为 script，就会自动执行请求返回的JavaScript代码。

post() 方法

代码：

//  使用POST方式请求
$.post("server.php", 'userName=123456',
    function (data, textStatus, jqXHR) {
        console.log(data);  //  在控制台输出数据
    }
);

最简单的发送 post 请求，连请求头都可以不用设置，参数和返回内容和 get 方法是一样的。

getJSON() 方法

代码：

$.getJSON("server.php", 'email=123@gmail.com',
    function (data, textStatus, jqXHR) {
        console.log(data);  //  在控制台输出请求到的JSON数据
        console.log(textStatus);  //  在控制台输出状态
        console.log(typeof(data));  //  在控制台输出数据类型
    }
);

getJSON 方法可以通过 Ajax 异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，也就是说返回的JSON数据可以直接使用，无需手动转换，参数基本和上面的 get 和 post 差不多，但可以直接返回 JSON 数据，所以不需要设置
dataType 参数。

getScript() 方法

代码：

//  请求一个JS文件，并且自动执行请求到的JS代码
$.getScript("getJSON.js", function (script, textStatus, jqXHR) {
    console.log(script);  //  在控制台输出一下请求到的JS代码
});

getScript 可以通过 get 方式从服务器请求 JS 代码，并且可以自动执行请求到的 JS 代码，参数和上面的 getJSON 是一样的，无需设置 dataType。

ajax() 方法

代码：

$.ajax({
    type: "get",  //  请求方式 post或get
    url: "server1.php",  //  要请求的url
    data: "data=hello",  //  要发送的数据
    async: true,  //  是否是异步请求，默认为true
    dataType: "text",  //  预计服务器返回的数据类型
    timeout: 3000,  //  请求超时时间 毫秒
    cache: false,  //  是否从浏览器缓存中加载请求信息，默认为true
    global: false,  //  是否触发全局ajax事件
    success: function (data , status) {  //  请求成功时调用的函数
        console.log(data);  //  在控制台输出数据
        console.log(status);  //  在控制台输出状态
    },
    error: function (xhr, error, abnormal) {  //  请求失败时调用的函数
        console.log(error);  //  输出错误信息
    }
});

发送 ajax 请求，这个方法可自定义的参数较多，此方法接收一个 JSON 对象，下面是 JSON 参数说明：

上面就是ajax方法的参数，如果没有特殊需要的话不必每个参数都写

ajaxSetup() 方法

代码：

$.ajaxSetup({
    url: "server.php",  //  设置url
    type: "get",  //  请求类型 get或post
    data: "Hello PHP",  //  要发送的数据
    async: true,  //  是否是异步请求
    dataType: "json",  //  预计服务器返回的数据类型
    timeout: 3000,  //  请求超时时间 毫秒
    cache: false,  //  是否从浏览器缓存中加载请求信息，默认为true
    success: function (data , status) {  //  请求成功时的回掉函数
        console.log(data);  //  在控制台输出数据
        console.log(status);
    },
    error: function (xhr, error, abnormal) {
        console.log(error);  //  在控制台输出错误信息
    }
});

$.ajax();  //  设置完成后调用ajax方法就不需要重新设置了

ajaxSetup 方法可以设置 Ajax 请求的一些全局性参数，设置完成后，后面的 Ajax 请求将不需要再添加这些参数，使用 ajax 设置的参数会覆盖 ajaxSetup 设置的参数，这个方法也是需要传入一个 JSON 对象，具体的 JSON 参数可参考上面的 ajax 参数。

ajaxStart() 和 ajaxStop() 方法

代码：

$(document).ajaxStart(function() {  //  ajax请求开始前
    console.log('正在发送请求');
});

$(document).ajaxStop(function() {  //  ajax请求完成后
    console.log('请求完成');
});

//  发送一个get请求
$.get("server.php", 'data=123',
    function (data, textStatus, jqXHR) {
        console.log(data);
    }
);

ajaxStart 方法用来设置 ajax 开始请求前要执行的函数，ajaxStop 方法用来设置 ajax 请求完成后要执行的函数，ajaxStart 方法和 ajaxStop 方法需要绑定在 document 上，只要执行ajax请求就会触发。这两个方法常被用来设置按钮显示的名称或加载动画。

上面就是 jQuery 常用的 ajax 方法，新版 jQuery 已删除的方法这里就没有写了。