Using AJAX to prepare a simple photo album

Mar 12 posted in AJAX (RSS), comments.

Advertisements

AJAX (Asynchronous JavaScript And XML) is a use of JavaScript and Extensible Markup Language (XML), in a web browser and server to send or receive data between the technologies. Mainly used in Ria (Rich internet applications) of the development.

xml problem was finally resolved today or. Finally FireFox at Dom Lane or the use of some old methods. I am here to explain the method on the specific bar.

Code:

var XmlHttp; / / used to define a XmlHttpRequest Object
var temp_url_arr = new Array ()
var temp_title_arr = new Array ()
var list_arr = new Array ()
if (window.XMLHttpRequest) (
XmlHttp = new XMLHttpRequest ()
if (XmlHttp.overrideMimeType) (
XmlHttp.overrideMimeType ( 'text / xml');
)
) Else if (window.ActiveXObject) (
XmlHttp = new ActiveXObject ( "Microsoft.XMLHTTP");
)
/ / Above this are to determine if the current browser version in order to give the definition of different xmlhttp object XmlHttpRequest. If the server does not respond to the XML mime-type header, some Mozilla browsers may not work correctly. Therefore necessary XmlHttp.overrideMimeType ( 'text / xml'); to modify the header.

function getData () (/ / read data XmlHttp.onreadystatechange = praseXml;
XmlHttp.open ( "GET", "xmldata2.xml", true);
XmlHttp.send (null);
)

function praseXml () (/ / Analysis of the data if (XmlHttp.readyState == 4) (
if (XmlHttp.status == 200) (
var xmldoc = XmlHttp.responseXML;
var root = xmldoc.getElementsByTagName ( 'data'). item (0)
/ / Use this method can be inside at the entry into force of FireFox. XPath at least I have not been successful.
for (var iRoot = 0; iRoot <root.childNodes.length; iRoot + +) (
/ / alert (root.childNodes.item (iRoot))
var pic_node = root.childNodes.item (iRoot)
for (iPic = 0; iPic <pic_node.childNodes.length; iPic + +) (
var url_node = pic_node.childNodes.item (iPic)
for (iURL = 0; iURL <url_node.childNodes.length; iURL + +) (
var obj = new Object ()
obj.type = url_node.nodeName
obj.content = url_node.childNodes.item (iURL). nodeValue
if (url_node.nodeName == "url") (
temp_url_arr.push (obj)
) else if (url_node.nodeName == "title") (
temp_title_arr.push (obj)
)
)
)
)
install_list ()
)
)
)

function install_list () (/ / collate the data and loaded onto list_arr array.
list_arr = new Array ()
var target_div = document.getElementById ( 'catelog');
target_div.innerHTML = ""
for (var i = 0; i <temp_url_arr.length; i + +) (
var obj = new Object ()
obj.url = temp_url_arr [i]. content
obj.title = temp_title_arr [i]. content
list_arr.push (obj)
)
for (var i = 0; i <list_arr.length; i + +) (
target_div.innerHTML + = "<a href='#' onClick='img_loader(\""+list_arr[i].url+"\");'>" + list_arr [i]. title + "</ a> <br > ";
)
)

function img_loader (param1) (/ / load picture Ways var target_div = document.getElementById ( 'pic');
target_div.innerHTML = "<img src="+param1+">"
)