Ajax的应用：介绍和使用

一、Ajax介绍

ajax技术使用脚本操纵HTTP和Web服务器进行数据交换，在页面不刷新的情况下，实现页面的局部刷新，是一种创建交互式网页应用的网页开发技术。

1. Ajax = 异步
2. Ajax 是一种用于创建快速动态网页的技术。
3. Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
4. 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
5. 传统的网页如果需要更新内容，必须重载整个网页页面。

总结：AJAX = 异步JavaScript 和 XML。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新

二、Ajax使用

2.1 创建XMLHttpRequest对象

浏览器在XMLHttpRequest类上定义了它的HTTP方法。

//创建XMLHttpRequest对象
var xhrhttp = new XMLHttpRequest();

//兼容IE5、6的写法
var xhrhttp;
if(window.XMLHttpRequest){
	xhrhttp = new XMLHttpRequest();
}else{
	xhrhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2.2 Ajax向服务器发送请求

创建XMLHttpRequest对象后，我们就可以使用XMLHttpRequest对象的open()方法发起请求，该方法必须要指定请求方法(GET、POST等)和URL。
xhrhttp.open(‘method’,‘URL’,asyncFlag,userName,paddword);

1. method：用于指定请求方式，如GET、POST，不区分大小写。
2. URL：表示请求的地址
3. axyncFlag：可选参数，用于指定请求方式，同步请求为false，默认为异步请求true。
4. userNmae和password：可选参数，表示HTTP认证的用户名和密码。

2.3 设置http请求头

POST请求一般是要用‘Content-Type’请求头指定请求主体的MIME类型，GET请求不需要设置请求头

xhrhttp.setRequestHeader('Content-Type','application/x-www.form-urlcoded') 默认编码格式(数据被编码名称/值对);
xhrhttp.setRequestHeader('Content-Type','multipart/form-data') 由于文件格式不支持上传，进行文件传输时要改成这样的格式;
xhrhttp.setRequestHeader('Content-Type','application/json') 主体是序列化后的JSON字符串;

2.4 发送请求

使用XMLHttpRequest发起请求的最后一步是指定可选的请求主体并将它发送给服务器

xhrhttp.send(content);

GET请求没有请求体，所以应该传递null或省略这个参数。而POST请求通常具有请求体，同时它应该与使用setRequestHeader()指定的’Content-Type’一致

2.5 监听请求状态的改变

为了在相应准备就绪时得到通知，必须监听XMLHttpRequest对象上的onreadystatechange事件。

xhr.onreadystatechange = function(){
};

xhr.readyState属性。readySate属性的值是一个整数，用来指示HTTP请求的状态。

常量	值	含义
UNSENT	0	初始化，尚未调用open()方法
OPENED	1	启动，已调用open()方法，但尚未调用send()方法
HEADERS_RECEIVED	2	发送，已调用send()方法，接收到相应头部信息
LOADING	3	接收，已经接收到部分相应主体
DONE	4	完成，已经接收到全部相应数据，而且已经可以在客户端使用

请求的成功还需要根据相应的状态码来判断请求是否成功。我们可以通过XMLHttpRequest对象status和statusText属性获取HTTP状态码,状态消息

//完成的判断信息
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.satus >= 200 && xhr.status<300||xhr.status == 304){
			alert("请求成功返回服务器相应信息"+xhr.responseText)
		}else{
			alert("请求失败,失败状态码为"+xhr.status);
		}
	}
}

2.6 其他方法

2.6.1 获取请求头

1. xhr.getResponeHeader(“Content-Type”);
2. xhr.getAllResponeHeaders();

2.6.2 处理服务器返回的数据

服务器返回的数据都是JSON格式的字符串，为了使用方便，我们需要先把字符串转换成javaScript对象（Object/Array）。

JSON.parse(xhr.responseText);