神奇的Ajax

最新推荐文章于 2022-11-21 15:46:04 发布

ᝰꫛꫀꪝ⁵²º⅓¼.ꪶꪜ276

最新推荐文章于 2022-11-21 15:46:04 发布

阅读量342

点赞数 1

文章标签： eclipse java tomcat

本文链接：https://blog.youkuaiyun.com/weixin_61946177/article/details/124413945

版权

Ajax是一种只刷新局部页面的技术，通过XMLHttpRequest对象与服务器进行异步交互。本文介绍了Ajax的常用方法，包括open()、send()和setRequestHeader()，并展示了登录功能的示例代码。当readyState为4且status为200时，可以处理服务器返回的数据。通过设置回调函数，根据服务器响应更新页面内容。

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

Ajax：只刷新局部页面的技术

常用方法：

方法名	说明
open(method,URL,async)	建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指定请求的地址 async参数指定是否使用异步请求，其值为true或false
send(content)	发送请求 content参数指定请求的参数
setRequestHeader(header,value)	设置请求的头信息

常用属性

onreadystatechange：指定回调函数

readystate: XMLHttpRequest的状态信息

就就绪状态码绪状态码	说明
0	XMLHttpRequest对象没有完成初始化
1	XMLHttpRequest对象开始发送请求
2	XMLHttpRequest对象的请求发送完成
3	XMLHttpRequest对象开始读取响应，还没有结束
4	XMLHttpRequest对象读取响应结束

status：HTTP的状态码

状态码	说明
200	服务器响应正常
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象

就绪状态是4而且状态码是200，才可以处理服务器数据

下面请看演示代码：登录

function login() {
	var uname = document.getElementById("uname").value;
	var upwd = document.getElementById("upwd").value;
	var xmlhttp;
	try{
		xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
	}
	catch(e){
		xmlhttp=new XMLHttpRequest();
	}
	//连接服务器
	xmlhttp.open("post","LoginServlet?uname="+uname+"&upwd="+upwd,true);
	//设置请求头信息
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//设置回调函数
	xmlhttp.onreadystatechange=function(){
		//判断请求响应结束
		if(xmlhttp.readyState==4){
			//服务器正常
			if(xmlhttp.status==200){
				var str = xmlhttp.responseText;
				if(str=="ok"){
					document.getElementById("sp").innerHTML="真牛，写对了";
				}else{
					document.getElementById("sp").innerHTML="你是个傻子，密码都不记得";
				}
			}
		}
	}
	xmlhttp.send(null);
}