认识AJAX

AJAX(Asynchronous JavaScript and XML)是多种技术的综合,
它使用Javascript绑定和处理所有数据。
使用XMLHttpRequest对象进行异步数据读取,
使用XML或json进行数据交换与处理,
使用DOM实现动态显示和交互,
使用XHTML和CSS标准化呈现,
更重要的是它打破了使用页面重载的惯例技术组合,可以说AJAX已成为Web开发的重要武器!

XHR.readyState五种状态 
XHR.readyState == 状态(0,1,2,3,4)

0:请求未初始化,还没有调用 open()。 
1:请求已经建立,但是还没有发送,还没有调用 send()。   //常用 
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 
3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。
4:响应已完成;您可以获取并使用服务器的响应了 //常用

服务器端状态
XHR.status == 200,300,404 等
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功 常用201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误

具体代码
function ajax(){
	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

	xhr.open('GET', '1.do?id=123', true); // true-异步,false-同步
	//xhr.open("POST", "1.do", true); // true-异步,false-同步

	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // POST请求必须加

	xhr.send(null); //GET发送null
	xhr.send("path=" + encodeURIComponent("aa&bb=c")); //POST发送的内容使用encodeURIComponent把字符串作为 URI 组件进行编码


	xhr.onreadystatechange = function(){
		if(xhr.readyState == 1){
			document.getElementById('ReadyState').innerHTML = "请求已经建立";// 等待时用图片显示
		}
		if(xhr.readyState == 4 && xhr.status == 200){
	    	var callbackVal = xhr.responseText;
			document.getElementById('Callback').innerHTML = callbackVal; //标志位 成功时显示内容
		}
	}
}
 

你可能感兴趣的:(Ajax)