JavaScript封装Ajax工具函数及jQuery中的ajax

封装ajax工具函数

/**
 * ITCAST WEB
 * Created by zhousg 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);
}

jQuery Ajax 操作函数

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

• jQuery为我们提供了更强大的Ajax封装
• $.ajax({}) 可配置方式发起Ajax请求
• $.get() 以GET方式发起Ajax请求
• $.post() 以POST方式发起Ajax请求
• $(‘form‘).serialize() 序列化表单（即格式化key=val&key=val）
• url 接口地址
• type 请求方式
• timeout 请求超时
• dataType 服务器返回格式
• data 发送请求数据
• beforeSend: function () {} 请求发起前调用
• success 成功响应后调用
• error 错误响应时调用
• complete 响应完成时调用（包括成功和失败）