详解JavaScript中jQuery和Ajax以及JSONP的联合使用

2020-05-22 17:08:44易采站长站整理

    error :当 Ajax 执行错误时将会触发的回调函数,该函数接受原始的请求信息及状态码。
    jsonp :执行 JSONP 请求时需要制定的回调函数名称,默认值是“callback”。
    success :Ajax 成功执行时将会触发的回调函数。在函数中可获取服务端返回的信息(如果 dataType 被设置成 JSON,返回的数据应该是一个 JavaScript 对象),当然也可获取服务端返回的原始数据信息及状态码。
    timeout :给 Ajax 请求设置一个超时是时间,单位是毫秒。
    type :指定请求的方式,GET 或者 POST,默认值是 GET。其它如 PUT 和 DELETE 方式也可以用,但并不是所有浏览器都支持。
    url :要请求的 URL。

其中 url 选项是所有选项中唯一的一个必选项,其它选项都是可选的。
一些简便方法

如果你不需要那么多可配置的选项,也不关心 Ajax 执行错误时候的相关处理,jQuery 同样提供了一些非常有用的简便方法,以更简洁的方式完成 Ajax 请求。其实这些简便写法只是封装了 $.ajax,并把某些选项预先设定好。

jQuery 提供的简便方法如下:

    $.get :对给定的 URL 执行 GET 请求。
    $.post :对给定的 URL 执行 POST 请求。
    $.getScript :向页面中添加脚本。
    $.getJSON :执行一个 GET 请求,服务端返回的信息应为 JSON。

以上每种简便方法中都可传递如下参数:

    url :所请求的 URL,必须提供。
    data :向服务端发送的数据,可选。可以是一个对象,亦或查询字符串,如 foo=bar&baz=bim。

        备注:此选项不适用于 $.getScript。

    一个回调函数 :此回调函数在请求成功执行后被触发。可选。该回调函数接受服务端返回的数据,也包括请求的状态码及原始对象。
    数据类型 :服务端返回数据的类型。可选。

        备注:此选项只适用于那些在其名称中没指定数据类型的方法。

下面是三个简便方法的示例:


// 获取纯文本或者 html
$.get('/users.php', { userId : 1234 }, function(resp) {
console.log(resp);
});

// 向页面中添加脚本,然后执行脚本中定义的函数。
$.getScript('/static/js/myScript.js', function() {
functionFromMyScript();
});

// 从服务端获取 JSON 格式的数据。
$.getJSON('/details.php', function(resp) {
$.each(resp, function(k, v) {
console.log(k + ' : ' + v);
});
});