ที่ load จาก domain หนึ่ง access ไปยังอีก domain หนึ่ง
โดยมี JSON เป็น format ในการรับส่งข้อมูล
service ที่จะทดลองเรียกใช้ก็คือ Yahoo! Search Web Services
search service ของ yahoo ปกติจะ return เป็น xml format
แต่เราสามารถระบุ option เพื่อให้ใช้ return เป็น JSON format ได้
(อ่านเอกสาร Using JSON with Yahoo!)
ขั้นแรกก่อนที่จะใช้ search service
เราก็ต้องสมัครขอใช้ service ก่อน
หลังจากสมัครแล้ว เราจะได้ appid มาตัวหนึ่ง
ซึ่งจะใช้เป็น parameter ในการเรียกใช้ service
หน้าจอที่ทดลองทำจะเป็นแบบนี้
เริ่มด้วย html body ของเราหน้าตาแบบนี้
<body>
<form action="#">
<input type="text" name="qry" id="qry"/>
<input type="submit" value="search" onclick="search();return false;"/>
</form>
<div id="list">
</div>
</body>
โดยเมื่อ submit ก็จะเรียกใช้ function
searchfunction search() {
var id='yahoo';
var url='http://api.search.yahoo.com/WebSearchService/V1/webSearch?output=js
on&callback=updateList&appid=YOUR_APPID&query=';
oScript = document.getElementById(id);
var head = document.getElementsByTagName("head").item(0);
if (oScript) {
head.removeChild(oScript);
}
var qry = document.getElementById('qry');
var reqURL = url + encodeURIComponent(qry.value);
oScript = document.createElement("script");
oScript.type = 'text/javascript';
oScript.setAttribute("src", reqURL);
oScript.setAttribute("id", id);
head.appendChild(oScript);
}
สิ่งที่พิเศษใน function search ก็คือ วิธีการ call
เนื่องจากเราไม่สามารถใช้ xmlhttprequest connect ไปยัง domain อื่นๆ
นอกเหนือจาก domain ที่ javascript นั้น load มา
trick หนึ่งท่ีนิยมใช้ ก็คือ การใช้ javascript
dynamic สร้าง <script> dom object ขึ้นมา
และ add มันเข้ากับ <head> element
โดย web service ที่ให้บริการแบบนี้ได้ จะต้องผ่านข้อมูลกลับมา
ในรูปแบบของ javascript
ซึ่งก็เข้าทางกับ JSON notaion พอดี
ใน Yahoo Search Service เราสามารถระบุ parameter
output=json เพื่อให้ pass format กลับมาในรูป JSONและระบุ
callback=functionNameเพื่อให้ script ที่ pass กลับมาทำการเรียกใช้ javascript function ของเรา
ตัวอย่างของ ข้อมูลที่ส่งกลับมาจาก Yahoo Search Service
updateList({"ResultSet":
{"totalResultsAvailable":"17899065",
"totalResultsReturned":"10",
"firstResultPosition":"1",
"Result":[
{"Title":"Java.com",
"Summary":"official Java site from Sun. ....",
"Url":"http:\/\/www.java.com\/",
"ClickUrl":"http:\/\/www.java.com\/",
"ModificationDate":"1134806400",
"MimeType":"text\/html",
"Cache":{...}
},
....
}
}
callback function ของเรา หน้าตาแบบนี้
function updateList(results) {
var ul = document.createElement('ul');
for (var i=0, link; link = results.ResultSet.Result[i]; i++) {
var li = document.createElement('li')
var a = document.createElement('a')
a.setAttribute('href', link.ClickUrl)
a.appendChild(document.createTextNode(link.Title))
li.appendChild(a)
ul.appendChild(li)
}
var listBlock = document.getElementById('list');
if (listBlock.hasChildNodes()) {
listBlock.replaceChild(ul, listBlock.firstChild);
} else {
listBlock.appendChild(ul);
}
}
การทำงานก็คือ เมื่อได้ข้อมูลกลับมา ก็จัดการ render
ลงบน div block ที่ชื่อ list
Note:
- ยังไม่ลองใน IE ,ลองแต่ใน firefox กับ safari
No comments:
Post a Comment