Ajax简介及基础使用

Ajax简介以及作用

1、简介

AJAX 是 Asynchronous JavaScript And XML 的简称。直译为，异步的JS和XML。
AJAX的实际意义是，不发生页面跳转、异步载入内容并改写页面内容的技术。
AJAX也可以简单的理解为通过JS向服务器发送请求。
AJAX这门技术很早就被发明，但是直到2005年被谷歌的大量使用，才在市

场中流行起来，可以说Google为AJAX的推广起到到推波助澜的作用。

2、作用

Ajax可以实现异步处理，不同于之前的同步处理。同步处理会使用户在使用网页向服务器发送请求时只能等待服务器的处理回应，在这期间不能有任何操作，影响了用户体验。异步处理是指在用户向服务器发送请求时不影响正常访问网页和做其他操作。并且Ajax会根据服务器的回应只改变网页部分位置，而不需要刷新整个页面。

3、XMLHttpRequest的简介

实现Ajax需要XMLHttpReques，XMLHttpRequest对象是AJAX中非常重要的对象，所有的AJAX操作都是基于该对象的。
XMLHttpRequest对象用来封装请求报文，我们向服务器发送的请求信息全部都需要封装到该对象中。
XMLHttpRequest在不同版本浏览器获取方式不同。
但总的来说一共有三种方式：
目前主流浏览器都支持
var xhr = new XMLHttpRequest()
IE6支持的方式
var xhr = new ActiveXObject(“Msxml2.XMLHTTP”)
IE5.5以下支持的方式
var xhr = new ActiveXObject(“Microsoft.XMLHTTP”)

4、XMLHttpRequest对象的方法

1）open(method,url,async)
open()用于设置请求的基本信息，接收三个参数。
（1）method
请求的方法：get或post
接收一个字符串
（2）url
请求的地址，接收一个字符串
（3）Assync
发送的请求是否为异步请求，接收一个布尔值。
true 是异步请求
false 不是异步请求（同步请求）

2）send(string)
send()用于将请求发送给服务器，可以接收一个参数
（1）string参数
该参数只在发送post请求时需要。
string参数用于设置请求体

3）setRequestHeader(header,value)
用于设置请求头
（1）header参数
字符串类型，要设置的请求头的名字
（2）value参数
字符串类型，要设置的请求头的值

5、XMLHttpRequest对象的属性

1）readyState
描述XMLHttpRequest的状态
一共有五种状态分别对应了五个数字：
0 ：请求尚未初始化，open()尚未被调用
1 ：服务器连接已建立，send()尚未被调用
2 ：请求已接收，服务器尚未响应
3 ：请求已处理，正在接收服务器发送的响应
4 ：请求已处理完毕，且响应已就绪。

2）status
请求的响应码
200 响应成功
404 页面为找到
500 服务器内部错误

3）onreadystatechange
该属性需要指向一个函数
该函数会在readyState属性发生改变时被调用

4）responseText
获得字符串形式的响应数据。

5）responseXML（用的比较少）
获得 XML 形式的响应数据。

6、Ajax实例代码

使用Ajax发送GET请求

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("get","AjaxServlet?&t="+Math.random(),true);
//发送请求
xhr.send();
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
	if(xhr.readyState == 4){
		//且状态码为200时
		if(xhr.status == 200){
			//接收响应信息（文本形式）
			var text = xhr.responseText;
			//弹出消息
	      alert(text);
		}
	};
};

使用Ajax发送Post请求

//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("post","2.jsp",true);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send("hello=123456");
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
if(xhr.readyState == 4){
	//且状态码为200时
	if(xhr.status == 200){
		//接收响应信息（文本形式）
		var text = xhr.responseText;
		//弹出消息
		alert(text);
	}
};