使用Ajax与服务器（JSON）通信实例

 Ajax这个词，不代表任何东西，它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语。服务器通信时Ajax技术的核心内容，其目标就是从客户端向服务器发送信息，并接受后者的回传，以求在此过程中创建出更好地打用户体验来。

Ajax之前所有的服务器通信都是在服务器上完成的，所以那是若想重绘页面的一部分，要么使用iframe（已淘汰），要么刷新整个页面。这两种方式都称不上是良好的用户体验。

Ajax提供了两类服务器通信手段：同步通信和异步通信。

异步通信Ajax比同步通信要常见的多了，大概是98%的使用频次。异步意味着此类Ajax调用并不和其他任务同时触发，这种通信行为发生在后台，具备相当的独立性，与页面和web应用程序相互分离。

使用异步调用，可以避免同步调用的阻塞性，它不需要与页面中的其他HTTP请求挤在一起处理。

XMLHttpRequest对象

XMLHttpRequest对象是所有Ajax调用的核心。我们的目的是使用Ajax技术异步获取JSON中的数据，并以适当的形式将其展现出来：

//创建ajax通信服务器对象function getHTTPObject(){  "use strict"; //注意使用严格模式  var xhr;  //使用主流的XMLHttpRequest通信服务器对象  if(window.XMLHttpRequest){    xhr = new window.XMLHttpRequest();  //如果是老版本ie，则只支持Active对象  } else if(window.ActiveXObject){    xhr = new window.ActiveXObject("Msxml2.XMLHTTP");  }  //将通信服务器对象返回  return xhr;}

跨浏览器的兼容问题：微软Ie起初发明了XMLHttp对象，那就导致了IE5、IE6只支持ActiveXObject对象，所以要考虑对它的兼容问题。

创建Ajax调用

首先，我在本地的data目录下创建好了Salad.json文件，等待Ajax程序去调用它：

//ajax JSON Saladvar ingredient = {  "fruit":[    {      "name" : "apple",      "color" : "green"    },    {      "name" : "tomato",      "color" : "red"    },    {      "name" : "peach",      "color" : "pink"    },    {      "name" : "pitaya",      "color" : "white"    },    {      "name" : "lettuce",      "color" : "green"    }  ]};

然后要做的是向服务器发送请求和接受传回的数据：

在接收到返回的服务器通信对象“xhr”后，我们紧接着要做的是使用readystatechange 事件对通信对象 “xhr”进行 Ajax请求状态和服务器状态，当readystate状态请求完成和status状态服务器正常时在进行之后 的通信工作。

//输出ajax调用所返回的json数据var request = getHTTPObject();request.onreadystatechange = function(){  "use strict";    //当readyState全等于“4”状态，status全等于“200”状态 代表服务器状态服务及客户端请求正常，得以返回  if(request.readyState ===4 || request.status ===200 ){        //为了方便起见，将数据打印到浏览器控制台（F12查看）    console.log(request.responseText);  }    //使用GET方式请求.json数据文件，并且不向服务器发送任何信息  request.open("GET","data/ingredient.json",true);  request.send(null);};