XMLHttpRequest基础

XMLHttpRequest基础｜封装函数

< html >
< head >
< meta http - equiv = " Content-Type " content = " text/html;charset=utf-8 " >
< title > XMLHttpRequest < / title>
< / head>
< body >
< h1 > XMLHttpRequest < / h1>
< a href = " # " id = " btn " > 异步加载 < / a>
< script >
var btn = document.getElementById( " btn " );
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
/* 传统写法　start */
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

// 对XMLHttpRequest封装成方法
/*
function createXHR(){
return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
}
*/
btn.onclick = function (){
/*
var xhr = createXHR();
url = "test.php?"+(+new Date());
//xhr.open("get",url);
xhr.open("post",url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("ps=true&username=xylxq1925&pwd=xylxq3270918");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//alert(xhr.responseText);
var xml = xhr.responseXML;
alert(xml.documentElement.firstChild.nodeValue);
}
}
//alert(xhr.responseText);
*/
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
/* 传统写法　end */
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<



// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
/* 把上面所有功能整合成一个函数　start */
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
function createXHR(){
return window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject();
}

/*
*args参数是一个对象
*属性: method,url,
dada: HashMap {key:value}
*方法:success: Function
*/
function ajax(args){
var xhr = createXHR();
var data = params(args.data);
args.method = args.method || " get " ;
if (args.method == " post " ){
xhr.open(args.method,args.url, true );
}
xhr.open(args.method,args.url + " ? " + data);

if (args.method == " post " ){
xhr.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded " );
xhr.send(data);
} else {
xhr.send();
}
xhr.onreadystatechange = function (){
if (xhr.status === 200 && xhr.readyState === 4 ){
args.success(xhr.responseText,xhr.resposeXML);
}
}

function params(obj){
var a = [];
for (i in obj){
a.push(encodeURIComponent(i) + " = " + encodeURIComponent(obj[i]));
}
return a.join( " & " );
}
}


// 方法的调用
ajax({
method: " post " ,
url: " test.php " ,
data:{ " key " : " value " , " username " : " xylxq " },
success: function (text){
alert(text);
}
});
}
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
/* 把上面所有功能整合成一个函数 end */
// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
< / script>
< / body>
< / html>

// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
/* 下面是请求的服务器端语言 文件名test.php */
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<? php
file_put_contents( " test.txt " ,date( " H:i:s " ));
// echo date("中文");
header( " content-type:text/xml " );
echo " <?xml version='1.0' encoding='utf-8'?>
<root>
　XML文件
</root>
" ;
?>

 

转载于:https://www.cnblogs.com/xylxq1925/articles/1903631.html