Apr 17 2008
அஜாக்ஸ் முறையில் XML பெறுதல்
முந்தைய பதிவுகள்…
1. அஜாக்ஸ் அறிமுகம்
2. அஜாக்ஸ் முறையில் Plain Text பரிமாற்றம்
சென்ற பதிவில் Plain Text-ஐ எப்படி பெறுவதென்று பார்த்தோம். அதே முறையில் HTML data-வை கூட அஜாக்ஸ் முறையில் பெற்று இணையப் பக்கத்தின் ஒரு பகுதியை மட்டும் refresh செய்யலாம். இந்த இரு முறைகளிலும் நமது javascript நிரலானது வெறும் dump-ஆகத் தான் செயல்படும். Server-லிருந்து என்ன வருகிறதோ அதை அப்படியே இணையப் பக்கத்தில் காட்டும். வந்த தகவல் ஒரு error page-ஆக இருந்தால் கூட நமது நிரலால் கண்டுப்பிடிக்க முடியாது.
நமது நிரலை புதிசாலியாக்க வேண்டுமானால் XML அல்லது JSON (JavaScript Object Notation) data-வால் தான் முடியும். இந்த தகவல்களை பெறுவதும் மிகச் சுலபம். XML response வந்ததும் அதை parser கொண்டு பகுக்க வேண்டும்.
சரி, இப்போது ஒரு எடுத்துக்காட்டு பார்ப்போம். இந்த பதிவிற்காக குழந்தைகளின் பெயர் தேடலுக்கான application ஒன்றை உருவாக்கியுள்ளேன். நிறைய இணையங்கள் இந்த சேவையை வழங்குகின்றன. அந்த இணையங்களில் பெயர்களின் தொகுப்பு alphabetic order-ல் இருக்கும். ஒவ்வொருப் பக்கத்திலும் 100-க்கும் மேற்பட்ட பெயர்கள் இருபதால் அவற்றை மேய்வது சிரமமாக இருக்கும் (ஓர் உதாரணம்)
சரி, இந்த பக்கத்தில் போய் அஜாக்ஸ் முறையில் பெயர் தேடலை பாருங்கள்.
சில ஆங்கில எழுத்துக்களை இட ஆரம்பித்ததும், அவ்வெழுத்துகளில் தொடங்கும் பெயர்களை பட்டியலிட்டுக் காட்டும்.
சரி, இது எப்படி சாதியமாயிற்றென்று பார்ப்போம். முதலில் பெயர்களின் தொகுப்பை XML முறையில் தருவதற்கு ஒரு service தயார் செய்ய வேண்டும். நான் .Net-ல் ஒரு அப்பளிக்கேஷன் செய்து எனது தளத்தில் வைத்துள்ளேன். இந்த service-ன் XML output இப்படி தான் இருக்கும்.
நமது அஜாக்ஸ் நிரல் மூலமாக இந்த service-சிடமிருந்து XML தகவலை கோருவதற்கான நிரல் இதோ இங்கே,
//My web application which returns the list of names in XML format
var service = "http://www.yemkay.com/apps/ajaxseries/ajax-2/";
//Get the letters typed by the user
var keyword = document.getElementById('keyword').value;
//Find the selected baby (boy/girl)
var selBaby = (document.getElementById('boy').checked)? "boy":"girl";
//Construct the url
var url = service + '?q=' + keyword + "&baby=" + selBaby;
//Place an AJAX request
ajax.get(url, gotSuggestions);
ajax என்னும் class-ன் நிரல் நாம் பயன்படுத்தும் library-ல் உள்ளது. (அஜாக்ஸ் Libraryஐ இங்கே தரைஇறக்கவும்). gotSuggestions என்பது ஒரு handler function. நம் கோரலுக்கான response வந்ததும் இந்த function இயங்கும். சரி இப்போது gotSuggestions function-ஐ எப்படி எழுதுவதென்று பார்ப்போம்.
var gotSuggestions=function(text, xml, http_request)
{
if (http_request.status == 200)
{
//Query for all the "baby" elements in the XML
var babies = xml.getElementsByTagName('baby');
var index=0, result = "";
for (index=0; index < babies.length; index++)
{
//Add the name and its meaning to the result buffer
result += babies[index].getAttribute("name");
result += " - ";
result += babies[index].getAttribute("meaning");
result += "<br/>";
}
//Show the result in the HTML page
document.getElementById('suggestph').innerHTML = result;
}
}
இந்த function-னுடைய “xml” எனும் parameter-ல் நமது XML output இருக்கும். அதை DOM parser மூலம் பகுத்து HTML code-ஐ தயார் செய்ய வேண்டும். அதை ஒரு HTML element-ல் காட்டி விட்டால் வேலை முடிந்தது. ஒரு வேளை நாம் அனுப்பிய எழுத்துகளுக்கு பெயர்கள் எதுவும் இல்லையென்றால் நமக்கு வரும் XML output-ல் baby element ஒன்று கூட இருக்காது. அந்த நேரத்தில் babies.length என்பது zero-வாக இருக்கும்.
இந்த நிரலானது பெயர்கள் எதுவும் இல்லாமல் போனால், “NO RESULTS” என்று காட்டும்.
if (babies==null || babies.length < 1)
{
result += "No results";
}
முழு நிரலை இங்கே தரை இறக்கவும் (Right click, Save Target As….)
Chat