首先了解
XMLHttpRequest
对象的基本运用
XMLHttpRequest 对象用于和服务器交互数据
如需将请求发送到服务器,我们使用 XMLHttprequest 对象的 Open() 和 send 方法。 open中要明确确使用的是 Get 还是 Post
XMLHttpRequest 对象用于和服务器交互数据
如需将请求发送到服务器,我们使用 XMLHttprequest 对象的 Open() 和 send 方法。 open中要明确确使用的是 Get 还是 Post
与
post
相比,
get
更简单快捷,并且在大部分情况下都能用
然而,在以下情况中,请使用 post 请求。
无法使用缓存文件
向服务器发送大量数据( post 没有数据量限制)
发送包含未知字符的用户输入时。 post 比 get 更稳也更可靠。
下面是创建 XMLHttpRequest 对象。
不同的浏览器的创建方式略有不同:
注意:为了应对所有的现代浏览器,包括 IE5 和 IE6 ,需要检测是否支持 XMLHttpRequest 对象,如果支持创建 XMLHttpRequest ,不支持,则创建 ActiveXObject 。
然而,在以下情况中,请使用 post 请求。
无法使用缓存文件
向服务器发送大量数据( post 没有数据量限制)
发送包含未知字符的用户输入时。 post 比 get 更稳也更可靠。
下面是创建 XMLHttpRequest 对象。
不同的浏览器的创建方式略有不同:
1建立
//创建不同的浏览器代码封装
if(window.XMLHttpRequest){
xmlHttprequest=new XMLHttpRequest();
if(xmlHttprequest.overrideMineType){
xmlHttprequest.overrideMineTYpe("text/xml");
}
}else if(window.ActiveXObject){
var activeName=["MSXM2.XMLHTTP","Miscrosoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try {
xmlHttprequest=new ActiveXObject(activeName[i]);
break;
} catch (exception) {
}
}
}
if(xmlHttprequest==undefined || xmlHttprequest==null){
alert("创建xmlHttprequest失败");
}else{
this.xmlhttp=xmlHttprequest;
}
注意:为了应对所有的现代浏览器,包括 IE5 和 IE6 ,需要检测是否支持 XMLHttpRequest 对象,如果支持创建 XMLHttpRequest ,不支持,则创建 ActiveXObject 。
2 注册回调方法
//服务器数据返回http后,
动态更新页面 xmlhttp.onreadystatechange=callback;
//如果是加了()是给的返回值,就不再是函数的数据了
注释:
onreadystatechange事件
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
onreadystatechange事件
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成,且响应已就绪
3 使用Open方法设置和服务器交互的基本信息
4设置发送的数据,开始和服务端交互
var userName=document.getElementById("UserName").value;
userName=encodeURL(encodeURL(userName));
//两次吗解决中文乱码
//采用的交互方式,异步或同步
//4 设置向服务器端发送的数据,启动服务
xmlhttp.open("GET","AJAX?name="+userName,true);
xmlhttp.send(null);//不需要参数,post方式是不同的
//post方式交互
//3.设置和服务器端交互的相应参数
xmlhttp.open("POST","AJAX",true);
//设置post请求头信息
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.设置服务器端发送的数据,启动和服务器端的交互
xmlhttp.send("name=" + userName);
//alert("test");
*/
注意:
open方法最多可以有五个参数,其中前三个参数是必须的。
Menthod:请求的类型get或post
url:文件在服务器上的位置
async:true(异步)或false(同步)
get方法:请求的数据都写在open的url中
post方法: url中不谢任何数据,只填写服务器端的地址。在调用
请使用 setRequestHeader() 来添加 HTTP 头
来设置Content-Type的值。然后再send()方法中规定希望发送的数据
5 编写回调函数,判断交互是否完成。
并根据需要获取服务端返回的数据,更新页面。
基本的创建 XMLHttpRequest 对象步骤清晰,先做什么后做什么,不能颠倒,不然调用中不准会出现什么错误。下面是一个小实例,创建登陆的实例,详细参看 http://www.okajax.com/a/201009/ajax_login.html 登陆页面介绍。
function callback()
{
array.push(xmlhttp, readyState);
//判断和服务器端交互是否完成,是否返回数据
if(xmlhttp.readyState==4)
{
//表示和服务端交互完成
if(xmlhttp.status==200){
//200表示正确返回的数据
//httprequest取回返回的数据
//纯文本或xml方式
//纯文本数据的接收方式
var message=xmlhttp.response.Text;
//xml数据对应的dom对象接收fangfa
// 前提,服务器设置contenttype为text/xml
//返回数据动态填充到div中
var div=document.getElementById("message");
div.innerHTML=message;
// alert(array);
// alert(xmlhttp.responseXML.getElement);
//If语句判断返回的xml是否正确
// var tootElement=xmlhttp.responseXML.getElement;
if(rootElement==null || rootElement.nodeName !=""){
}
else
{
//数据的正确处理
}
}
};
}
基本的创建 XMLHttpRequest 对象步骤清晰,先做什么后做什么,不能颠倒,不然调用中不准会出现什么错误。下面是一个小实例,创建登陆的实例,详细参看 http://www.okajax.com/a/201009/ajax_login.html 登陆页面介绍。