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.


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; ( "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+">"

分类:AJAX 时间:2009-03-12 人气:760
blog comments powered by Disqus


  • Java ArrayList in the remove (Object obj) method of 2010-09-27

    Today, having a bug, discovered that the original programmer to write the equals method is a little problem, it is a lot of problems. By the way looked ArrayList of remove (Object obj) method, it may look, is remove the following methods: public bool

  • JavaScript 判断判断某个对象是Object还是一个Array 2014-05-15

    在开发中,我们经常需要判断某个对象是否为数组类型,在Js中检测对象类型的常见方法都有哪些呢? 1.typeof 操作符.对于Function, String, Number ,Undefined 等几种类型的对象来说,他完全可以胜任,但是为Array时 var arr=new Array("1","2","3","4","5"); alert(typeof(arr)); 你会收到一个object 的答案,有

  • Hibernate.initialize (Object obj) 2009-09-24

    On lazy (lazy) and forced to load (Hibernate.initialize (Object proxy)), etc. Sustained in the use of hibernate when it is sometimes necessary to change the dynamic loading of objects, such as in the editorial pages inside lazy = true, the page in th

  • Get Object or Associative array's length 2010-06-13

    If you need to find the length of an object, and I mean the number of children of the specified object, use the following function / method: public static function getLength(o:Object):uint { var len:uint = 0; for (var item:* in o) if (item != "mx_int

  • java-by-value call and pass-by-call (pass parameters to the object and the array appears as pass-by-call to preach the values of other types of calls) 2010-12-26

    View: java-by-value call and pass-by-call (pass parameters to the object and the array appears as pass-by-call to preach the values of other types of calls) Test case: package thinkinjava; public class Passing objects { /*static*/ void f(Y y){ y.z='a

  • XMLHTTP object packaging technology 2009-08-21

    Ajax technology mainly depends on the realization of xmlhttprequest, but we call for its asynchronous data transmission, as is a short-term xmlhttp process (dealing with the incident after the completion of the destruction) of the object if the packa

  • Use of jQuery, Part 3: Using jQuery and Ajax Building Rich Internet Applications 2010-04-23

    Effects and Ajax ( Reprinted from ) <script type="text/javascript"> </ script> <noscript> </ noscript> <noscript> </ noscript> Sample code English original <! - START RESERVED FOR FUTURE USE INCLUDE FILES -

  • Use of dynamic Javascript to add, delete forms (using W3C object model) 2010-03-10

    Use of dynamic Javascript to add, delete forms (using W3C object model) <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script language="javascript"> function delet

  • javascript in the document, link, anchor, location object to use 2010-04-13

    The document object The document object : document Contains the current document information, provides to the user " Displays the HTML output " The method . The anchor object The anchor object : Anchor The anchor points in the Web page will be a

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 黔ICP备15002463号-1

processed in 0.456 (s). 10 q(s)