2013年9月11日 星期三

XHR 的基本操作

雖然已經有很多網站有介紹過了,但還是想自己筆記一下

最主要是一個特殊的點, 就是當我們要處理response的內容 並偵測http status code的時候,
用的是 request 物件,而非response ..而真實被回傳的資料,是放在 request.responseText裏頭的 !!

ex:

     request.open("GET",URL);
     request.send(data);
     request.onload = function(){

        if(request.status==200) {
             alert(request.responseText);
        }
    };

   request.onload() 是 XMLHttpRequest Level2 以後的版本才支持,對於舊版本的browser,
   則需要改用 request.onreadystatechange= function(){

                          if(request.readystate==4 && request.status==200) {
                               // balah ..
                          }
   }

再來說說這個XMLHttpRequest吧,很神奇,基本上這個被簡稱為xhr的物件阿,現在的處境是相當尷尬的,早年號稱可以拯救世界,一統www 的資料交換處理的XML資料格式,由於太過肥大臃腫,解析難度高被人所詬病,現在已經越來越多的JSON format 的資料交換大行其道,但這個XML prefix name ,卻也沒被拿掉,所以感覺上有點逗趣~

JSON的格式基本上是key:value format 字串形式 ,且同時都需要有雙引號包起來,這跟我習慣已久的 java coding rule有些不同,而操作上也相當容易...

JSON.stringify(object); // 將物件轉字串
JSON.parse(jsonString) //將字串轉物件

實際上,現在接收處理json的,我們仍然還是使用xhr來做訊息收發的 !!

XHR 能做的事情雖然多 但仍有其限制,一旦遇到跨網域的訊息要求傳遞時,這樣的需求就會過不了了,答案就是使用JSONP ( JSON with Padding ),這是利用