AJAX简单使用

简介:

AJAX:asynchronous javascript and xml:异步的js和xml.
服务器给客户端响应一般是整个页面,一个完整的html,但是ajax因为是局部刷新,那么服务器就只需要返回部分数据
.

同步和异步交互

同步:发出请求后,需要等待服务器的响应才能发第二个请求,期间不能进行其他操作.
异步:发出请求后,无序等待服务器响应,就可以发第二个请求,可以使用js接收服务器响应,然后使用js进行局部刷新.

应用场景举例:

输入框没输入一个词,自动向数据库查询,返回一定量推荐词语
多输入框输入时,可以对每个输入框自动进行校验

ajax的优缺点:

优点:
异步交互:增强了用户的体验
性能:因为服务器无需响应整个页面,只需要响应部分数据,减轻了服务器压力
缺点:
ajax不能用在所有的场景.
ajax无端的增多了对服务器的访问次数,增加了服务器压力.

使用步骤:

1.获取ajax对象:获取xmlhttprequest对象实例
大多数浏览器支持:var xmlHttp=new XMLHttpRequest();

function createXMLHttpRequest(){
	try {
		// 大多数浏览器支持
		return new XMLHttpRequest();
	} catch (e) {
		try {
			// IE6.0支持
			return new ActiveXObject("Msxml2:XMLHTTP");
		} catch (e) {
			try {
				// IE5.5以之前版本支持
				return new ActiveXObject("Microsoft:XMLHTTP");
			} catch (e) {
				alert("对不起,您的浏览器不支持!");
				throw e;
			}
		}
	}
}

2.创建请求:调用xmlhttprequest对象的open方法
xmlHttp.open(提交方式,URL,是否异步);
提交方式:GET/POST
当post请求的时候一定要设置请求头

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

URL:请求资源路径
是否同步:true异步,false同步
3.发送请求:调用ajax对象的send方法

xmlHttp.send(null);
xmlHttp.send("username=张三&password=123");

4.设置回调函数:为ajax对象的readystatechage设置相应函数

xmlHttp.onreadystatechange=function(){
	if(xmlHttp.readyState == 4 && xmlHttpstatus == 200){
		var response=xmlHttp.responseText; // 以纯文本形式返回数据
		var response=xmlHttp.responseXML; // 以XML形式返回数据
	}
}

xmlHttp.readState有5种值:

0:请求对象刚创建,还没有调用open方法
1:请求开始,调用了open方法,但是没有调用send方法
2:调用完send方法.
3:服务器已经开始响应,但是响应还未完成.
4:服务器响应结束(最终应该得到的状态.)

xmlHttp.status常用值:

200:成功响应
400:请求无效
403:禁止访问
404:服务器找不到资源
500:服务器内部错误

中文乱码:

如果出现中文异常,在doGet和doPost方法中设置编码格式
req.setCharacterEncoding(“UTF-8”);
resp.setContentType(“text/html;charset=utf-8”);