原生js ajax实例

Posted lwhy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生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;
}
}





































以上是关于原生js ajax实例的主要内容,如果未能解决你的问题,请参考以下文章

原生js实现ajax的文件异步提交功能图片预览功能.实例

原生AJAX入门讲解(含实例)

用原生JS&PHP简单的AJAX实例

原生js实现Ajax

原生JS实现Ajax

原生态JS操作ajax