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啊我的老哥!!!!!!

  • 相关阅读:
    男人只说三分话、留的七分打天下。
    sqlmap实例拿站
    sqlmap使用笔记
    rpm安装删除简介
    Zookeeper技术介绍
    linux下各文件夹的结构说明及用途介绍:
    每个系统管理员都要知道的 30 个 Linux 系统监控工具
    常用命令
    安装gitlab管理自己的代码
    速成Git
  • 原文地址:https://www.cnblogs.com/yonglin/p/6935430.html
Copyright © 2011-2022 走看看