JAVASCRIPT高程筆記-------JSON與AJAX

json對象——語法

　　　　簡單值：與JS相同語法，能夠是字符串，數值，布爾值，null；但不支持undefined

　　　　對象： 複雜數據類型，表示一組有序的鍵值對，鍵值對的值能夠是簡單數據，也能夠是複雜數據

　　　　數組：也是複雜數據類型，數組的值也能夠是簡單或者複雜類型

　　json字符串必需要使用雙引號

json對象方法  

　　　　JSON.stringify(js對象)，此方法接收一個或者兩個參數，第一個參數爲js對象並將其解析返回一個json對象 ，在解析過程當中，全部的函數及原型成員都會被有意忽略，此外值爲undefined的任何屬性也會被跳過，第二個參數爲解析規則能夠是數組也能夠是函數，若是是數組那麼只解析數組中包含的屬性，若是爲函數那麼根據函數的定義返回須要的值

var book = {
    title : "mysql clksx",
    authors : ["zhangsan","lisi"],
    edition : 3,
    year :2011
};
var jsonText = JSON.stringify(book);
console.log(jsonText); //{"title":"mysql clksx","authors":["zhangsan","lisi"],"edition":3,"year":2011}

var jsonText = JSON.stringify(book,["title","year","name"]);
console.log(jsonText); //{"title":"mysql clksx","year":2011}

var jsonText = JSON.stringify(book,function(key,value){
    switch(key){
        case "authors":
            return value.join("-");
        case "year":
            return 2017;
        default:
            return value;
    }
});
console.log(jsonText); //{"title":"mysql clksx","authors":"zhangsan-lisi","edition":3,"year":2017}

 

 

 

若是一個js對象自己擁有toJSON方法 那麼序列化時就默認調用此方法 

var book = {
    title : "mysql clksx",
    authors : ["zhangsan","lisi"],
    edition : 3,
    year :2011,
    toJSON : function(){
        return this.title;
    }
};
var jsonText = JSON.stringify(book);
console.log(jsonText);//"mysql clksx"

 

json.stringify()的序列化順序爲： 第一步——查找被序列化的對象的toJSON方法，而且是能取到有效的值，則調用該方法！不然默認順序執行序列化

　　　　　　　　　　　　　第二步——若是提供了第二個參數，應用這個函數過濾器，那麼傳入這個函數過濾器的值是第一步返回的值

　　　　　　　　　　　　　第三步——對第二步返回的值進行序列化

　　　　　　　　　　　　　第四步——若是提供了第三個參數，那麼將第三步的值進行格式化

JSON.parse() 方法    ---將一個字符串解析成JSON對象    第一個參數爲字符串  第二個參數爲解析函數，以下示例

var book = {
    title : "mysql clksx",
    authors : ["zhangsan","lisi"],
    edition : 3,
    year : 2011
    
};
console.log(book.title);
var jsonText = JSON.stringify(book);
console.log(jsonText);

var bookCopy = JSON.parse(jsonText,function(key,value){
    if(key == "title"){
        return "mysql 從零開始學";
    }else{
        return value;
    }
});
console.log(bookCopy.title); //mysql 從零開始學

 

 

AJAX ——Asynchronous Javascript And XML    

　　XMLHttpRequest對象的用法

　　　　　　IE7 以及其餘的瀏覽器   建立XHR 對象的方式  var xhr = new XMLHttpRequest()；

　　　　　　open()——此方法接收三個參數， 第一個參數爲 請求的方法如（get，post等），第二個參數爲請求的URL，第三個參數爲是否異步發送請求的布爾值    以下示例

　　　　　　　　xhr.open("get","xxx.jsp",false);

　　　　　　　　xhr.send(null);

　　　　　　注意的是open方法並非直接發送請求，而是建立一個請求等待發送，send方法接收發送請求的參數若沒有參數則必須傳遞null值，因爲此處代碼是同步的會等到服務器響應以後在繼續執行！收到響應後會自動填充到XHR對象的屬性中

　　　　　　　　responseText：做爲響應主體被返回的文本

　　　　　　　　responseXML：若是響應的內容是「text/xml」或者「application/xml」，那麼這個屬性中保存的是響應回來的XML DOM文檔

