zoukankan      html  css  js  c++  java
  • 原生javascript包装一个ajax方法

    调用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 }
  • 相关阅读:
    Ubuntu更新Hostname和hosts
    Github 的其他用法
    Git与Github使用
    【实习】实习期间一些工具的使用
    【实习】实习第一周周报
    QT_string转char*
    QT_获取正在运行程序的进程id(判断程序是否正在运行)
    QT_获取运行进程所在目录路径_2
    QT_获取运行进程所在目录路径_1
    QT_强杀进程
  • 原文地址:https://www.cnblogs.com/xhds/p/5554218.html
Copyright © 2011-2022 走看看