认识AJAX

最新推荐文章于 2022-12-03 19:04:54 发布

原创最新推荐文章于 2022-12-03 19:04:54 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xhtml #json #ViewUI

JavaScript 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了AJAX技术，一种用于创建动态网页应用的技术组合。详细解释了XMLHttpRequest对象如何实现异步数据读取，并展示了不同状态码的意义。同时，提供了具体的AJAX实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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; //标志位 成功时显示内容
		}
	}
}