js:
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open(method,url,aynsc);
//method:请求的类型,get或post;
//url:文件在服务器上的位置,为了避免缓存可以向url添加唯一的id,ie:"xxx.jsp?t="+Math.random();
//async:true(异步)或false(同步)
xhr.send(); //当method为post时带string参数
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status=200){
//doSomethind;
}
} //响应处于onreadystatechange事件中的就绪状态时执行的函数
xhr方法:
setRequestHeader(header,value);
example:xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr属性:
readyState-存有xhr的状态信息,从0到4发生变化;
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且响应已就绪
status-200:ok;404:未找到页面;
responseText-用于接收服务器字符串形式的响应数据
responseXML-用于接收服务器XML形式的响应数据,需要作为xml进行对象解析
xhr事件:
onreadystatechange事件:当请求被发送到服务器时,我们需要执行一些基于响应的任务;每当readyState改变时,就会触发该事件
ajax:js无需等待服务器的响应,可以在等待服务器响应时执行其他脚本;当响应就绪后对响应进行处理
非ajax:js会等到服务器就绪后才继续执行,如果服务器繁忙或未响应,应用程序会挂起或停止
Callback函数:
是一种以参数形式传递给另一个函数的函数
example:
function MyFunction(){
loadXMLDoc("ajax_info.txt",function(){
if(xhr.readyState==4 && xhr.status==200){
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
});
}
get与post区别:
get简单且快,大部分情况下应使用get
get无法使用缓存文件(更新服务器上的文件或数据库);向服务器发送大量数据(post没有数据量限制);发送包含未知字符的用户输入时,post比get更稳定也更可靠.