About the Blog:

This blog is dedicated to all the front-end and UI developers who wants to excel their skills in CSS, HTML, JavaScript, jQuery, Ajax, Reactjs, Angularjs, Front-end standards and in Rich User Experiences. In this blog, we are sharing some useful tips and tricks along with the code snippet examples which will help you to build responsive and user friendly websites/web applications.

Monday, October 6, 2008

Swap Images by XML using XMLHTTP Request

Calling XML file into HTML Page using XMLHTTP Request or ActiveXOject
Here, we have used some features for calling xml file into html document with the help of ajax. In the example mentioned below, we called xml nodes by using
item(0).firstChild.nodeValue

Below find the javascript code as a Example, as a result it shows toggle images effects.

Javascript file Source:

<script type="text/javascript">
function make()
{
var req;

if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}

req.open("GET", "image.xml", true);
//req.load("ajax-get.xml");


req.onreadystatechange = function()
{
if(req.readyState == 4)
{
//alert(imgsrc);

var doc = req.responseXML;
var cont=document.getElementById("data");
var imgsrc=document.getElementById("pic");
var thumb=document.getElementById("pic_s");
var clickhere=document.getElementById("alink");

//var test = doc.getElementsByTagName('thumb');
var smallpic = doc.getElementsByTagName('thumb');
var lnkxml = doc.getElementsByTagName('link');

imgsrc.src = doc.getElementsByTagName('image').item(0).firstChild.nodeValue;
imgsrc.alt = doc.getElementsByTagName('alt').item(0).firstChild.nodeValue;
thumb.src = smallpic.item(0).firstChild.nodeValue;
clickhere.href = lnkxml.item(0).firstChild.nodeValue;


var rot=document.getElementById("spn1");
rot.innerHTML= smallpic.item(0).firstChild.nodeValue;

thumb.onclick=function()
{

//if(thumb.src==smallpic.item(1).firstChild.nodeValue)
if(rot.innerHTML==smallpic.item(1).firstChild.nodeValue)
{
imgsrc.src = doc.getElementsByTagName('image').item(0).firstChild.nodeValue;
imgsrc.alt = doc.getElementsByTagName('alt').item(0).firstChild.nodeValue;
thumb.src = smallpic.item(0).firstChild.nodeValue;
clickhere.href = lnkxml.item(0).firstChild.nodeValue;

rot.innerHTML= smallpic.item(0).firstChild.nodeValue;
}
else
{
imgsrc.src = doc.getElementsByTagName('image').item(1).firstChild.nodeValue;
imgsrc.alt = doc.getElementsByTagName('alt').item(1).firstChild.nodeValue;
thumb.src = smallpic.item(1).firstChild.nodeValue;
clickhere.href = lnkxml.item(1).firstChild.nodeValue;

rot.innerHTML= smallpic.item(1).firstChild.nodeValue;
}
//alert(thumb.src);
};
}


};

/* else if(req.readyState<4)
{
shots.innerHTML="Loading...";
}*/
req.send(null);
}

</script>


XML file Source:

<?xml version="1.0"?>
<root>
<image>images/img-1.jpg</image>
<thumb>images/thumb-1.jpg</thumb>
<alt>XML</alt>
<link>http://javascript-guru.blogspot.com/search/label/ajax/</link>
<image>images/img-2.jpg</image>
<thumb>images/thumb-2.jpg</thumb>
<alt>Ajax</alt>
<link>http://javascript-guru.blogspot.com/</link>
</root>

11 comments:

Unknown said...

wow, that is great one and it is very good specially for me in website design.

Online Marketing Company said...

Hi Friend,

Nice to see your Blog.....I Like you Blog.
I am also interested in latest news, sometimes i posted on my blog.....

Joomla Website Designer said...

The script for image swapping is great.I have an expertise in Joomla Design but not in Java Script.Hope you would provide more new & interesting scripts

seo minneaplis said...

Very Nice Blog
its really good
this blog explain very good concepts

Anonymous said...

[url=http://www.pi7.ru/seks-sekrety/2030-vozmozhnye-posledstviya-netradicionnoy-izmeny-muzhu.html ]Как полностью удалить себя в контакте:, чтобы даже страницы не осталось? [/url]
Не понимаю высоких девушек,от 175 и выше,которые не носят каблуки,стесняются собственного роста,у меня 177 я обожаю каблуки и чем выше тем лучше,без каблуков ощущаю себя ущербной,девчонки,откуда у вас комплексы роста?высокая девушка на высоких каблуках-это ж так красиво!Разве я не права?

Notbook Repair said...

Thanks for the information. This is a great post.

Anonymous said...

Hi, I'm a newbie here, but I already want to bring all the benefits of me :) So, I want to share my experience with you..
9 days ago, accidentally, i had found the Mobile Phone TV...and I was so delighted with this application
that I decided to talk to you :)

I consider myself a bit of a road warrior. I am on and off jets and through airports at least twice,
usually 4 times a week. I can catch up on news, watch a Discovery program, check up on the stock market or just find something interesting.
The live guide works like cable at home and the connection speed is very good. All in ALL - I RATE A 5 Star program!

but I do not want to leave any links here, so you can email me fairyalexiss@gmail.com
and i will give you the site of this unusual program :)

(but please don't PM me, because it's so difficult to communicate in such kind of way)

so, I hope I was helpful to you)) see you in next posts ..

sincerely
your Alexis....

p.s. English is not my native language, so sorry for any mistakes :)

DVD Printing said...

Nice post. Very useful information comes out through this post.

joomla web design said...

Really this is good. thanks for give me information

Unknown said...

Great post for web developers .I have bookmarked your page for the further reference and also implementing the process mentioned in your tutorial.
Professional Web Design

Anonymous said...

Good to visit here an interesting content is shared..Really too much informative and useful .Thanks for sharing here.
joomla website