# 十、AJAX

## 这个 jQuery `ajax()`函数是最底层的抽象

jQuery **`ajax()`** 函数是 [XMLHttpRequests](http://en.wikipedia.org/wiki/XMLHttpRequest) (又名 [AJAX](http://en.wikipedia.org/wiki/Ajax_%28programming%29) )可用的最低抽象级别。所有其他 jQuery AJAX 功能，如 **`load()`** ，都利用了 **`ajax()`** 功能。使用 **`ajax()`** 功能为 XMLHttpRequests 提供了最大的功能。jQuery 还提供了其他更高级别的抽象来完成非常特定类型的 XMLHttpRequests。这些功能本质上是 **`ajax()`** 方法的捷径。

这些快捷方式是:

*   **[【负荷()](http://docs.jquery.com/Ajax/load#urldatacallback)**
*   **[get()](http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype)**
*   **[【get JSON()](http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback)**
*   **[【get script()](http://api.jquery.com/jQuery.getScript/)**
*   **[【岗位()](http://docs.jquery.com/Ajax/jQuery.post#urldatacallbacktype)**

需要指出的是，虽然捷径有时很好，但它们都在幕后使用`ajax` `()`。而且，当你想要 jQuery 在 AJAX 方面提供的所有特性和定制时，你应该使用`ajax()`方法。

注释:

默认情况下， **`ajax()`** 和 **`load()`** AJAX 函数都使用 GET HTTP 协议。

## jQuery 支持跨域 JSONP

带有填充的 JSON([【JSONP】](http://en.wikipedia.org/wiki/JSONP))是一种技术，它允许返回 JSON 的 HTTP 请求的发送者提供一个函数的名称，该函数使用 JSON 对象作为函数的参数来调用。这种技术不使用 XHR。它使用脚本元素，因此数据可以从任何站点拉进任何站点。目的是规避 XMLHttpRequest 的同源策略限制。

使用`getJSON` **`()`** jQuery 函数，当 JSONP 回调函数被添加到 URL 时，可以从另一个域加载 JSON 数据。例如，下面是使用 Flickr 应用编程接口的网址请求。

```js
http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback=? 

```

`?`值用作快捷方式，告诉 jQuery 调用作为`getJSON()`函数参数传递的函数。如果不想使用这个快捷方式，可以用另一个函数的名称替换`?`。

下面，我正在使用 Flickr JSONP 应用编程接口进入一个网页，最近的照片被标记为“resig”请注意，我使用的是`?`快捷方式，因此 jQuery 将简单地调用我提供的`getJSON()` 函数的回调函数。传递给回调函数的参数是请求的 JSON 数据。

样本:sample100.html

```js
<!DOCTYPE html>
<html lang="en">
<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){       
      $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=resig&tagmode=all&format=json&jsoncallback=?", 
          // Using ? just means
call the callback function provided. 
          function (data) { //
Data is the JSON object from Flickr.     
              $.each(data.items, function (i, item) { $('<img
/>').attr("src",
item.media.m).appendTo('body'); if (i == 30) return false; });
          });
  })(jQuery); </script>
</body>
</html>

```

注意事项:

请确保检查您正在使用的服务的应用编程接口，以了解回调的正确用法。举个例子，Flickr 使用的名字是 **`jsoncallback=?`** ，而雅虎！而 Digg 使用的名字 **`callback=?`** 。

## 停止浏览器缓存 XHR 请求

当执行 XHR 请求时，Internet Explorer 将缓存响应。如果响应包含长保质期的静态内容，缓存可能是一件好事。但是，如果请求的内容是动态的，并且可能在第二次请求时发生变化，您将需要确保浏览器没有缓存该请求。一种可能的解决方案是在 URL 的末尾附加一个唯一的查询字符串值。这将确保浏览器为每个请求请求一个唯一的网址。

```js
// Add unique query string
at end of the URL. 
>url:'some?nocache='+(new Date()).getTime()

```

另一个更像是全局解决方案的解决方案是默认设置所有 AJAX 请求包含我们刚刚讨论的无缓存逻辑。为此，使用`ajaxSetup`功能全局关闭缓存。

```js
$.ajaxSetup({
            cache: false //
True by default. False means caching is off.
        });

```

现在，为了用单个 XHR 请求覆盖该全局设置，您只需在使用`ajax()`功能时更改缓存选项。下面是使用`ajax()`函数执行 XHR 请求的编码示例，该函数将覆盖全局设置并缓存请求。

```js
$.ajaxSetup ({   cache: false //
True by default. False means caching is off. 
        }); 

jQuery.ajax({ cache: true, url: 'some', type: 'POST' } );

```