• 原生封装的ajax


    原生封装的ajax的代码如下:

    //将数据转换成 a=1&b=2格式;

    function json2url(json){

       var arr = [];

       //加随机数防止缓存;

       json.t = Math.random();

       for(var name in json){

          arr.push(name+'='+json[name]);

       }

       return arr.join('&');

    }

    function ajax(json){

       //1.创建一个ajax对象;

       if(window.XMLHttpRequest){

          var oAjax = new XMLHttpRequest();

       }else{

          var oAjax = new ActiveXObject('Microsoft.XMLHTTP');

       }

       //考虑默认值:

       if(!json.url){

          alert('请输入合理的请求地址!');

          return;

       }

       json.type = json.type || 'get';

       json.time = json.time || 5000;

       json.data = json.data || {};

       //判断用户传递的是get还是post请求:

       switch (json.type.toLowerCase()){

          case 'get':

             //2.打开请求;

             oAjax.open('get',json.url+'?'+json2url(json.data),true);

             //3.发送数据:

             oAjax.send();

             break;

          case 'post':

             //打开请求;

             oAjax.open('post',json.url,true);

             //设置请求头;

             oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');

             //发送数据;

             oAjax.send(json2url(json.data));

       }

       //4.获取响应数据

       oAjax.onreadystatechange = function() {

          if (oAjax.readyState == 4) {

             if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {

                //如果外边传递了成功的回调函数,那么就执行,

                json.success && json.success(oAjax.responseText);

             } else {

                //如果外边传递了失败的回调函数,那么就执行,

                json.error && json.error(oAjax.status);

             }

             clearTimeout(timer);//规定时间内取到数据后清除定时器;

          }

       };

       var timer;

       timer = setTimeout(function(){//设置网络响应超时;

          alert('网络响应超时,请稍后再试');

          oAjax.onreadystatechange = null;//网络超时后清除事件;

       },json.time);

    }

     希望对大家有用

  • 相关阅读:
    Postman生成随机数(4)
    Postman参数化(3)
    Postman主界面介绍(2)
    Postman安装与介绍(1)
    Scuba数据库漏洞扫描工具--安装与使用
    Jmeter(八)Linux上安装与使用
    Jmeter(七)生成测试报告(Windows)
    理解动态字符串SDS
    csp复习笔记?
    ORM
  • 原文地址:https://www.cnblogs.com/Z-Xin/p/7079814.html
Copyright © 2020-2023  润新知