原生javascript包装一个ajax方法

Posted 2020-07-19 笑花大王

 

 

调用AJAX

 1 <script type="text/javascript" src="ajax.js"></script>
 2 <script type="text/javascript">
 3     //调用包装好的ajax方法
 4     ajax({
 5         method : "get",
 6         url : "get.php",
 7         asyn : true,
 8         data : "user=zym&password=1234",
 9         fn : function( res ){
10             console.log( res );
11         }
12     });
13 </script>

 

 

打包好的ajax方法函数：

 1 function ajax( myJson ){
 2     //新建ajax对象
 3     var xhr = null;
 4     window.XMLHttpRequest?(xhr=new XMLHttpRequest()):(xhr=new ActiveXObject("Microsoft.XMLHTTP"));
 5     //定义数据传输方法“get”或“post”，如果没有写，那么默认的是用“get”方法！
 6     var method = myJson.method||"get";
 7     //定义数据传输的地址！
 8     var url = myJson.url;
 9     //定义数据加载方式（同步或异步），默认的情况下，使用ajax，都是异步加载！
10     var asyn = myJson.asyn||true;
11     //定义传输的具体数据！
12     var data = myJson.data;
13     //成功之后执行的方法！
14     var fn = myJson.fn;
15     //第一种情况：如果是用get方法，并且data是存在的，就执行：
16     if(method=="get"&&data){
17         xhr.open(method,url+"?"+data+"&"+Math.random(),asyn);
18     }
19     //第二种情况：如果是用post方法，并且data是存在的，就执行：
20     if(method=="post"&&data){
21         xhr.open(method,url,asyn);
22         xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
23         xhr.send(data);
24     }else{
25         xhr.send();
26     }
27     //数据传输成功之后
28     xhr.onreadystatechange=function(){
29         if(xhr.readyState==4){
30             if(xhr.status>=200&&xhr.status<300){
31                 fn(xhr.responseText);
32             }else{
33                 alert("程序出错！");
34             }
35         }
36     }
37 }