自己封裝的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);
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM