原生js ajax实例

了解Ajax的工作原理,就要从理解XMLHttpRequest这个对象开始。

下面给出将要用于该对象的很少的几个 方法和属性。

　 ·open()：建立到服务器的新请求。 

　   　·send()：向服务器发送请求。 

　   　·abort()：退出当前请求。 

   　　·readyState：提供当前 HTML 的就绪状态。 

   　　·responseText：服务器返回的请求响应文本。

‘onreadystatechange:回调方法

　·responseXML：服务器返回的请求响应XML形式组织的文本。

获取响应文本的函数：

function getRepText(url,args,reqstyle="get"){
/*
* 获取xmlhttp对象
*/
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
var resultObject;
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
var result = xmlhttp.responseText;
document.getElementById("json").innerHTML=result;
alert("响应体类型："+typeof result+"\n响应体 ："+result);
resultObject = eval(‘(‘+result+")");
alert(JSON.stringify(resultObject));
};
}
if(reqstyle.toLowerCase()=="get"){
xmlhttp.open("get",url,true);
xmlhttp.send();
}else{
xmlhttp.open("post", url, true);
xmlhttp.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded‘);
xmlhttp.send(args);
}
if(xmlhttp.readyState==4 && xmlhttp.status==200){
return resultObject;
}
}