要学习ajax首先要了解xmlhttprequest对象,这是ajax的核心,通过这个对象向服务器发出异步请求,从服务器获取数据,然后JavaScript操作DOM从而更新页面。
最关键的获取数据的过程:
首先了解xmlhttprequest 对象的属性:
onreadystatechange:每次状态改变所触发事件的事件处理程序。
responseText:从服务器返回字符串的数据
responseXml:从服务器返回xml形式
status:404未找到 200已就绪
status text:伴随状态码的文本信息
readystatus:对象状态值
0(未初始化)对象建立,尚未调用方法(open)
1(初始化)对象已建立,尚未调用send方法
2(发送数据)调用send方法,当前状态和http头未知
3(数据传送中)已接受部分数据,但http头不全,responsebody 和responseText 数据可能出错。
4(完成)已接受全部数据,数据完整
一下写一个完整的原生ajax程序:
//创建xmlhttprequest 对象
function createXHR(){
//不同的浏览器创建方式不同
//非IE浏览器
var xhr=null;
if(window.xmlHttpRequest){
xhr=new XmlHttpRequest();
}
//IE浏览器
if(window.activeXObject){
try{
xhr=new ActiveXObject("Mcrosoft.XMLHTTP");
}catch(e){
try{
xhr=new ActiveXObject("msxml2.XMLHTTP");
}catch(ex){
}
}
}
}
function testAjax(){
//创建ajax
createXHR();
if(!xhr){
console.log("xmlhttprequest创建异常");//控制台打印
return false;
}
xhr.open("post",url,false);
xhr.onreadystatuschange=function(){
if(xhr.readystauts==4){
console.log="数据在加载";
if(xhr.stauts==200){
console.log(xhr.responseText);
}
}
}
xhr.send();
}
}