zoukankan      html  css  js  c++  java
  • 封装原生js的Ajax方法

    封装好的函数

    //创建一个ajax对象
    function createXHR(){
        if(typeof window.XMLHttpRequest != 'undefined'){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject('MicroSoft.XMLHTTP');
        }
    }
    //数据转换函数
    function transform(data){
        //创建一个空的数组
        var attr = [];
        //把数据转码后push到数组中
        for(var i in data){
            attr.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
        }
        //用join方法把数组拆开以&符号分割
        return attr.join('&');
    }
    function ajax(data){
        //创建一个ajax对象
        var xhr = createXHR();
        //给地址添加随机数作用是保证每次调用的都是不同的链接
        data.url = data.url+'?rand='+Math.random();
        //进行数据的转换‘ask码’
        data.data = transform(data.data);
        //如果为get请求那么附带的参数必须添加带链接的尾部
        if(data.mode == 'get'){
            //判断url中是否存在‘?’号如果存在则后结尾为&符号如果不存在则结尾添加符号为?
            data.url += data.url.indexOf('?') == -1 ? '?'+data.data : '&'+data.data;
        }
        //如果是一部加载的话那么必须验证readyState的状态4为完成
        if(data.ync == true){
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    callBank();
                }
            }
        }
        //传入地址,获取方法,同步异步
        xhr.open(data.mode,data.url,data.ync);
        //如果为post请求方式那么传入的参数必须添加到
        if(data.mode == 'post'){
            //因为post请求默认是要要form表单中才能使用的现在有个方法就是模拟表单来是用
            xhr.setRequestHeader('Content-Type','applation/x-www-form-urlencoded');
            //把参数传入到send里边
            xhr.send(data.data);
        }else{
            xhr.send(null);
        }
        //如果是同步方法的话那么就直接判断状态是否是200
        if(data.ync == false){
            callBank();
        }
        function callBank(){
            //如果相应状态是200的话执行
            if(xhr.status == 200){
                //利用回调传参的原理把获取到的内容传入在外面就可以直接使用
                data.success(xhr.responseText);
            }
        }
    }
    Ajax代码

    调用方法

    ajax({
        url:'地址',
        mode:'get',     //调用方法get或者是post
        ync:true,       //同步为false异步为true
        data:{
            'name':'Bob-佳杰',
            'age':24
        },
        success:function(data){
            alert(data)
        }
    });
  • 相关阅读:
    [转载]备忘:oh my zsh 的安装、更新、删除
    【转载】fedora22和win10之间的文件共享互访
    python3.7[列表] 索引切片
    注册科创版 等待生效中 测评 投资
    谷歌镜像-20190627
    debian静态地址网络配置方法
    latex高速新手教程
    Java知识点解析
    【Linux 操作系统】Ubuntu 配置 ftp freemind adb
    vs2012设置默认的全局include和lib
  • 原文地址:https://www.cnblogs.com/BobSky/p/3110642.html
Copyright © 2011-2022 走看看