【 JSON 浅谈 — 6.0 】 Ajax 和 JSON

JSON 文件被放置在服务器端,客户端请求该文件用得最多的是 Ajax,能够实现异步请求。

json6-1

1. Ajax 是什么

AJAX,全称 Asynchronous JavaScript and XML,即“异步的 JavaScript 和 XML”,一般写作 Ajax。

Ajax 能够与服务器交换少量数据,从而异步地更新部分网页。异步指的是当 Ajax 执行交换数据的操作时,其他的操作仍然可以执行。

一个最常见的应用是:打开百度或谷歌首页,当输入文字后,搜索栏下方会显示出几个建议的搜索词。这正是 Ajax 的应用。

2. 创建和使用 Ajax

创建 Ajax 对象要考虑浏览器的版本问题,主要分为两大类:IE7+/Chrome/Firefox/… 和 IE6/IE5.。

然后,只要用如下方式创建即可。

假设服务器端有一个文件 test.json,则异步地请求文件,并输出到控制台的代码如下。

其中,xmlhttp.readyState 存有 XMLHttpRequest 的状态,有五个值:

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

xmlhttp.staus 的值为请求结果,200 表示“OK”,404 表示未找到页面。

获取来自服务器的响应,可使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性,前者是以字符串形式,后者是以 XML 形式。

3. d3.json、d3.xml 等函数的实质

在 D3.js 中经常使用的 d3.json、d3.xml 等请求服务器数据的函数,都是 Ajax 的作用结果。例如,通过本章和【JSON – 第 3.0 章】的内容,我们可以想象,d3.json 就是:

通过 Ajax 请求服务器的数据,然后用 JSON.parse() 将返回的字符串转换成 JavaScript 对象的结果。

因此,要时刻记住 d3.json 是异步请求,像这样的代码是不可取的:

参考资料

[1] Ajax 教程,http://www.runoob.com/ajax/ajax-tutorial.html

文档信息