Create Ajax Simple Albums

Ajax

Demo Address

source File Download

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)//The use of this method can be used in Firefox. At least I didn't succeed in XPath.
    for (var iroot = 0; iroot < root.childNodes.length; iroot++) {
   //alert (ro Ot.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= "}