AJAX筆記

【xhr.readyState】

• 0: 請求未初始化
• 1: 服務器鏈接已創建
• 2: 請求已接收
• 3: 請求處理中
• 4: 請求已完成，且響應已就緒

【AJAX標準寫法】(記憶)

// 建立xhr
    if(window.XMLHttpRequest){            //  5種判斷方式（window,typeof,try-catch,in,判斷瀏覽器）
        var xhr = new XMLHttpRequest();
    } else {
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
// 鏈接
    xhr.open("get",url,true);
// 發送
    xhr.send();
// 接收
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){  
            alert(xhr.responseText);    // 返回文本內容
        } else {
            alert(xhr.status)        // 若是前面有錯誤則返回404
        }
        }
    }

【jsonp封裝注意地方】(url,data,cbName,success,error,timeout)

function jsonp(options){
    options = options || {};
    
    if(!options.url) return;
    options.data = options.data || {};
    options.cbName = options.cbName || "cb";   // 不一樣的搜索引擎的回調函數不同 百度 "cb" 360 "callback"
    options.timeout = options.timeout || 0;
    
    var fnName = ("jsonp_" + Math.random()).replace(".","");   // 給回調函數添加隨機因子
    
    var arr = [];
    options.data[options.cbName] = fnName;     // 添加回調函數
    for(var name in options.data){
        arr.push(name + "=" + encodeURIComponent(options.data[name]));
    }
    var str = arr.join("&");
    
    //2 全局函數
    window[fnName] = function(json){    // window[fnName]爲全局函數，局部函數聲明全局變量用window好維護
                        // 這裏的json，是fnName這個回調函數返回過來的數據（默認）
    
        options.success && options.success(json);
        window[fnName] = null;        // 把函數清空，釋放內存，減小瀏覽器性能的消耗
        oHead.removeChild(oS);        // 每次調用全局函數，清除head頭裏面的script標籤
        clearTimeout(timer);
    };
    
    //1 建立script
    var oS = document.createElement("script");
    oS.src = options.url + "?" + str;
    var oHead = document.getElementsByTagName("head")[0];
    oHead.appendChild(oS);
    
    if(options.timeout){
        var timer = setTimeout(function(){
            options.error && options.error();
            window[fnName] = function(){};        // 接受超時，要把全局函數賦值爲空函數，否則會報錯
            oHead.removeChild(oS);
        },options.timeout);
    }
}

【ajax的上傳方式get post】
一、 get : 有緩存    post : 沒緩存（相對安全，信息不會暴露在地址欄）

【表單】(刷新整個頁面)
一、表單三要素   （一）action:地址 （二）name:上傳的名字  （三）value:上傳的值

二、method ---------  get:  數據在地址欄上顯示   不安全  32K   
             post:  數據隱藏        相對安全    1G

【緩存問題】
一、緩存： 瀏覽器對同一個的地址只會訪問一次，再次加載也是從新記錄上一次的東西 （IE緩存嚴重）

   解決： 讓地址不同     -----------------------（1）添加隨機數   t=Math.random();
               -----------------------（2）時間戳 new Date().getTime();

【try catch】(通常不用，性能差)
一、try{
    // 可能出錯代碼
   } catch(e){
    // 補救代碼
   }

    catch裏的e參數  必須有，獲取報錯信息

【typeof特殊用法】12.22

一、  

 console.log(a)           // 報錯
    console.log(typeof a);     // 返回undefine，但不報錯

*************用於兼容判斷IE，不報錯

二、（面試）

console.log(typeof (typeof a))    //   string 

【後臺文件傳過來的json的一些注意事項】
一、後臺傳輸過來的數據必定是string類型，若是要經過JS接收後臺數據就要轉換指定的類型  eval('('+json+')'); (jq方法接收數據不能用eval，否則會報錯)

JSON.parse(json字符串)】
二、AJAX解析後臺資源，經過JSON.parse（）轉換  等同於  eval("("+json+")")，後者動態函數，要作賦值操做，否則報錯;

json轉string】
    二、JSON.stringify(json);     (固定寫法)但不兼容IE 6 7

json轉num】
    三、eval('('+json+')');       // 由於json是大括號包着，但有大括號系統會去尋找上邊的是否缺乏東西如是否缺乏for function if等語句，會報錯
                          // 因此要在json外面添加（json）

json標準格式】
    四、  屬性名必須是雙引號，值若是是字符串也要雙引號，但若是要用單引號的話，外面要用轉義字符/'abc/'

【undefined 和 not defined】
一、    undefined是JavaScript語言中定義的五個原始類中的一個，換句話說，undefined並非程序報錯，而是程序容許的一個值。

    not defined是javascript在運行咱們的javascript代碼時，遇到沒有定義就用來運算的變量或者變量是個方法時報出來的錯誤。

