• 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("&");
        };
    })();
  • 相关阅读:
    tkinter gui界面使用调戏妹子
    @property 用法
    @classmehod 用法解析
    python psutil 使用和windows 10 设置
    python 类多重继承问题
    多线程同步引入锁
    Linux—禁止用户SSH登录方法总结
    Linux FTP的主动模式与被动模式
    Java Socket详解
    MySQL学习(一)——创建新用户、数据库、授权
  • 原文地址:https://www.cnblogs.com/oygg/p/5881147.html
Copyright © 2020-2023  润新知