• 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("&");
        };
    })();
  • 相关阅读:
    JSP基础学习(二)
    JSP基础学习(一)
    Android 使用开源xUtils来实现多线程下载(非原创)
    Android 多线程断点下载(非原创)
    Android HttpClient框架get和post方式提交数据(非原创)
    Android ListView使用(非原创)
    ScrollView 的使用(非原创)
    Android SQLite API的使用(非原创)
    Android SQLite的使用2(非原创)
    位运算
  • 原文地址:https://www.cnblogs.com/oygg/p/5881147.html
Copyright © 2020-2023  润新知