【編碼方式】
一、編碼  encodeURIComponent('str')'   中文編碼成ASCII碼

一、解碼  decodeURIComponent('%21%323%234')'   

    地址欄裏面只能是ASCII編碼組成，若是有中文要進行編碼操做

【HTTP狀態碼】 三個數字組成 第一位表明類型

1XX 請求已經接受，正在處理
2XX 成功
3XX 重定向  （3之內只有304成功（第二次打開瀏覽器，會把本身第一次的緩存與服務器相關的東西的最後修改時間進行對比，若是相等就返回304））
4XX 錯誤        --------->前臺錯誤
5XX 服務器錯誤        --------->後臺錯誤  （503錯誤，服務器超載，內存被塞滿，例子：12306太大訪問量，就會出現503錯誤）

【eval】
一、標準格式  eval("("+str+")")

【replace】
一、字符串替換    str.replace("被替換的字符串"，"替換者")

【80端口】
一、全部網頁都默認是80端口

【jsonp】
一、JSONP(JSON with Padding)是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。

寫法：一、建立一個script標籤
      二、定義一個全局函數

跨域:只要域名 端口 協議任意一個不一樣就算跨域  （後臺不存在跨域問題，只有前臺）前端跨域時，數據必須有名接受，沒名字的數據前端拿不了，只能經過後臺中轉

網址的組成:

 http://  www       .520it     .com      :80    /index.html
 協議     二級域名  一級域名   域名後綴  端口    資源地址

ajax跨域解決方法（逐步深刻理解跨域實現原理）
1. Script的src方式加載js文件（script能夠引入任意的文件(經過script引入地址的方式獲取其餘服務器上的信息)）
2. 加載的js文件內進行函數調用
3. 數據以函數參數的形式傳遞
4. 回調函數中獲取參數數據（回調函數就是下面的show把json的東西返回給頁面）

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaa&cb=show

wd: word 關鍵字
cb: callback 回調函數

<img>標籤的src不用經過appendChild() 就能夠訪問src地址
<script>等其餘標籤  都不能 必須添加

【ajax與jsonp是兩回事】

【window a】
一、  在局部函數內定義全局變量  用window去定義，在局部函數裏這樣寫容易維護

(前提要調用局部函數，纔會產生全局變量)

*************************************************************************************

二、 eg

function a(){
  var b = 3;        var 一直爲局部變量
  console.log(b);
}
a();  
console.log(b);         //最後打印1,而後報錯

 

function a(){
  window.b = 3;        window.b 要調用後才能爲全局變量
  console.log(b);
}
a();  
console.log(b);    //最後打印1,1

function a(){
  window.b = 3;        window.b 要調用後才能爲全局變量
  console.log(b);
}
console.log(b);
a();  
console.log(b);        //最後報錯

【綁定】(綁定多個事件)
（false：表明冒泡    true：表明捕獲   （瀏覽器事件流就是指冒泡，捕獲））
一、obj.addEventListener("事件名"，函數,false)     // IE 9+ 

    eg: document.addEventListener("click",fn,false);

二、obj.attachEvent("onclick",fn)    // IE 6 7 8

【網絡延時】（onload 是 window img script的屬性）
一、能夠用obj.onload方法去包裹須要服務器返回的數據，但不兼容IE   ("onload" in obj)  判斷兼容方法

    IE用obj.onreadystatechange

二、由於JS是先加載頁面的標籤和圖片後再執行 JS代碼， 若是window.onload = function(){ img.onload = function(){console.log(1);}};

    *********************不會讀取到console.log(1); 

【瀏覽器默認行爲與綁定解綁事件的混合使用】（詳看ajax第四天）
一、event.preventDefault    和  return false   均可以取消默認行爲

【事件委託】（提升效率，不用循環屢次）
一、原理：冒泡   （給對作事件的元素的最大父親添加對應事件,點擊子元素彈出指定元素）
event.srcElement    兼容chrome ie
event.target         兼容chrome oz

var oSrc = event.srcElement || event.target    

【target事件和currentTarget】（看本身做品1228事件委託內含高級排他）
一、target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，
    兩個的指向纔是同樣的， 而當處於捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（通常爲父級）。

二、target.id  、 target.tagName

eg:

ul.onclick = function(e){
    var e = e || event;
    var oSrc = e.target;
    var oSrcTagName = e.target.tagName;

    console.log(e.target.tagName)   // 返回點擊元素的標籤名
    console.log(e.target)           // 指點擊的元素
    console.log(e.currentTarget);   // 指ul

【AJAX是在瀏覽器和服務器之間架一層AJAX引擎做過濾，篩選】