zoukankan      html  css  js  c++  java
  • 原生JS封装AJAX

    今天我们来说说利用原生JS封装AJAX.

    jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个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);
    };

    实际的运用:

     <script src="ajax3.js"></script>
        <script>
            window.onload = function(){
                var oBtn = document.getElementById('btn');

                oBtn.onclick = function(){
                    ajax({
                        url:'post.php',
                        data:{
                            a:1,
                            b:2
                        },
                        type:'post',
                        success:function(res){
                            alert(res);
                        },
                        error:function(s){
                            alert(s);
                        }
                    });
                }
            }
        </script>

    希望对你有帮助,我们明天见!

    坚持!坚持!坚持!坚持!坚持!坚持!

  • 相关阅读:
    ok6410驱动usb摄像头
    自己动手写CPU之第五阶段(1)——流水线数据相关问题
    ListView嵌套ListView时发生:View too large to fit into drawing cache的问题
    算法导论 第8章 线性时间排序(计数排序、基数排序、桶排序)
    Android_通过ContentObserver监听短信数据变化
    【MyEcplise】导入项目报错:Errors running builder 'JavaScript Validator' on project '项目名'. java.lang.ClassCastException
    【js】js中const,var,let区别
    【Node.js】2.开发Node.js选择哪个IDE 开发工具呢
    【Node.js】1.安装步骤
    【POI】对于POI无法处理超大xls等文件,官方解决方法【已解决】【多线程提升速率待定】
  • 原文地址:https://www.cnblogs.com/May-J-Wang/p/6986530.html
Copyright © 2011-2022 走看看