zoukankan      html  css  js  c++  java
  • 自己封装的ajax

    /**
     * ITCAST WEB
     * Created by lsy on 2016/5/24.
     */
    /*
     * 1. 请求的类型                type    get post
     * 2. 请求地址                  url
     * 3. 是异步的还是同步的         async   false true
     * 4. 请求内容的格式            contentType
     * 5. 传输的数据                data    json对象
     *
     * 6.响应成功处理函数           success   function
     * 7.响应失败的处理函数         error     function
     *
     * 这些都是动态参数  参数对象  options
     * */
    
    /*封装一个函数*/
    window.$ = {};
    /*申明一个ajax的方法*/
    $.ajax = function(options){
    
        if(!options || typeof options != 'object'){
            return false;
        }
    
        /*请求的类型*/
        var type = options.type || 'get';/*默认get*/
        /*请求地址 */
        var url = options.url || location.pathname;/*当前的地址*/
        /*是异步的还是同步的 */
        var async = (options.async === false)?false:true;/*默认异步*/
        /*请求内容的格式 */
        var contentType = options.contentType || "text/html";
    
        /*传输的数据 */
        var data = options.data || {};/*{name:'',age:''}*/
        /*在提交的时候需要转成 name=xjj 这种格式*/
    
        var dataStr = ''/*数据字符串*/
    
        for(var key in data){
            dataStr += key+'='+data[key]+'&';
        }
    
        dataStr = dataStr && dataStr.slice(0,-1);
    
        /*ajax 编程*/
        var xhr = new XMLHttpRequest();
    
        /*请求行*/
        /*(type=='get'?url+'?'+dataStr:url)判断当前的请求类型*/
        xhr.open(type,(type=='get'?url+'?'+dataStr:url),async);
    
        /*请求头*/
        if(type == 'post'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        }
    
        /*请求主体*/
        /*需要判断请求类型*/
        xhr.send(type=='get'?null:dataStr);
    
        /*监听响应状态的改变  响应状态*/
        xhr.onreadystatechange = function(){
            /*请求响应完成并且成功*/
            if(xhr.readyState == 4 && xhr.status == 200){
                /*success*/
                var data = '';
                var contentType = xhr.getResponseHeader('Content-Type');
                /*如果我们服务器返回的是xml*/
                if(contentType.indexOf('xml') > -1){
                    data = xhr.responseXML;
                }
                /*如果我们的服务器返回的是json字符串*/
                else if(contentType.indexOf('json') > -1){
                    /*转化json对象*/
                    data = JSON.parse(xhr.responseText);
                }
                /*否则的话他就是字符串*/
                else{
                    data = xhr.responseText;
                }
    
                /*回调 成功处理函数*/
    
                options.success && options.success(data);
            }
            /*计时请求xhr.status不成功  他也需要的响应完成才认作是一个错误的请求*/
            else if(xhr.readyState == 4){
                /*error*/
                options.error && options.error('you request fail !');
    
            }
    
        }
    }
    $.post = function(options){
        options.type = 'post';
        $.ajax(options);
    }
    $.get = function(options){
        options.type = 'get';
        $.ajax(options);
    }
  • 相关阅读:
    箭头函数的this、arguments详解
    webpack笔记
    关于proxy反向代理如何解决跨域问题的前世今生
    前端基础修炼日志(一):js内存管理机制
    前后端分离下的跨域问题以及CSRF攻击
    ES6之Promise
    浏览器缓存机制深入理解与实践(二):预加载
    浏览器缓存机制深入理解与实践(一)
    Go开发中的十大常见陷阱[译]
    网站必备之简繁切换功能实现
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5932337.html
Copyright © 2011-2022 走看看