照慣例，這邊基於 封裝樣式處理 的成果，繼續將先前的Ajax相關操作封裝起來，成果如下，有興趣的直接看程式碼研究看看：
直接來看看使用這個程式庫，如何簡化 使用 GET 請求 中第二個範例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.5.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#url').blur(function() {
XD.get('GET-2.php', {url : XD(this).val()},
function(responseText) {
var message = '';
if(responseText === 'urlExisted') {
message = 'URL 已存在';
}
XD('#message').html(message);
}
);
});
});
</script>
</head>
<body>
新增書籤：<br>
網址：<input id="url" type="text">
<span id="message" style="color:red"></span><br>
名稱：<input type="text">
</body>
</html>
來看看如何簡化 傳送與接收 XML 中的範例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.5.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#category').change(function() {
XD.get('XML-1.php', {category : this.value},
function(responseXML) {
var select = XD('<select>')[0];
var options =
responseXML.getElementsByTagName('option');
XD.each(options, function(option) {
var value = option.getAttribute('value');
var text = option.firstChild.nodeValue;
if(navigator.userAgent
.indexOf('MSIE') === -1) {
select.add(new Option(text, value),
select.options[
select.options.length]);
}
else {
select.add(new Option(text, value),
select.options.length);
}
});
XD('#book').removeChilds().append(select);
},
'xml');
});
});
</script>
</head>
<body>
圖書：<br>
<select id="category">
<option>-- 選擇分類 --</option>
<option value="theory">理論基礎</option>
<option value="language">程式語言</option>
<option value="web">網頁技術</option>
</select><br><br>
採購：<div id="book"></div>
</body>
</html>
來看看如何簡化 傳送與接收 JSON 中的範例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
div {
color: #ffffff;
background-color: #ff0000;
border-width: 1px;
border-color: black;
border-style: solid;
position: absolute;
}
</style>
<script type="text/javascript" src="js/gossip-0.5.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
var searchXD = XD('#search').keyup(function() {
XD('div').each(function(element) {
XD(element).remove();
});
if(searchXD.val() === '') {
return;
}
XD.get('JSON-1.php',
{keyword : searchXD.val()}, function(keywords) {
if(keywords.length !== 0) {
var innerHTML = '';
XD.each(keywords, function(keyword) {
innerHTML += (keyword + '<br>');
});
var offset = searchXD.offset();
XD('<div>')
.html(innerHTML)
.css({
left : offset.left + 'px',
top : offset.top +
offset.offsetHeight + 'px',
width: offset.offsetWidth + 'px'
})
.appendTo(document.body);
}
}, 'json');
});
});
</script>
</head>
<body>
<hr>
搜尋：<input id="search" type="text">
</body>
</html>
來看看如何簡化 使用 JSONP 跨站請求 中的範例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.5.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#search').click(function() {
XD.jsonp({
url : 'http://api.flickr.com/services/' +
'feeds/photos_public.gne',
data : {
tagmode : 'any',
format : 'json',
tags : XD('#tags').val()
},
callback : function(data) {
var imagesXD = XD('#images').removeChilds();
XD.each(data.items, function(item) {
XD('<img>').attr('src', item.media.m)
.appendTo(imagesXD);
});
}
}, 'jsoncallback');
});
});
</script>
</head>
<body>
<input id="tags"><br>
<button id="search">搜尋</button>
<div id="images"></div>
</body>
</html>