雖然已經有很多網站有介紹過了,但還是想自己筆記一下
最主要是一個特殊的點, 就是當我們要處理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 ),這是利用-->
上面這個範例,會從wickedlysmart 網站去要回一段資料內容,並傳入給animalSays進行呼叫,最後產生一個animalSays("cat","meow"); 的函數組成並呼叫,這裡的原理主要是在 js當中是直接寫了一整段的呼叫內容 -- animalSays("cat", "meow");
當http get request 去要這段srcipt src的時候,就等於是直接呼叫本地端的函數,而資料內容則是由遠端所提供,如此一來便完成了跨網域的呼叫作業。
雖然這樣做了,能夠解決掉跨網域的問題,但本質上,
沒有留言:
張貼留言