AJAX Advanced Learning (4) - AJAX XML Example

2010-12-27  来源:本站原创  分类:Web  人气:142 

AJAX can be used to interactive communication with the XML file.

--------------------------

AJAX XML Example

AJAX example below, we will demonstrate how to use AJAX technology, to read information from the XML file.

--------------------------

Schematic instance is running

AJAX Advanced Learning (4) - AJAX XML Example

AJAX Advanced Learning (4) - AJAX XML Example

--------------------------

AJAX example explained

The above example contains a simple HTML form, and links pointing to a JavaScript:

<html>
<head>
<script src="selectcd.js"></script>
</head>

<body>

<form>
 Select  CD:
<select name="cds" onchange="showCD(this.value)">
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>

<p>
<div><em> In this list the CD information .</em></div>
</p>

</body>
</html>

As you can see, it is only with a named "cds" drop-down list of simple HTML form.
Paragraph below the form contains a file named "txtHint" of div. The div for the data from the web server to accept the position of a placeholder.

When the user selects the list, called "showCD" function will be executed. The execution of the function is "onchange" event triggered. In other words, whenever the user changes the value of the drop-down list, this showCD function will be invoked.

The following lists the JavaScript code.

--------------------------

AJAX JavaScript

This is stored in the file "selectcd.js" in the JavaScript code:

var xmlHttp

function showCD(str)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="getcd.asp";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
}

--------------------------

AJAX Server Page

The server page called by JavaScript, is called "getcd.asp" simple ASP file.

This page is written using VBScript for Internet Information Server (IIS). PHP or other server can use the language, simply rewrite the page.

See the corresponding example in PHP (test: lack of specific pages.)

The code performs a query for the XML file and returns the result to HTML:

<%
response.expires=-1
q=request.querystring("q")

set xmlDoc=Server.CreateObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load(Server.MapPath("cd_catalog.xml"))

set nodes=xmlDoc.selectNodes("CATALOG/CD[ARTIST='" & q & "']")

for each x in nodes
  for each y in x.childnodes
    response.write("<b>" & y.nodename & ":</b> ")
    response.write(y.text)
    response.write("<br />")
  next
next
%>

