As we've done previously, here we continue the work of Writing a Style Library to encapsulate Ajax-related operations. The accomplished code is gossip-0.5.js. You can download it directly to see the details.
We use this library to rewrite the second example of Making GET Requests.
<!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 existed';
}
XD('#message').html(message);
}
);
});
});
</script>
</head>
<body>
Add a bookmark: <br>
URL: <input id="url" type="text">
<span id="message" style="color:red"></span><br>
Title: <input type="text">
</body>
</html>Let's see how this library simplifies the example of Dealing with 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>
Book: <br>
<select id="category">
<option>-- Category --</option>
<option value="theory">Theory</option>
<option value="language">Language</option>
<option value="web">Web</option>
</select><br><br>
Buy: <div id="book"></div>
</body>
</html>Let's see how this library simplifies the example of Dealing with 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>
Search: <input id="search" type="text">
</body>
</html>Let's see how this library simplifies the example of Using 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">Search</button>
<div id="images"></div>
</body>
</html>