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

借助于 XMLHttpRequest，浏览器可以在整个页面不刷新的情况下与服务端进行交互，这就是所谓的 Ajax（Asynchronous JavaScript and XML）。Ajax 可以为用户提供更为丰富的用户体验。

Ajax 请求由 JavaScript 驱动，通过 JavaScript 代码向 URL 发送一个请求，待服务端有响应时会触发一个回调函数，可以在这里回调函数里面处理服务端返回的信息。由于整个发送请求和响应的过程是异步的，所以在此期间页面中其它 Javascript 代码仍然继续执行，不会中断。

jQuery 对 Ajax 当然也提供了很好的支持，而且还抽象了各种浏览器对于 Ajax 支持方面另人痛苦的差异。它不但提供了全功能的 $.ajax() 方法，还有诸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更为简便的方法。

尽管被命名为 Ajax，但是很多 Ajax 应用并没有使用 XML，特别是 jQuery 方面的 Ajax 应用，大多数都没有使用 XML；反而用得比较多的情况是：纯文本、HTML 以及 JSON（JavaScript Object Notation）。

一般情况下，由于同源策略（同协议，同域名，同端口）的限制，Ajax 并不能跨域执行请求，除非使用诸如 JSONP（JSON with Padding） 之类的方案，才能实现一些受限的跨域功能。

关于 Ajax 的一些重要概念

GET vs POST，这是两种最常用的向服务端发送请求的方法，正确理解这两种方法的区别对于 Ajax 开发非常重要。

GET 方法通常用于执行一些非破坏性的操作（就是说，只从服务端获取信息，不修改服务端上的信息）。例如，搜索查询服务一般会使用 GET 请求。另外，GET 请求还可能会被浏览器缓存，这可能会导致一些不可预知的问题。一般情况下 GET 请求只能通过查询字符串的方式向服务端发送数据。

POST 方法通常用于在服务端上执行一些破坏性的操作（就是说，会修改服务端上的数据）。例如，当你发表一篇博客的时候，用的应该就是 POST 请求。和 GET 请求不一样，POST 请求不存在缓存问题。POST 请求中，查询字符串作为 URL 的一部分也能向服务端提交数据，但不推荐这种方法，所有数据应该跟 URL 分开单独发送。

数据类型，jQuery 通常要求指明服务端返回的数据类型，某些情况写数据类型可能已经包含在方法名称中了，如 $.getJSON()，除此之外，它都会被作为一个可配置的对象的一部分，该对象最终会作为 $.ajax() 方法的参数。数据类型通常有以下几种：

• text ：纯文本，用于传输简单的字符串。
• html ：用于传输一段 HTML。
• script ：向页面中添加脚本。
• json ：传输已格式化的 JSON 对象，它可以包含字符串、数组或对象。
• jsonp ：用于传输从其他域下返回的 JSON 数据。
• xml ：用于传输自定义的 XML 格式数据。

异步执行，Ajax 中的 A 指的是异步（Asynchronous）。说到这里可能很多 jQuery 初学者一下子很难理解什么叫异步，因为默认情况下 Ajax 请求就是异步的，服务端返回的信息并非马上就能获取到。所有服务端返回的信息只能在一个回调函数中处理。例如以下这段代码，是错误的：

正确的做法应该是在回调函数中处理服务端返回的数据，回调函数在 Ajax 请求成功完成时才被执行，这个时候才能获取到来自服务端的数据：

同源策略及 JSONP，前面已经说过，一般情况下 Ajax 的请求会被限制在相同协议（http 或 https）、相同端口、相同域名下才能正确执行，但是 HTML 的