1.代码：
1 function ajax(options){
2 options = options || {};
3 options.type = options.type || "get";
4 data = options.data || {};
5 // 处理数据
6 var str = "";
7 for(var i in data){
8 str += `${i}=${data[i]}&`;
9 }
10 // 判断type类型拼接url
11 if(options.type == "get" || options.type == "jsonp"){
12 var d = new Date();
13 url = `${options.url}?${str}d=${d.getTime()}`;
14 }else{
15 url = options.url;
16 }
17 // console.log(`拼接后的url是${url}`);
18 // 判断type类型走jsonp还是创建ajax
19 if(options.type == "jsonp" ){
20 var script = document.createElement("script");
21 script.src = url;
22 document.body.appendChild(script);
23 // console.log(`走了jsonp的方法,url是${url}`)
24 window[data[data.colmName]] = function(responseText){
25 options.success(responseText);
26 }
27 }else{
28 var xhr;
29 //兼容性
30 if(window.XMLHttpRequest){
31 xhr = new XMLHttpRequest();
32 }else if(window.ActiveObject){
33 xhr = new ActiveXobject('Microsoft.XMLHTTP');
34 }
35 // 发送请求
36 if(options.type == "get"){
37 // console.log(`走了get的方法,url是${url}`)
38 xhr.open("get",url,true);
39 xhr.send(null)
40 }else{
41 // console.log(`走了post的方法,url是${options.url},参数是${str}`)
42 xhr.open("post",url,true);
43 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
44 xhr.send(str.slice(0,str.length-1));
45 }
46 // 接收数据
47 xhr.onreadystatechange = function(){
48 if(xhr.readyState == 4){
49 var status = xhr.status;
50 if(xhr.readyState == 4 && xhr.status == 200){
51 options.success(xhr.responseText,xhr.status);
52 }else{
53 options.error(xhr.responseText,xhr.status)
54 }
55 }
56 }
57 }
58 }
2.本地data.php中的数据：
<?php
$u = $_REQUEST["user"];
$p = $_REQUEST["pass"];
echo "这是php数据".$u ."-----".$p;
3.使用示例：
POST请求：
1 ajax({
2 url:"data.php",
3 data:{
4 user:"admin",
5 pass:23213
6 },
7 type:"post",
8 success:function(res,status){
9 console.log(res);
10 console.log(status);
11 },
12 error:function(res,status){
13 console.log(res);
14 console.log(status);
15 }
16 })
GET请求：
1 //type不传默认是get
2 ajax({
3 url:"data.php",
4 data:{
5 user:"admin",
6 pass:23213
7 },
8 success:function(res,status){
9 console.log(res);
10 console.log(status);
11 },
12 error:function(res,status){
13 console.log(res);
14 console.log(status);
15 }
16 })
JSONP：
1 //以百度搜索接口为例
2 ajax({
3 url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
4 data:{
5 wd:"上海",
6 colmName:"cb",
7 cb:"adsaa"
8 },
9 success:function(res,status){
10 console.log(res);
11 console.log(status);
12 },
13 error:function(res,status){
14 console.log(res);
15 console.log(status);
16 }
17 })