zoukankan      html  css  js  c++  java
  • ajax库的简单实现

    其实jQuery里面的ajax功能已经非常强大了,没有必要在去造轮子,该篇文章只是个人兴趣,想了解一下ajax的实现流程,简单的封装了一下ajax的get和post方法,代码如下:

    (function(){
        //面向外界的唯一变量接口!
        var ajaxTool = window.ajaxTool = {};
        //作者、版本号等等信息
        ajaxTool.author = "ouyang";
        ajaxTool.version = "1.0.0";
    
        /**
         *  get方法
         *  URL:请求的URL
         *  queryJSON:json格式数据
         *  callback:请求成功后的回调
         */
        ajaxTool.get = function(URL,queryJSON,callback){
            //创建xhr对象,解决兼容问题
            if(window.XMLHttpRequest){
                var xhr = new XMLHttpRequest();
            }else{
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //结果返回之后做的事情
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                        callback(null,xhr.responseText);
                    }else{
                        callback(new Error(URL+"存在异常"),undefined);
                    }
                }
            }
            //拼接字符串
            var querystring = ajaxTool.paramsJson2String(queryJSON);
            //配置
            xhr.open("get" , URL + "?" + querystring , true);
            //发送
            xhr.send(null);
        };
    
        /**
         *  post方法
         *  URL:请求的URL
         *  queryJSON:json格式数据
         *  callback:请求成功后的回调
         */
        ajaxTool.post = function(URL,queryJSON,callback){
            //创建xhr对象,解决兼容问题
            if(window.XMLHttpRequest){
                var xhr = new window.XMLHttpRequest();
            }else{
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //结果返回之后做的事情
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                        callback(null,xhr.responseText);
                    }else{
                        callback(new Error(URL+"存在异常"),undefined);
                    }
                }
            }
            //拼接字符串
            var querystring = ajaxTool.paramsJson2String(queryJSON);
            //配置
            xhr.open("post" , URL , true);
            //发送
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(querystring);
        };
    
        ajaxTool.paramsJson2String = function(json){
            var arr = [];    //结果数组
            for(var k in json){
                arr.push(k + "=" + encodeURIComponent(json[k]));
            }
            return arr.join("&");
        };
    })();
  • 相关阅读:
    mybatis Column 'XXX' in where clause is ambiguous 错误
    IDEA 代码提示不区分大小写
    接口安全问题
    spring 事务问题
    js问题: is not a function
    Uncaught TypeError: form.attr is not a function 解决办法
    springmvc 跳转页面或者返回json
    ajax 跳转页面时添加header
    maven工程 添加本地jar依赖
    mysql 创建备份表
  • 原文地址:https://www.cnblogs.com/oygg/p/5881147.html
Copyright © 2011-2022 走看看