zoukankan      html  css  js  c++  java
  • 自己封装一个简单的ajax插件

     48  function myAjax(obj) {
     49      var xmlHttp;                         //保存xmlHttpRequest对象
     50      var type = obj.requestType;          //保存请求方式
     51      var cache = obj.cache || false;      //get时是否使用缓存,默认否
     52      var success = obj.success;           //数据请求成功的回调方法
     53      var error = obj.error;               //发生错误的回调方法
     54      var async = obj.async || false;      //是否异步,默认否
     55      var data = [];                       //存储用户发来的数据
     56      var url = obj.url;                   //用户请求地址
     57 
     58 
     59      createXmlHttp();   //执行xmlHttp创建函数
     60 
     61      //创建xmlHttp失败
     62      if(!xmlHttp) {
     63         console.log("我的老哥,创建xmlHttp对象失败啦!您的浏览器不支持xmlHttpRequest对象");
     64      }
     65 
     66      try {
     67          //定义状态监听函数
     68          xmlHttp.onreadystatechange = function () {
     69              switch (xmlHttp.readyState) {
     70                  case 1:
     71                      console.log("open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。");
     72                      break;
     73                  case 2:
     74                      console.log("Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。");
     75                      break;
     76                  case 3:
     77                      console.log("所有响应头部都已经接收到。响应体开始接收但未完成。");
     78                      break;
     79                  case 4:
     80                      if (xmlHttp.status == 200) {
     81                          console.log("HTTP 响应已经完全接收。");
     82                          success(xmlHttp.responseText);                              //调用回调函数
     83                      }
     84                      break;
     85                  default:
     86                      error(xmlHttp.statusText);
     87                      break;
     88              }
     89          };
     90 
     91          //把用户传来的数据转换成字符串
     92          for (var i in obj.data) {
     93              data.push(i + '=' + obj.data[i]);
     94          }
     95          data = data.join('&');
     96 
     97          if (type.toUpperCase() == 'GET') {                //如果是get请求
     98              if (cache == false) {                         //如果get请求不使用缓存
     99                  xmlHttp.open('get', url + '?' + data + '&random=' + Math.random(), async);
    100                  xmlHttp.send('null');
    101              } else {                                     //如果get请求使用缓存
    102                  xmlHttp.open('get', url + '?' + data, async);
    103                  xmlHttp.send('null');
    104              }
    105          } else if (type.toUpperCase() == 'POST')          //如果是post请求
    106          {
    107              xmlHttp.open('post', url, async);
    108              xmlHttp.setRequestHeader("Content-Type"
    109                  , "application/x-www-form-urlencoded");
    110              xmlHttp.send(data);
    111          } else {
    112             throw  new Error('您的请求方法有误!');
    113          }
    114      } catch (error) {
    115          console.log("出错啦:" + error.message);
    116      }
    117 
    118 
    119     //创建xmlHttpRequest对象函数
    120     function createXmlHttp() {
    121         if(window.ActiveXObject) {
    122             try {
    123                 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    124             } catch (e) {
    125                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    126             }
    127 
    128         } else if (window.XMLHttpRequest){
    129             try {
    130                 xmlHttp = new XMLHttpRequest();
    131             } catch(e) {
    132                 xmlHttp = false;
    133             }
    134         }
    135     }
    136 
    137  }
    插件基本逻辑:
    GET请求: 1.新建XHR对象 2.定义状态监听函数,各种状态对应各种处理 3.调用open方法启动请求,准备发送 4.使用send方法发送请求,参数为null POST请求: 1.新建XHR对象 2.定义状态监听函数,各种状态对应各种处理 3.使用open方法启动请求,准备发送 4.设置http头信息的Content-Type类型,模拟表单发送 5.使用send方法发送请求,参数为自己要发送的东西
    插件使用方法:
    1.在html页面引入myAjax.js文件之后就可以使用啦
    2.
    get方法使用例子:

       myAjax({
          requestType: 'get',
    url: '/getFunc',
    async: true,
    cache: false,
    data: { name: "lin", age: "20"},
    success: function (data) {
    alert(data);
    },
    error: function (statusText) {
    alert("请求失败了,以下是具体信息: " + statusText);
    }
    });

    post方法使用例子:
    myAjax({
    requestType: 'post',
    url: '/postFunc',
    async: true,
    data: {name:"shuai", age: 10},
    success: function (data) {
    console.log(data);
    },
    error: function (statusText) {
    alert("请求失败了,以下是具体信息: " + statusText);
    }
    });

    这个插件主要是我为了学习原生ajax和函数封装而写的,还存在很多bug,同样在学习ajax和函数封装的同学可以参考参考,取其精华弃其糟粕,嘻嘻嘻。  

    myAjax.js已经在github开源,上面有实现具体例子: https://github.com/nayonglin/myAjax 记得star啊我的老哥!!!!!!

  • 相关阅读:
    洛谷—— P2234 [HNOI2002]营业额统计
    BZOJ——3555: [Ctsc2014]企鹅QQ
    CodeVs——T 4919 线段树练习4
    python(35)- 异常处理
    August 29th 2016 Week 36th Monday
    August 28th 2016 Week 36th Sunday
    August 27th 2016 Week 35th Saturday
    August 26th 2016 Week 35th Friday
    August 25th 2016 Week 35th Thursday
    August 24th 2016 Week 35th Wednesday
  • 原文地址:https://www.cnblogs.com/yonglin/p/6935430.html
Copyright © 2011-2022 走看看