　　　　　　　　status ： 響應的HTTP狀態碼

　　　　　　　　statusText ： HTTP狀態的說明

　　　　異步發送的檢測《xhr的readState屬性》　，在異步發送的果過程當中，這個屬性反映了請求和響應過程的狀態變化，此屬性的值有以下

　　　　　　0： 未初始化，還沒有調用open方法

　　　　　　1： 啓動，調用了open方法，但爲調用send方法

　　　　　　2：發送，已經調用了send方法，但未收到迴應，

　　　　　　3：正在接收響應，已經接收了部分響應內容

　　　　　　4： 響應接收完畢，可使用響應的數據

　　此屬性每次發生變化都會觸發readystatechange事件，不過要在xhr對象調用open方法前指定事件處理函數，一個完整的例子

var  xhr = new XMLHttpRequest();
xhr.readystatechange  = function(){
    if(xhr.readyState == 4){  
        if((xhr.status >= 200 && xhr.status < 300 ) || xhr.status == 304 ){
            alert(xhr.responseText);
        }else{
            alert("error");
        }
    }
}
xhr.open("get","xxx.jsp",true);
xhr.send(null);

 

　　　　　　 

 HTTP頭部信息  

　　　　Accep：瀏覽器能處理的內容類型

　　　　Accep-charset ： 瀏覽器能顯示的字符集

　　　　Accep-Encoding ： 瀏覽器可以處理的壓縮編碼

　　　　Accep-Language：瀏覽器能當前設置的語言

　　　　Connection：瀏覽器與服務器之間鏈接的類型

　　　　Cookie：當前頁面設置的任何Cookie

　　　　Host：發出請求的頁面所在的域

　　　　Referer：發出請求的頁面URI

　　　　User-agent ： 瀏覽器的用戶代理字符串

在調用open方法以後而且在調用send方法以前 能夠設置HTTP頭部信息  ，建議使用自定義頭部信息，以便服務器進行解析！

xhr.getResponseHeader()方法 指定頭部名稱能夠獲取相應的服務器響應信息

xhr.getAllResponseHeaders()  能夠獲取全部的HTTP頭部服務器響應信息

get請求----將請求參數名稱和值直接添加在url末尾的一個請求方式

因爲gei請求常常會由於字符串格式發生意外，建議使用以下函數進行url編碼

function addURLParam(url,name,value){
    url += (url.indexOf("?")) == -1 ? "?" : "&";
    url += encodeURIComponet(name) + "=" + encodeURIComponet(value);
    return url;
}

 

post請求 - 在send方法中傳入參數字符串或者是xml文檔，一個post請求的示例

xhr.open("post","xxx.jsp",true);
xhr.send("name=zhangsan&age=18");

 

post 與get請求的區別

　　Get是向服務器發索取數據的一種請求，而Post是向服務器提交數據的一種請求

　　長度問題--受限於瀏覽器以及服務器 大多數對get請求有長度限制，而post則沒有

　　安全問題--get請求是明文請求，其參數直接反映在瀏覽器的地址欄上，而且get請求能夠被緩存，而post沒法緩存以及參數被隱藏在http請求中

 

formData對象   用於簡化xhr進行操做的一個類型  ， 建立一個formData對象  而後調用其append方法 就能夠很方便的添加參數內容  ，在send方法中之間傳入這個formData對象實例，使用formData的好處是沒必要明確的設置請求頭部信息，XHR對象能正確識別formData對象並配置合適的頭部信息

超時設定  timeout屬性  能夠設置請求的超時時間默認單位毫秒

overrideMimeType()方法  此方法用於重寫XHR響應的MIME類型，此方法也必須在send方法以前進行調用，以下所示，就是告知XHR對象將響應的內容看成XML文檔進行處理，支持的瀏覽器有谷歌，火狐，opera，safari4+

var  xhr = new XMLHttpRequest();
xhr.open("post","xxx.jsp",true);
xhr.overrideMimeType("text/xml");
xhr.send("name=zhangsan&age=18");

 

　　 

 跨資源共享 CORS　　 定義了在必須訪問跨源資源時，瀏覽器與服務器如何溝通！ 就是經過自定義的HTTP頭部信息讓瀏覽器和服務器進行決定是否請求成功或是響應成功

 　　　　IE對CORS的支持，IE8中引入了XDR對象*（XDomainRequest）類型，XDR與XHR的不一樣之處   XDR請求 ：cookie 不會隨請求發送，也不會隨響應返回，只能設置請求頭的content-type字段，不能訪問響應頭部信息，只支持get和post請求

