1.代码：
function ajax(options){
options = options || {};
options.type = options.type || "get";
data = options.data || {};
// 处理数据
var str = "";
for(var i in data){
//str += `${i}=${data[i]}&`; //IE不兼容模板字符串 ----update by 12-02
str = str + i + "=" + data[i] + "&"; }
// 判断type类型拼接url
if(options.type == "get" || options.type == "jsonp"){
var d = new Date();
//url = `${options.url}?${str}d=${d.getTime()}`; //IE不兼容模板字符串 ----update by 12-02 url = options.url + "?" + str + "_jwy" + "=" + d.getTime(); }else{
url = options.url;
}
// console.log(`拼接后的url是${url}`);
// 判断type类型走jsonp还是创建ajax
if(options.type == "jsonp" ){
var script = document.createElement("script");
script.src = url;
document.body.appendChild(script);
// console.log(`走了jsonp的方法,url是${url}`)
window[data[data.colmName]] = function(responseText){
options.success(responseText);
}
}else{
var xhr;
//兼容性
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else if(window.ActiveObject){
xhr = new ActiveXobject('Microsoft.XMLHTTP');
}
// 发送请求
if(options.type == "get"){
// console.log(`走了get的方法,url是${url}`)
xhr.open("get",url,true);
xhr.send(null)
}else{
// console.log(`走了post的方法,url是${options.url},参数是${str}`)
xhr.open("post",url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(str.slice(0,str.length-1));
}
// 接收数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var status = xhr.status;
if(xhr.readyState == 4 && xhr.status == 200){
options.success(xhr.responseText,xhr.status);
}else{
options.error(xhr.responseText,xhr.status)
}
}
}
}
}2.本地data.php中的数据：
<?php
$u = $_REQUEST["user"];
$p = $_REQUEST["pass"];
echo "这是php数据".$u ."-----".$p;
3.使用示例：
POST请求：
ajax({
url:"data.php",
data:{
user:"admin",
pass:23213
},
type:"post",
success:function(res,status){
console.log(res);
console.log(status);
},
error:function(res,status){
console.log(res);
console.log(status);
}
})GET请求：
//type不传默认是get
ajax({
url:"data.php",
data:{
user:"admin",
pass:23213
},
success:function(res,status){
console.log(res);
console.log(status);
},
error:function(res,status){
console.log(res);
console.log(status);
}
})
JSONP：
//以百度搜索接口为例
ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data:{
wd:"上海",
colmName:"cb",
cb:"adsaa"
},
success:function(res,status){
console.log(res);
console.log(status);
},
error:function(res,status){
console.log(res);
console.log(status);
}
})