第一步: 创建XMLHttpRequest对象
var xmlrequest = new XMLHttpRequest();
第二步:使用open方法设置,发送数据及与server交互
这里用的是GET方法,所以传数据可以是在URL后面,如:
www.baidu.com?t=54545454,一般用GET传的数据都不是敏感数据,大都数只是跳转页面或刷新页面
xmlrequest.open(“GET”,URL,true);
xmlrequest.send(null);
当使用POST方法时,把"GET" 改为"POST"即可,如果要传入数据,把数据放到send方法中即可,如:
xmlrequest.open(“POST”,URL,true);
xmlrequest.send(“u_name=”+username+"&u_pwd="+pwd);
xmlrequest.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);//设置请求头信息这是post方法必须要加的一段,用于把数据存入请求头中
注意:这里username 和pwd是传入的参数,其实从这里看出来POST经常处理敏感数据如账号,密码等信息。
第三步:注冊回调函数
xmlrequest.onreadystatechange=callback;
第四步:更新界面,接受服务器反馈
function callback(){
if(xmlrequest.readyState4){//读取响应结束
if(xmlrequest.status200){//http 状态码 服务器响应正常
var date = xmlrequest.responseText;//获取响应文档的内容
//这里也可以用resonseXml不过获取的事xml文件要用Dom方法获取
document.getElementById(“p1”).innerHTML=date;//把数据显示在id为p1的标签上
}
}
}
其实在jQuery中已经封装好了ajax方法直接调用就可以如下:
1.GET请求的jQuery中的ajax方法
$ajax(){
type: “GET”;
url: “zs.txt”;
dateType: “script”;
}
1.POST请求的jQuery中的ajax方法
$ajax(){
type:“POST”;
url: “zs.jsp”;
date: “username =zs&userpwd = 124488”
success: function(){
alert(“成功”);
}
error:function(){
alert(“失败”)
}
}
当然封装的ajax方法不止这些参数比如说:timeout,它用于设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async,它的默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
其他的就不说了大家可以自行了解