• ajax请求封装


    /**
     * 对封装好的ajax请求进行调用
     * */
    ajax({
        url:"", //请求地址
        type:'GET',   //请求方式
        data:{name:'zhangsan',age :'23',email:'2372734044@qq.com'}, //请求参数
        dataType:"json",     // 返回值类型的设定
        async:false,   //是否异步
        success:function (response,xml) {
            console.log(response);   //   此处执行请求成功后的代码
        },
        fail:function (status) {
            console.log('状态码为'+status);   // 此处为执行成功后的代码
        }
    
    });
    function ajax(options) {
        /**
         * 传入方式默认为对象
         * */
        options = options || {};
        /**
         * 默认为GET请求
         * */
        options.type = (options.type || "GET").toUpperCase();
        /**
         * 返回值类型默认为json
         * */
        options.dataType = options.dataType || 'json';
        /**
         * 默认为异步请求
         * */
        options.async = options.async || true;
        /**
         * 对需要传入的参数的处理
         * */
        var params = getParams(options.data);
        var xhr;
        /**
         * 创建一个 ajax请求
         * W3C标准和IE标准
         */
        if (window.XMLHttpRequest){
            /**
             * W3C标准
             * */
            xhr = new XMLHttpRequest();
        }else{
            /**
             * IE标准
             * @type {ActiveXObject}
             */
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4){
                var status = xhr.status;
                if (status >= 200 && status < 300 ){
                    options.success && options.success(xhr.responseText,xhr.responseXML);
                }else{
                    options.fail && options.fail(status);
                }
            }
        };
        if (options.type == 'GET'){
            xhr.open("GET",options.url + '?' + params ,options.async);
            xhr.send(null)
        }else if (options.type == 'POST'){
            /**
             *打开请求
             * */
            xhr.open('POST',options.url,options.async);
            /**
             * POST请求设置请求头
             * */
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            /**
             * 发送请求参数
             */
            xhr.send(params);
        }
    }
    /**
     * 对象参数的处理
     * @param data
     * @returns {string}
     */
    function getParams(data) {
        var arr = [];
        for (var param in data){
            arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
        }
        console.log(arr);
        arr.push(('randomNumber=' + Math.random()).replace('.'));
        console.log(arr);
        return arr.join('&');
    }
    
    // myAjax
    var myAjax = (function(){
      var defaultOption = {
        url: false,
        type: 'GET',
        data: null,
        success: false,
        complete: false
      }
    
      var ajax = function(options){
        for(var i in defaultOption){
          options[i] = options[i] || defaultOption[i];
        }
        // http 对象
        var xhr = new XMLHttpRequest();
        var url = options.url;
        xhr.open(options.type, url);
        // 监听
        xhr.onreadystatechange = function(){
          if(xhr.readyState == 4){
            var result, status = xhr.status;
            if(status >= 200 && status < 300 || status == 304){
              result = xhr.responseText;
              if(window.JSON){
                result = JSON.parse(result);
              }else{
                result = eval('(' + result + ')');
              }
              ajaxSuccess(result)
            }
          }
        }
        // post
        if(options.type.toLowerCase() === 'post'){
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode');
        }
        xhr.send(options.data);
    
        function ajaxSuccess(data){
          var status = 'success';
          options.success && options.success(data, options, status, xhr);
          options.complete && options.complete(status);
        }
      }
      // 闭包返回
      return ajax;
    })()
    
    var success = function(data){
      console.log(data['blog'])
    }
    var complete = function(status){
      if(status == 'success'){
        console.log('success')
      }else{
        console.log('failed')
      }
    }
    myAjax( {
      url: 'https://api.github.com/users/songjinzhong',
      success: success,
      complete: complete
    } );
    
  • 相关阅读:
    开发进度二
    开发进度一
    大道至简阅读笔记01
    用户模板和用户评价
    第九周总结
    第八周总结
    NABCD项目分析
    第七周总结
    第六周总结
    构建之法阅读笔记03
  • 原文地址:https://www.cnblogs.com/fazero/p/10551934.html
Copyright © 2020-2023  润新知