　　　　　　xdr.open() 只接收兩個參數：請求類型和URL，全部的XDR請求都是異步的，不能建立同步請求，請求返回後，會觸發load事件，響應的數據也會保存在responseText屬性中

　　　其餘瀏覽器的支持，都是經過XHR對象進行跨域訪問，只要傳入絕對地址的URL便可； 其餘瀏覽器能夠訪問status和statusText屬性，而且支持同步請求，   也一樣存在一些限制

　　　　　　不能使用setRequestHeader設置自定義頭部，不能接收和發送cookie，調用getAllResponseHeaders()方法會返回空字符串

 

其餘跨域技術 

 　　圖片img  利用img的src屬性進行頁面與服務器的單向通信，以下代碼所示，只要請求完成就能獲得通知！圖片Ping最經常使用於跟蹤用戶點擊頁面或者動態廣告曝光次數，缺點：第一隻能get請求  全部的src都是get請求，第二點沒法訪問服務器響應文本

var  img = new Image();
img.onload = img.onerror = function(){
    alert("done")
}
img.src = "https://www.zhihu.com/question/19618769";

 

 

 　　jsonp——由兩部分組成：回調函數和數據。回調函數是當響應回到頁面時要調用的函數（通常在請求中指定），而數據則是傳入回調函數中的json數據,　　簡單來講就是預約義函數體和參數內容，當並不當即執行，由跨域請求後返回的js代碼和參數進行調用

優勢：可以直接訪問響應文本，支持瀏覽器服務器的雙向通信，而缺點則是若是其餘域返回惡意代碼，沒有辦法進行追究，其次要肯定jsonp的請求是否失敗並不肯定，不過HTML5中增長了script標籤的onerror事件處理程序用於處理script標籤的是否加載

function handleResponse(response){
    alert(response);
}     //handleResponse回調函數
var script  = document.createElement("script");
script.src = "xxx.jsp?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

 

 

 comet ——一種服務器向頁面推送數據的技術，長輪詢和流

　　長輪詢： 頁面發起一個到服務器的請求，而後服務器一直保持鏈接打開，直到有數據發送，發送完畢後瀏覽器關閉鏈接，隨即又發起一個新的請求

　　HTTP流： 瀏覽器向服務器發送一個請求，而服務器保持鏈接打開，而後週期性的向瀏覽器發送數據。

web sockets ——在一個單獨的持久鏈接上提供雙全工，雙向通信！在js中建立了web sockets 以後會有一個http請求發送到瀏覽器以發起鏈接，在得到服務器響應後，創建的鏈接會將http協議交換爲web socket協議 該協議以wss://開頭

//建立web socket 
 var socket = new WebSocket("xxx.jsp");
 socket.send("hello world");  //發送簡單數據
 var  message = {
     time : new Date(),
     text : "helo world !",
     id : 1
 };
 socket.send(JSON.stringify(message)); //發送複雜數據
 
 socket.onmessage = function(event){   //接收處理服務器返回的數據
     var data = event.data;
     //coding.....處理數據
 }

 

 web socket 對象的狀態  

　　　　　　WebSocket.opening（0） ： 正在創建鏈接

　　　　　　WebSocket.open（1） ：鏈接創建完成

　　　　　　WebSocket.closeing（2） ：正在關閉鏈接

 　　　　　　WebSocket.close（3） ：已經關閉鏈接

WebSocket的其餘事件

　　　　WebSocket.open : 在成功創建鏈接時觸發

 　　　　WebSocket.error：在發生錯誤時觸發，鏈接不能持續

　　　　WebSocket.close： 在鏈接關閉時觸發（而且此事件附帶三個額外屬性）

 socket.close = function(event){
     console.log(event.wasClean);    //布爾值，表示鏈接是否已經明確關閉
     console.log(event.code);        //服務器返回的數值碼狀態，
     console.log(event.reason);        //字符串，包含服務器返回的消息
 }