/*
* AJAX建立和服务器的连接,接收服务器的请求,处理服务器返回的数据
* 开发步奏:
* *创建XMLRequest对象
* *打开和服务器的连接
* *发送数据
* *接收服务器的响应
*
*/
/*
* 创建XMLRequest对象
*/
function ajaxFunction(){
var xmlHttp;
try{ //非IE浏览器
xmlHttp = new XMLHttpRequest;
}
catch(e){
try{//IE浏览器
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
}
}
}
return xmlHttp;
}
window.οnlοad=function(){
//<input type="button" name="ok" id="ok" value="测试服务器连接">
document.getElementById("ok").οnclick=function(){
alert("xxxxxxxx");
/*
* 1.获取XMLRequest对象
*/
var XMLRequest = ajaxFunction();
alert(XMLRequest);
/*2.处理服务器端的响应
* *XMLHttpRequest对象中有一个readyState属性,该属性代表Ajax请求的当前状态,他的值用数学代表
* * 0代表未初始化,还没有调用open方法
* * 1代表正在加载,open方法已被调用,但send方法还没有调用
* * 2代表已加载完毕,send方法已被调用,请求已经开始
* * 3代表交互中,服务器正在发送响应
* * 4代表完成,响应发送完毕
* * 每次readyState的改变都会触发onreadystatechange事件
*/
alert("xxxxxxxx");
XMLRequest.onreadystatechange = function(){
alert(XMLRequest.readyState);
}
/*
* 3.打开和服务器的连接
* XMLRequest.open(method,url,asynch)
* *method:表示请求方法
* *url:表示请求路径
* *asynch:表示请求是否异步传输,默认值为true(异步)
*/
alert("xxxxxxxx");
XMLRequest.open("get","servlet/TestServlet",true);
//4.发送数据,若选用的是get请求,则不会发送任何数据,给send方法传递null
XMLRequest.send(null);
}
}
Ajax原理
最新推荐文章于 2024-03-19 08:30:00 发布