Using AJAX to prepare a simple photo album

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+">"
)
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Using AJAX to prepare a simple photo album

  • hibernate call stored procedure

    hibernate call stored procedure

  • hibernate using c3p0 connection pooling

    Private http://www.lifevv.com/tenyo/doc/20070605102040991.html c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...

  • Hibernate configuration parameters hibernate.hbm2ddl.auto

    Hibernate in the configuration file: <properties> <property name="hibernate.hbm2ddl.auto" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

  • Build flex + spring + blazeds + hibernate application

    Build flex + spring + blazeds + hibernate application First, set up the project blazeds 1, will blazeds.war extract to a directory, such as: myflex /; 2, set up java works were such as: MyFlex, in the orientation of selection create project from exis ...

  • Hibernate connection pool configuration

    Hibernate connection pool configuration <! - Jdbc -> <property name="connection.driver_class"> oracle.jdbc.driver.OracleDriver </ property> <property name="connection.url"> jdbc: oracle: thin: @ 10.203.14.132:15

  • hibernate generic generic DAO

    package org.lzpeng.dao; import java.io.Serializable; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Query; import org.hibernate.criterion.Criterion; import org.springside.modules.orm.hibernate.Page; /** * * @version 2009-1-10 *

  • First Hibernate Example

    Curd a simple example. Source does not contain the dependent libraries, or playing too much of the package. PO object Note: One must have the default constructor 2 non-final modified. Otherwise useless lazy loading. UserDAOImpl category code, and other co

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

  • Hibernate secondary cache

    Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...

  • Hibernate's lazy strategy

    hibernate Lazy strategy can be used in: <class> tag, it can be true / false Tags can <PROPERTY> values true / false type of necessary tools to enhance <set> <list> can tag values true / false / extra <many-to-one> <on ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries