Write a simple photo album with Ajax

AJAX (Asynchronous JavaScript and XML) is a technology that uses JavaScript and Extensible Markup Language (XML) to transfer or accept data between Web browsers and servers. It is mainly used in the development of RIA (Rich Internet applications).

The XML problem has finally been solved today. Finally, there are some old ways to use Dom in Firefox. Let me give you a concrete explanation of the method here.

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");
}
The above passage is to determine the current browser version to define the different XMLHttpRequest objects for XMLHTTP. If the server's response does not have an XML Mime-type header, some Mozilla browsers may not work correctly. Therefore, Xmlhttp.overridemimetype (' Text/xml ') is required to modify the header.

function GetData () {//Read data
Xmlhttp.onreadystatechange = Prasexml;
Xmlhttp.open ("Get", "Xmldata2.xml", true);
Xmlhttp.send (NULL);
}

Function Prasexml () {//Parsing data
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status =) {
var xmldoc = XmlHttp. Responsexml;
var root=xmldoc.getelementsbytagname (' data '). Item (0)
//Use this method to take effect in Firefox. At least XPath I didn't succeed.
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 () {//collates the resulting data and loads it into the 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 method
var Target_div=document.getelementbyid (' pic ');
Target_div.innerhtml= "}