JS AJAX和JSONP的基础功能封装以及使用示例；

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);
             }
         })