相关文章
  • AJAX Advanced Learning (4) - AJAX XML Example 2010-12-27

    AJAX can be used to interactive communication with the XML file. -------------------------- AJAX XML Example AJAX example below, we will demonstrate how to use AJAX technology, to read information from the XML file. -------------------------- Schemat

  • AJAX Advanced Learning (5) - AJAX ResponseXML instance 2010-12-27

    HTTP responseText return a string with different responses, responseXML the XML response is returned. ResponseXML property returns the XML document object, use the W3C DOM node tree methods and properties to check and parse the object. --------------

  • AJAX Advanced Learning (1) - AJAX Request Example 2010-12-27

    We have seen AJAX can be used to create more interactive applications. ------------------------ AJAX Suggest Example AJAX example below, we will demonstrate the user to a standard HTML form input data, how a web page and web servers. ----------------

  • AJAX Advanced Learning (2) - AJAX request the source code 2010-12-27

    AJAX Suggest Example source code The following source code is the last section of the AJAX examples. You can copy and paste the code, and then personally tested it. ------------------------ AJAX HTML page This is the HTML page. It contains a simple H

  • AJAX Advanced Learning (3) - AJAX database instance 2010-12-27

    AJAX can be used to communicate with the database dynamically. ------------------------ AJAX Database Example AJAX example below, we will demonstrate how to use AJAX technology enables web pages to read information from the database. ----------------

  • AJAX based learning (6) - AJAX request to the server 2010-12-27

    AJAX - a request to the server To send the request to the server, we need to use the open () method and send () method. open () method requires three parameters. The first parameter defines the method used to send the request (GET or POST). The secon

  • AJAX based learning (7) - AJAX server-side script 2010-12-27

    AJAX - server-side script Now we want to create the script displays the current server time. responseText property will store the data returned from the server. Here, we hope to return the current time. This is the "time.jsp" code: <% respons

  • AJAX使用post发送数据xml格式接受数据 2014-01-29

    AJAX使用post发送数据xml格式接受数据,需要的朋友可以参考一下 注意点: 1. 用POST发送数据,在2号线函数(也是ajax发送数据的函数:ajaxCall)必须加上一句:xmlObject.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 接着使用xmlObject.send(data);发送 2.3号线函数要注意: 1.禁用缓存(建议,不必要):header(&q

  • 掌握 Ajax,第 1 部分: Ajax 简介 2012-03-09

    Brett McLaughlin, 作家,编辑, O'Reilly and Associates 本文内容包括: ·老技术,新技巧 ·获取 Request 对象 ·Ajax 世界中的请求/响应 ·连接 Web 表单 ·结束语 Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.本文的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 -- 从总体概述到细节的讨论 -- 使高效的 We

  • 详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.g... 2013-07-18

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表(是可选的,也可以将要传的参数写在url里面),callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数.而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明. 1 $.get("data.php",$("#firstName.val()")

  • 掌握 Ajax,第 1 部分: Ajax 入门简介 2014-08-27

    掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作原理,构建网站的一种有效方法 Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 -- 从总体概述到细节的讨论 -- 使高效的 Web 开发成为现实.他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象. 查看本系列更多

  • On Mobile Ajax and the Frost Ajax Library 2010-11-19

    Mobile Ajax and the Frost Ajax Library OF Rocco Georgi · 2007 12 5 may This translation from the Mobile Ajax And The Frost Ajax Library Description This article describes how to create mobile websites using Ajax. The following will discuss the mobile

  • ajax提交url与ajax提交表单的详细比较 2014-12-06

    本篇文章主要是对ajax提交url与ajax提交表单的区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1:ajax自已构造一个url,这种方式传参数要用Data,不能用于表单提交. 例: function createHtml(id){ $("#reloading").show(); //edit_bg是个div,提交时显示,这样可以使背景页面不能操作. $("#edit_bg").show(); $.ajax({ type: "POST&q

  • jquery的ajax全局事件和AJAX 请求正在进行时显示“正在加载” 2013-03-19

    实例 当 AJAX 请求正在进行时显示"正在加载"的指示: $("#txt").ajaxStart(function(){ $("#wait").css("display","block"); }); $("#txt").ajaxComplete(function(){ $("#wait").css("display","none&quo

  • AJAX response processing to return XML 2010-12-03

    Ajax request, the server returns data in XML form, the page will be very easy to deal with Javascript. Code: // Send request var req; function getXMLHttpRequest() { var xRequest = null; if (window.XMLHttpRequest) { xRequest = new XMLHttpRequest(); }

  • JQuery Ajax通过Handler访问外部XML数据的代码 2014-12-11

    JQuery是一款不错的Javascript脚本框架,相信园子里的很多朋友对它都不陌生,我们在开发Web应用程序时难免会使用到Javascript脚本,而使用一款不错的脚本框架将会大大节省我们的开发时间, 并可以毫不费力地实现很多非常酷的效果. JQuery的使用非常简单,我们只需要从其官方网站上下载一个脚本文件并引用到页面上即可,然后你就可以在你的脚本代码中任意使用JQuery提供的对象和功能了. 在JQuery中使用Ajax方法异步获取服务器资源非常简单,读者可以参考其官方网站上提供的例子h

  • ajax further learning (1) 2010-07-13

    / / Depending on the browser to create the appropriate XMLHttpRequest object; If these three methods do not work, then the user using a browser that has too much time, he or she will see a statement of this browser does not support AJAX Tips <script

  • AJAX combines learning and SEO 2010-09-06

    Hello everybody, I am a java programmer, while working and start changing now, and learn SEO. Now I can share what I learned all I hope for more programmers like me to help friends, either side while working can earn extra money. I think SEO is divid

  • Ajax Study Notes (c) Ajax using JSON for data transfer 2009-06-02

    Article reprint: http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/ JavaScript Object Notation (JSON) data format useful to learn how to use it more easily in the application of mobile data and objects. Recalling the name / value pairs and XML

  • 揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页 2014-08-17

    写这个学习笔记,只是记载一下自己的学习经过和体会,把一些学习重点记录下来,以备今后的巩固复习及应用,很多知识点没有详细介绍,所以并不完全适用于初学者,如果你是初学者,最好选择一本AJAX学习的书籍,然后与这篇学习笔记对照学习,效果会更好. AJAX技术是多种计算机技术的结晶,它的名称来自:Asynchronism(异步).JavaScript.And.XML这4个单词首字母,即异步JavaScript请求处理XML技术.简单的描述就是数据异步传输网页局部刷新的技术.AJAX很流行,WEB程序设计