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

时间:2021-1-8 作者:admin

借助于 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 请求就是异步的,服务端返回的信息并非马上就能获取到。所有服务端返回的信息只能在一个回调函数中处理。例如以下这段代码,是错误的:

var response;
$.get('foo.php', function(r) { response = r; });
console.log(response); // undefined!

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

$.get('foo.php', function(response) { console.log(response); });

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。