zoukankan      html  css  js  c++  java
  • 封装简单的Ajax

    调用请求:

    var obj = {
        url:"",           //url地址  例如:test.php
        method:"",     //get或post(大小写不限)    例如:get
        async:true,     //true:异步请求 false:同步请求   默认true
        data:{          //所需要传输的数据(被注释内容为测试所用)
            // name:"战斗机",
            // age:20,
            // husband:null,
            // arr:["one","two","three"],
            // dimensional:{
            //     bust:100,
            //     waist:60,
            //     hipline:90
            // } 
        },
        success:function (res) {         //传输成功的回调函数
            //console.log(res)
        },
        fail:function (res) {          //失败的回调函数
    
        }
    }
    myAjax(obj);

    封装函数:

    //myAjax()
    function myAjax(obj) {
        // 1.创建http请求
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //兼容IE7+,firefox,chrome, opera, safari
            xmlhttp = new XMLHttpRequest();
        }else{
            //兼容IE6,IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 1.1声明变量
        var fangShi = obj.method.toUpperCase();
        var url = obj.url;
        var async = true;
        if(obj.async == false){
            async = false;
        }
        console.log(async);
        // 1.2遍历传输内容
        var data = "";           //data内容重组
        (function props(a){
            for(var prop in a){
                if (a.hasOwnProperty(prop)) {
                    // console.log(prop);
                    // console.log(a[prop]);
                    
                    if (a[prop] instanceof Object && !(a[prop] instanceof Array)) {
                        props(a[prop]);
                    }else{
                        // 遍历出来后如果不是对象则进行拼接
                       data += prop + "=" + a[prop] +"&";
                    }
                }
            }  //for end
            return data;
        }(obj.data))
    
        // 2.发起请求
        if (fangShi == "GET") {        //get请求
            xmlhttp.open(fangShi, url + "?" + data, async);
            xmlhttp.send();
        }else if (fangShi == "POST") {            //post请求
            xmlhttp.open(fangShi, url, async);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send(data);
        }else{
            alert("请求方式不在支持范围")
        }
        // 3.接受数据
        xmlhttp.onreadystatechange = function(){
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var resp = JSON.parse(xmlhttp.responseText);
                obj.success(resp);
            }else{
                obj.fail(resp);
            }
        }
    }

    返回值的数据类型不够齐全,如有需要再做修改

  • 相关阅读:
    编程题目分类
    sicily 1010 Zipper DP
    Sicily 2501. 算算式
    続・いいかげんにして! 日本企業─理不尽な態度
    いいかげんにして! 日本企業─中国に嫌われる理由
    中国オフショア開発の失敗を減らす組織的対策とは?
    中国オフショア開発の成功と失敗の実態
    そんな指示じゃできません!中国企業の叫び
    【Postgres】dump数据库备份与还原
    PMP考试相关
  • 原文地址:https://www.cnblogs.com/xihailong/p/11647476.html
Copyright © 2011-2022 走看看