作者s25g5d4 (死城盜賊)
看板Ajax
標題[心得] 這次換json...只是簡單的教學
時間Fri Sep 3 22:21:27 2010
http://s25g5d4.sg1010.myweb.hinet.net/json.htm
這次順便連XMLHttpRequest方法封裝一起講好了
先說方法封裝是偷來的...
function request(
url,
callback,
data)
{
var xmlHttp
= createXMLHTTPObject
();
//建立XMLHttpRequest物件
if (
! xmlHttp)
return;
var method
= (data)
? "POST" : "GET";
xmlHttp.open
(method,
url,
true);
//到這裡還沒傳出去喔
if (data)
{
xmlHttp.setRequestHeader
('Content-type',
'application/x-www-form-urlencoded');
}
xmlHttp.onreadystatechange
= function ()
{
if (xmlHttp.readyState
!= 4)
return;
//等於4時才代表請求完成
if (xmlHttp.status
!= 200 && xmlHttp.status
!= 304)
{
//HTTP 200代表請求成功 反之就未成功
alert
('HTTP請求錯誤 ' + xmlHttp.status
);
return;
}
var jsonObj
= eval
('(' + xmlHttp.responseText
+ ')');
//將取得的字串轉換為Object json的本質就是Object
//不過用eval會有安全性問題...可以用json.org提供的js去parse
//這邊會用eval是因為方便 而且我確定我的json不會有安全性問題
callback
(jsonObj);
}
if (xmlHttp.readyState
== 4)
return;
xmlHttp.send
(data);
//到這邊 請求才會送出去
}
function createXMLHTTPObject()
{
var XMLHttpFactories
= [
function () {
return new XMLHttpRequest
()},
function () {
return new ActiveXObject
("Msxml2.XMLHTTP")},
function () {
return new ActiveXObject
("Msxml3.XMLHTTP")},
function () {
return new ActiveXObject
("Microsoft.XMLHTTP")},
];
var xmlhttp
= false;
for (
var i
= 0; i
< XMLHttpFactories.length; i
++ )
{
try
{
xmlhttp
= XMLHttpFactories
[i
]();
}
catch (
e)
{
continue;
}
break;
}
return xmlhttp;
}
request
('1.json',
function (
response) {
//剛剛就說過了 json的本質就是Object(其實也可以是array 不過對js而言
//array也是Object) 所以把json當Object處理
document.write
('uFlag = ' + response.uFlag
+ '<br>');
document.write
('message = ' + response.message
);
}
);
--
(‵ˍ′)
「xxx，你看！哥哥要生氣了喔！你在不安靜的話，我就叫他來把你打死！」
-------------鴉雀無聲-------------- 15 minutes later...
(′╰╯‵)
「你看，那個哥哥現在的臉多慈祥」
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.172.87.195
※ 編輯: s25g5d4 來自: 218.172.87.195 (09/03 22:48)
※ 編輯: s25g5d4 來自: 218.172.87.195 (09/03 22:48)
※ 編輯: s25g5d4 來自: 218.172.87.195 (09/03 22:51)
1F：→ s25g5d4:還有陣列的玩法沒說到...不過太複雜的資料我傾向用XML 09/03 22:56
2F：→ s25g5d4:但是json確實在解析上非常的簡單 09/03 22:56
3F：→ s25g5d4:但是說到易讀易改還是XML勝出XDDD 09/03 22:56
4F：→ grence:我覺得 json樂勝，xml大又難parse; jsonp也是跨網域首選囧a 09/03 23:57
5F：→ s25g5d4:這樣寫下來確實有覺得json很好解析 囧~ 09/04 00:02
6F：→ s25g5d4:而且json做好縮排也是易懂...xml臭了嗎XD 09/04 00:03
7F：→ TonyQ:話說 jsonp 需要遠端server support , 這個可以拿出來討論 09/04 00:14
8F：→ TonyQ:對 jsonp 印象最深刻的它必須要給 callback value 09/04 00:14
9F：→ s25g5d4:T大上幾點的阿...我要去睡了 T大幫忙修程式碼@@" 09/04 00:15
10F：推 SHANGOYANYI:跨網域要遠端support才撈的到東西 其實是合理 09/04 00:36
11F：→ TonyQ:是啊 其實它也只是模擬 var xxxx ={} 的行為而已 09/04 00:41
12F：→ TonyQ:不過 jsonp 其實也不是個非常正式的標準，只是規格戰的一環 09/04 00:42
13F：推 tomin:好漂亮的彩色碼呀 你是苦功上色 還是只是複製貼上? 09/04 00:58
14F：→ Kelunyang:eval不是很安全，去下載json提供的js吧！ 09/04 17:34
15F：→ s25g5d4:不漂亮阿 我還改了三次= = 手工上的 09/04 20:14
16F：→ s25g5d4:eval是不安全 可是我遇設立場是json是自己弄得 不會有問題 09/04 20:15
17F：→ s25g5d4:恩...每次看總是會找到漏上色的地方 09/04 20:17
※ 編輯: s25g5d4 來自: 220.142.81.195 (09/04 20:20)
18F：→ s25g5d4:話說 談json能釣到比較多的人 xml都沒人要推 09/04 20:21
19F：→ s25g5d4:其實 我只有提到obj的用法 還有陣列的用法阿>\\< 09/06 00:45
20F：推 othree:記得用 json2.js 09/06 13:44