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){
       //考虑前台默认值:
       if(!json.url){
          alert('请输入合理的请求地址!');
          return;
       }
       json.type = json.type || 'get';
       json.time = json.time || 5000;
       json.data = json.data || {};
          //1.创建一个ajax对象;
          var timer = null;
       if(window.XMLHttpRequest){
          var oAjax = new XMLHttpRequest();
       }else{
          var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
       }
       
       //判断用户传递的是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));
             break;
       }
        json.fnLoading && json.fnLoading();
       //4.获取响应数据
       oAjax.onreadystatechange = function(){
          if (oAjax.readyState == 4) {
          	json.complete && json.complete();
             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);
    };
    

      

    就是这样!你们看懂了吗?百分百纯纯的原创!其实就是老师教的!就是这样 =^•ω•^=

  • 相关阅读:
    leetcode 1 Two sum
    hdu1099
    hdu1098
    函数执行顺序
    浏览器滚动条
    2048的制作
    JavaScript--对象-检查一个对象是否是数组
    JavaScript--格式化当前时间
    JavaScript--模拟验证码
    JavaScript--模拟网络爬虫
  • 原文地址:https://www.cnblogs.com/yang-ting/p/7056017.html
Copyright © 2011-2022 走看看