JSON-5 Ajax和JSON

微信公众号：

　　

本次JSON共有7节,将持续更新,

实践代码与详细笔记已上传github: https://github.com/TrustTheBoy/LearningRecord/tree/master/Json,与博客同步更新(大家复制一下打开)

 

Ajax完整笔记上次已经分享:http://www.cnblogs.com/smallrui/articles/5728882.html 

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

1. Ajax 是什么

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

Ajax 能够与服务器交换少量数据，从而异步地更新部分网页。

异步,指的是当 Ajax 执行交换数据的操作时，其他的操作仍然可以执行。

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

 

2. 创建和使用 Ajax

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

function CreateXHR(){
if (window.XMLHttpRequest)
{
//对浏览器 IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
else
{
//对浏览器 IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
}

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

var xmlhttp;

xmlhttp = CreateXHR();

服务器端有一个文件 test.json，请求并输出。

xmlhttp.open("GET","test.json",true);
xmlhttp.send();

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
var jsonstr = xmlhttp.responseText;
console.log(jsonstr);
}
}

其中，xmlhttp.readyState 存有 XMLHttpRequest 的状态，有五个值：

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

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

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