JavaScript封裝Ajax工具函數及jQuery中的ajax

標籤：app   for   option   javascrip   state   載入   seh   .post   read   

 封裝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 響應完成時調用（包括成功和失敗）

JavaScript封裝Ajax工具函數及jQuery中的ajax