免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

了解Ajax

• 就是js這個(gè)語(yǔ)言和服務(wù)端交互的手段
• 無(wú)刷新的頁(yè)面請(qǐng)求處理
• 區(qū)分表單提交
  
  

Ajax
即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種創(chuàng)建交互式、快速動(dòng)態(tài)網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)，無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，Ajax 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。

發(fā)送一個(gè)Ajax請(qǐng)求

四個(gè)步驟：

1. 創(chuàng)建ajax對(duì)象

var xhr = new XMLHttpRequest();

2. 配置請(qǐng)求信息

xhr.open('GET','./01_data.php',true);
//xhr.open("請(qǐng)求方式","請(qǐng)求地址")
//請(qǐng)求地址： 相對(duì)路徑
//          絕對(duì)路徑  http://  https:// ===> 開發(fā)中比較常用的方式

3. 發(fā)送請(qǐng)求

xhr.send(null);

4. 接受響應(yīng)

// 用事件接收 level1 => 原始版本的ajax  ,  level2 => 進(jìn)階版本的ajax
// readystate  ajax狀態(tài)碼 
// change 改變
// 事件可能觸發(fā) 3-4 次
// 狀態(tài)碼有5個(gè)  0 1 2 3 4
// 4表示成功
xhr.onreadystatechange = function(){
    // 只要判定狀態(tài)即可，其他的情況不考慮
    if( xhr.readyState === 4){
        console.log(xhr.responseText)
    }
}

Ajax狀態(tài)碼

Ajax的狀態(tài)碼 有5個(gè) : 0 1 2 3 4

• 0:創(chuàng)建ajax對(duì)象成功
• 1:配置請(qǐng)求信息成功
• 2:響應(yīng)已經(jīng)回到瀏覽器
• 3:瀏覽器正在解析響應(yīng)體
• 4:響應(yīng)體解析完畢可以使用了

Ajax的兼容處理

• 1.創(chuàng)建ajax對(duì)象

var xhr = null;
    if(typeof XMLHttpRequest === "function"){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

• 2.發(fā)送請(qǐng)求

xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
            console.log(xhr.responseText);
        }
    }

封裝Ajax操作

ajax是異步程序,我們什么時(shí)候可以使用ajax加載回來的數(shù)據(jù)?

// ajax 兼容性良好的封裝;
function ajax( options ){
    // 默認(rèn)參數(shù);
    var _default = {
        type : "GET",
        url : "",
        data : null,
        // 返回的數(shù)據(jù)類型;
        dataType : "text",
        status : null,
        success : function(){},
        complete : function(){},
        error : function(){}
    }
    // 我們會(huì)創(chuàng)建一些默認(rèn)參數(shù), 如果用戶傳入了其他數(shù)據(jù)會(huì)對(duì)默認(rèn)參數(shù)進(jìn)行覆蓋;
    options = assign( _default , options );
    options.type = options.type.toLowerCase();
    // 如果存在context;
    if( isObject(options.context) ){
        var callback_list = ["success","complete","error"];
        // 如果老版本瀏覽器更新成for循環(huán);
        callback_list.forEach( function( item ){
            // console.log(options[item]);
            options[item] = options[item].bind( options.context );
        })
    }
    // 1. 創(chuàng)建xhr ;
    
    //創(chuàng)建ajax對(duì)象的兼容
    var xhr = null;
    if(typeof XMLHttpRequest === "function"){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    // 可以簡(jiǎn)化;
    // 1. 如果請(qǐng)求方式為get，那么我們把數(shù)據(jù)拼接到url上;
    if(options.type === "get"){
        options.url =  toUrlData( options.data , options.url , options.type)
    }
    // 2. 如果請(qǐng)求方式為post，那么我們把數(shù)據(jù)拼接到data上;
    if(options.type === "post"){
        options.data =  toUrlData( options.data , options.url , options.type)
    }
    
    // 2. 根據(jù)數(shù)據(jù)進(jìn)行方法的調(diào)用;
    xhr.open( options.type , options.url , true ) ;
    options.type === "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";
    // 3. 調(diào)用send方法;
    xhr.send( options.type=== "get" ? null : options.data );
    // 4. 調(diào)用回調(diào)函數(shù);
    xhr.onreadystatechange = function(){
        // xhr程序運(yùn)行結(jié)束;
        if( xhr.readyState === 4 ){
            options.complete();
            
            if( /^2\d{2}$/.test(xhr.status) ){
                // 5.傳遞數(shù)據(jù)
                // 如果需要轉(zhuǎn)換成json那么我們就返回json,如果不需要原樣返回;
                // 如果JSON.parse報(bào)錯(cuò)了那么我們要調(diào)用錯(cuò)誤函數(shù);
                try{
                    var res = options.dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText; 
                    options.success(res);
                }catch(e){
                    options.error(e,xhr.status);
                }
            }else{
                options.error("error",xhr.status);
            }
            // 策略模式調(diào)用 : 
            if( isObject(options.status) ){
                typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";
            }
        }
    }
}