发布在：Ajax

关键概念

正确使用与 Ajax 相关的 jQuery 方法首先需要了解一些关键概念。

链接 GET 与 POST

向服务器发送请求的两种最常见的“方法”是 GET 和 POST。了解每种方法的正确应用非常重要。

GET 方法应用于非破坏性操作，即仅从服务器“获取”数据而不更改服务器上的数据。例如，对搜索服务进行查询可能是 GET 请求。GET 请求可能会被浏览器缓存，如果你没有预料到，这会导致不可预测的行为。GET 请求通常在其查询字符串中发送其所有数据。

POST 方法应用于破坏性操作，即更改服务器上的数据。例如，用户保存博客文章应该是 POST 请求。POST 请求通常不会被浏览器缓存；查询字符串可以是 URL 的一部分，但数据往往会作为 post 数据单独发送。

链接 数据类型

jQuery 通常需要一些指令来指示你期望从 Ajax 请求中获取的数据类型；在某些情况下，数据类型由方法名称指定，而在其他情况下，它作为配置对象的一部分提供。有几个选项

链接 文本

用于传输简单的字符串。

链接 html

用于传输要放置在页面上的 HTML 块。

链接 脚本

用于向页面添加新脚本。

链接 json

用于传输 JSON 格式的数据，其中可以包括字符串、数组和对象。

注意：从 jQuery 1.4 开始，如果服务器发送的 JSON 数据格式不正确，请求可能会在没有提示的情况下失败。有关正确格式化 JSON 的详细信息，请参阅 http://json.org，但一般来说，使用服务器上的内置语言方法生成 JSON 以避免语法问题。

链接 jsonp

用于从其他域传输 JSON 数据。

链接 xml

用于以自定义 XML 架构传输数据。

在大多数情况下，请考虑使用 JSON 格式，因为它提供了最大的灵活性。它对于同时发送 HTML 和数据特别有用。

链接 A 代表异步

Ajax 的异步性让许多新的 jQuery 用户措手不及。由于 Ajax 调用默认情况下是异步的，因此响应不会立即可用。响应只能使用回调来处理。因此，例如，以下代码将不起作用

1
2
3
4
5
6
7
 
var response;
 
$.get( "foo.php", function( r ) {
    response = r;
});
 
console.log( response ); // undefined

相反，我们需要将回调函数传递给我们的请求；此回调将在请求成功时运行，此时我们可以访问它返回的数据（如果有）。

1
2
3
 
$.get( "foo.php", function( response ) {
    console.log( response ); // server response
});

链接 同源策略和 JSONP

通常，Ajax 请求仅限于与发出请求的页面使用相同的协议（http 或 https）、相同的端口和相同的域。此限制不适用于通过 jQuery 的 Ajax 方法加载的脚本。

注意：低于 10 的 Internet Explorer 版本不支持跨域 AJAX 请求。

另一个例外是针对其他域上的 JSONP 服务的请求。在 JSONP 的情况下，服务提供商已同意使用可通过 <script> 标记加载到页面中的脚本来响应您的请求，从而避免了同源限制；该脚本将包含您请求的数据，并包装在您提供的回调函数中。

链接 Ajax 和 Firebug

Firebug（或 Chrome 或 Safari 中的 Webkit Inspector）是用于处理 Ajax 请求的宝贵工具。您可以在 Firebug 的控制台选项卡（以及 Webkit Inspector 的资源 > XHR 面板）中查看 Ajax 请求，并且可以单击请求以展开它并查看详细信息，例如请求标头、响应标头、响应内容等。如果 Ajax 请求没有按预期进行，这是查找错误原因的第一步。