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

Posted 2020-09-20

 封装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()	执行异步 HTTP (Ajax) 请求。
.ajaxComplete()	当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxError()	当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSend()	在 Ajax 请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的 Ajax 请求的默认值。
.ajaxStart()	当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxStop()	当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。
.ajaxSuccess()	当 Ajax 请求成功完成时显示一条消息。
jQuery.get()	使用 HTTP GET 请求从服务器加载数据。
jQuery.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码数据。
jQuery.getScript()	使用 HTTP GET 请求从服务器加载 javascript 文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到 HTML 放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在 URL 查询字符串或 Ajax 请求中使用。
jQuery.post()	使用 HTTP POST 请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回 JSON 数据结构数据。

• 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 响应完成时调用（包括成功和失败）