zoukankan      html  css  js  c++  java
  • 封装一个Ajax工具函数

    /*封装一个ajax工具函数*/

    window.$ = {};

    /*通过$定义一个ajax函数*/

    /*

    * 1. type   string   请求的方式  默认是get

    * 2. url    string   请求地址  接口地址

    * 3. async  boolean  默认的是true

    * 4. data   object   {}请求数据

    *

    * 5.success function  成功回调函数

    * 6.error   function  失败的回调函数

    * */

    $.ajax = function(options){

        if(!options) return false;

        /*options 参数传递*/

        var type = options.type || 'get';

        var url = options.url || location.pathname;

        var async = options.async === false ? false : true;

        var data = options.data || {};

        /*data 选要转化成  name=xjj&age=10*/

        var dataStr = '';

        for(var key in data){

            //console.log(data[key]);

            dataStr += key+'='+data[key]+'&';

        }

        /*如果就数据  就裁剪掉最后一个&*/

        dataStr = dataStr && dataStr.slice(0,-1);

        /*ajax 编程*/

        /*初始化*/

        var xhr = new XMLHttpRequest();

        /*请求行*/

        /*如果是get请求那么就要拼接数据在url后面 ?*/

        xhr.open(type,type == 'get'?url+'?'+dataStr:url,async);

        /*请求头*/

        /*如果是post请求需要设置 content-type application/x-www-form-urlencoded*/

        if(type == 'post'){

            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        }

        options.beforeSend && options.beforeSend();

        /*请求主体*/

        /*如果是post请求需要把数据字符传过去  否则是null*/

        xhr.send(type=='get'?null:dataStr);

        /*监听响应状态的改变*/

        xhr.onreadystatechange = function(){

            /*响应成功*/

            if(xhr.readyState == 4){

                if( xhr.status == 200){

                    /*处理响应成功函数*/

                    var result = '';

                    /*接受数据*/

                    /* json  xml  string*/

                    var contentType = xhr.getResponseHeader('Content-Type');

                    if(contentType.indexOf('xml') > -1){

                        /*服务端返回的是xml数据格式*/

                        result = xhr.responseXML;

                    }else if(contentType.indexOf('json') > -1){

                        /*服务端返回的是json数据格式*/

                        /*json字符串*/

                        var str  = xhr.responseText;

                        result = JSON.parse(str);

                    }else{

                        result = xhr.responseText;

                    }

                    /*调用回调函数*/

                    options.success && options.success(result);

                }

                /*响应失败*/

                else{

                    /*处理响应失败函数*/

                    options.error && options.error('request fail code' + xhr.status);

                }

                options.complete &&  options.complete();

            }

        }

    };

    $.get = function(options){

        options.type = 'get';

        $.ajax(options);

    };

    $.post = function(options){

        options.type = 'post';

        $.ajax(options);

    };

  • 相关阅读:
    Flask 入门
    Android studio 混淆打包
    Android----获取包名和sh1
    windows下 安装 rabbitMQ 及操作常用命令
    Nginx
    Linux安装mongoDB步骤和方法
    史上最简单的 SpringCloud 教程 | 终章
    idea 项目热部署设置
    JDK源码阅读顺序
    Linux常用命令
  • 原文地址:https://www.cnblogs.com/landofpromise/p/5719513.html
Copyright © 2011-2022 走看看