zoukankan      html  css  js  c++  java
  • 原生封装的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);

    }

     希望对大家有用

  • 相关阅读:
    Nginx 基本命令
    Nginx配置详细
    MySQL 函数大全
    X-Frame-Options 配置
    Visual Studio提示“无法启动IIS Express Web服务器”的解决方法
    idea java 非web程序打包
    mysql 存储过程
    webstorm 重置所有设置
    vue input 赋值无效
    MySQL 性能优化神器 Explain 使用分析
  • 原文地址:https://www.cnblogs.com/Z-Xin/p/7079814.html
Copyright © 2011-2022 走看看