提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

Ajax对象包含post和get两种异步传输方式

AJAX对象异步 两种 包含 get post 传输方式
2023-06-13 09:14:11 时间
复制代码代码如下:

/**
*@authorSupersha
*@QQ:770104121
*/
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>AjaxDocument</title>
<scripttype="text/javascript">
//注意，编码要同意为utf-8才能避免中文参数和返回中文的乱码问题
functionAjax(prop){
this.action(prop);//在实例化的时候就调用action方法
}
Ajax.prototype={
createXHR:function(){//创建XMLHttpRequest对象
varxhr=false;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest();
}
else
if(window.ActiveXObject){
try{
xhr=newActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
xhr=newActiveXObject("Microsoft.XMLHTTP");
}
}
returnxhr;
},
action:function(prop){
varxhr=this.createXHR();
if(xhr){
varurl=encodeURI(prop["url"]);//对URL进行编码
if(prop["method"]=="GET"&&url&&prop["success"]){//GET方法
xhr.onreadystatechange=function(){
(function(){//自执行函数用于检查服务器的返回状态并执行回调函数
if(xhr.readyState==4&&xhr.status==200){
prop["success"](xhr);//执行回调函数
}
})();
};
//alert(prop["hander"]instanceofFunction);
xhr.open("GET",url,true);
xhr.send(null);
}
else
if(prop["method"]=="POST"&&url&&prop["success"]){//POST方法
xhr.onreadystatechange=function(){
(function(){
if(xhr.readyState==4&&xhr.status==200){
prop["success"](xhr);//执行回调函数
}
})();
};
if(prop["params"]){
url=url.indexOf("?")>-1?url+"&"+prop["params"]:url+"?"+prop["params"];
}
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(null);
}
}
else
if(!xhr&&prop["fail"]){
prop["fail"]();
}
}
}
functiongetData(){
varajax=newAjax({
url:"test.php",
method:"POST",
success:onComplete,
params:"name="+escape("沙锋")//进行编码
});
}
functiononComplete(obj){
alert(unescape(obj.responseText));//进行转码
}
</script>
</head>
<body>
<inputtype="button"value="GetData"onclick="getData()"/>
</body>
</html>

注释：
Ajax对象接受一个对象字面量为参数，这个对象字面量中包含method，url，success，params，fail参数
method："GET"或者"POST"
url：服务器端文件路径
success：当请求没有错误的时候，调用的回调函数，该回调函数带一个XMLHttpRequest对象的参数
fail：当请求错误的时候调用
params：当使用POST方法发送请求是，params为参数字符串

相关文章