看着熟悉的四个字母，可要知道它在Web前端中所代表的含义，它是一项新技术，并不是新兴的编程语言。AJAX (阿贾克斯 Asynchronous Javascript And Xml ) 异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术, 可以访问服务器数据的局部刷新的技术。AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
看了上面的描述后，暗自惊鸿地感觉到它内在的强大。没错，当你细心地搜索后发现它被好多互联网科技公司应用，就是那么大牛。现在我所接触到的就是它能够为JavaScript服务进而与服务端数据产生联系，通过请求、发送、返回这么个流程让客户端获取数据。
接下来就谈谈它的一个很实在的作用：允许客户端脚本发送HTTP请求，去请求服务器的数据来创建动态网页，可以在不重新加载整个网页的情况下，对网页的某部分进行更新，也称局部刷新（常见的例子：分页、用户名即时验证、聊天）。
一、JSON对象
在请求服务端的数据前，介绍下服务端常用的数据格式。
JSON对象。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 通过JavaScript中的一些模式来表示结构化数据, JSON 并不是 JavaScript 独有的数据格式，其他很多语言都可以对 JSON 进行解析和序列化。它的语法可以表示三种类型的值：对象表示法、数组表示法、 对象和数组的结合的表示法。
//对象表示法
{
"name" : "Zhang", //需要使用双引号，否则转换会出错
"age" : 100
}
//数组表示法
[“100”, “Zhang”, “true”]
//对象和数组结合的复杂形式
[
{
"name" : "a",
"age" : 1
},
{
"name" : "b",
"age" : 2
},
]
标准的JSON格式写法, 注意单双引号, 将单引号写在外面, 里面用双引号。
'[{"name" : "a","age" : 1},{"name" : "b","age" : 2}]'
JSON 对象提供了一个常用的方法JSON.parse();JSON解析,将JSON字符串转换为JavaScript原生值(对象或数组)。
二、AJAX的核心模块
AJAX的核心是 JavaScript对象XMLHttpRequest。它是一种支持异步请求数据的技术。 (简称 XHR)。
XHR 的出现，提供了向服务器发送请求和解析服务器响应流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。
接下来的两个方法是给服务端准备请求类型和发送请求：
open()方法:
它接受三个参数：要发送的请求类型(get、post)、请求的 URL 和表示是否异步。xhr.open(''get'', ''demo.json'', false); //对于demo.json 的 get 请求，false表示同步。
send()方法:
向服务器发送请求 open()方法并不会真正发送请求，而是准备好需要发送给服务器的内容。我们需要通过send()方法向服务器发送请求,send()方法接受一个参数，作为请求体发送的数据。
三、XHR 对象的属性:
当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。一共有四个属性：
status: 响应的 HTTP 状态 (重要)
statusText: HTTP 状态的说明 (重要)
responseText: 作为响应主体被返回的文本 (重要)
responseXML: 如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的 XML文档,否则是null
- status 属性:
HTTP请求状态码, 一般 HTTP 状态代码为 200 则表示请求服务器成功
HTTP 协议中， 状态码
404: 找不到服务器中的资源
403: 服务器缓存
500: 服务器故障
200: 【正常】返回
400: 语法错误导致服务器不识别
503: 由于服务器过载或维护导致无法完成请求
- readyState 属性
/*
0: 没有发送
1: 已经发送了，但服务器还没有接收到
2: 服务器已经接收到了，但还没有处理完数据
3: 服务器已经处理完数据，并已经返回
4: 客户端已经正常接收到服务器返回的数据
*/
针对上面的方法和属性，下面的完整请求、发送和返回过程：
// 1. 创建对象
var xhr = new XMLHttpRequest();
// 2. 准备
// 参数1： 获取数据的方式， GET、POST
// 参数2： 向服务器请求数据的地址 格式： 例如：http://ip:8080/ajax/ajaxtest
// 参数3： false 代表同步的方式请求数据，true 代表异步
xhr.open("GET", "http://127.0.0.1:8080/ajax/ajaxtest", false);
// 3. 发送请求
xhr.send();
// 4. 获取数据
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 200 说明返回的数据是正常的
var str = xhr.responseText;
var obj = JSON.parse(str);
var oTable = document.createElement("table");
var arr = obj.data;
for(var i = 0; i < arr.length; i++) {
var oTr = document.createElement("tr");
var o = arr[i];
for(var j in o){
var oTd = document.createElement("td");
oTd.innerHTML = o[j];
oTr.appendChild(oTd);
}
oTable.appendChild(oTr);
}
document.body.appendChild(oTable);
}
}
}
四、AJAX函数的封装（传参）
迭代演绎，ajax-4.0.js版本如下：
// 函数封装的是代码，采用面向对象的形式封装
(function () {
var a = 100;
// 暴露出ajax接口
ajax = window.ajax = {}
// 增加1个方法： get方法
/*
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
*/
ajax.get = function(obj) {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
url += "?"
url += obj.data;
xhr.open("GET", url, obj.async);
xhr.send()
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
// 增加1个方法： post方法
/*
* 参数：
* obj 是1个对象，代表参数的集合，里面有很多参数，如下所示：
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
*/
ajax.post = function(obj) {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
xhr.open("POST", url, obj.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(obj.data)
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
})();
上面封装的ajax函数，是有其弊端所在，由于传入的参数都要存储于一个对象中，尤其是url的地址是字符串形式，data为发送的数据，字符串里的“=”和“&”符号容易漏掉。实例如下：
var obj1 = {
url: "http://localhost:8080/ajax/chat",
data: "type=send&sender=zhangsan&msg=快升温了",
success: function (str) {
console.log(str);
}
};
ajax.get(obj1);
在5.0版本里增加了转换函数，利用字符串拼接把需要的属性名链接，同时拼接符号，防止使用4.0版本时的漏写和勿加空格的情况。
五、跨域情况下AJAX不适用
我们都知道好多公司网站都有自己的服务器，两个不同的网站想要彼此请求对方的数据，AJAX的封装函数及方法不再适用。不用担心，就用script标签引入对方服务器的js请求文件地址就可以了。对于图片等道理相同。
AJAX 这一项新技术的原生模型使用是很有用的，好好把握与珍惜！！！
网友评论