Ajax学习总结

Ajax原理

什么是Ajax

1. Asynchronous JavaScript and Xml 异步的JavaScript和Xml;
2. Ajax是一种用来改善用户体验的技术，其实质是， 使用XMLHttpRequest对象异步地向服务器发请求；
3. 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部内容；

如何获得Ajax对象

function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject('Microsoft.XMLHttp');//针对IE
	}
	return xhr;
}

Ajax对象属性和方法

异步对象的属性和方法

属性/方法	说明
abort()	取消请求
getAllResponseHeaders()	获取响应的所有Http头
getResponseHeader()	获取指定的Http头
open(method,url)	创建请求，method请求类型 get post
send()	发送请求
setRequestHeader()	指定请求的Http头
onreadystatechange	发生任何状态变化时的事件控制对象
readyState	请求的状态 0 尚未初始化 1 正在发送请求 2 请求完成 3 请求成功，正在接受数据 4 数据接受成功
responseText	服务器返回的文本
responseXML	服务器返回的xml，可以当做DOM处理
status	服务器返回的http请求响应值常用的有：200 表示请求成功 202 请求被接受但处理未完成 400 错误的请求 404 资源未找到 500 内部服务器错误，如asp代码错误等

onreadystatechange

绑定一个事件处理函数，该函数用来处理readystatechange事件
当Ajax对象的readyState的值发生了改变，就会产生readystatechange事件

readyState

一共有5个值，分别是0,1,2,3,4，分别表示Ajax对象与服务器通信的状态

使用Ajax发生异步请求

发送异步请求的步骤

1. 获取Ajax对象：获取XMLHTTPRequest对象实例

function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject('Microsoft.XMLHttp');//针对IE
	}
	return xhr;
}

2. 设置回调函数：为Ajax对象的readystatechange事件设定响应函数

xhr.onreadystatechange=function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		var txt = xhr.responseText;
	}
}

3. 创建请求：调用XMLHTTPRequest对象的open方法

/*GET请求
 *true:表示发送异步请求，用户仍可以对当前页面做其它操作
 *fasle:表示发送同步请求，用户不能对当前页面做其它操作
 */
xhr.open('get', 'xx.do', true);

/*POST请求
 *setRequestHeader作用：因为HTTP协议要求发送post请求时，
 *必须有content-type消息头，但是默认情况下xhr(即Ajax对象)
 *不会添加该消息头，需要调用setRequestHeader方法
 */
xhr.open('post', 'xx.do', true);
xhr.setRequestHeader('content-type', 'application/x-www-form-rulencodeed');

4. 发送请求：调用Ajax对象的send方法

//GET请求
xhr.send(null);
//POST请求
xhr.send(name=value&name=value...);
//当需要提交数据，则在open方法的“URL”后面追加
xhr.open("get", "xx.do?name=value&name=value", true);

5. 服务器端代码

public void service() throws ServletException, IOException{
	request.setCharacterEncoding("utf-8");
	response.setContentType("text/html;charset=utf-8");
	PrintWriter out = response.getWriter();
	out.println("用户名已经存在");
}