一、Ajax简介
Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不刷新整个网页的情况下，对网页实现部分更新。
二、Ajax数据格式
使用Ajax方式向服务器发送请求之后，服务器会给客户端发送请求数据。使用Ajax时，可以通过XMLHttpRequest对象的属性responseXML和responseText来获取服务器响应的数据。从responseXML取得是XMldocument对象，而从responseText属性取得的数据需要自己判断格式并解析。
三、从XML文档中获取数据并转换为HTML
XMLHttpRequest对象的reponseXML属性返回的XML属性会被自动解析成一个可以定位的XML格式的DOM对象，可以通过DOM方法在其中定位节点和获取数据。
例子如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="UI._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ajax</title>
<style style="text/css">
body {
font-family:Arial,Helvetica,sans-serif;
}
.book {
border-top:1px solid #ccc;
padding:10px 5px;
}
.book h2 {
margin:0;
font-size:2em;
}
.book .author {
margin:0;
font-weight:bold;
font-size:1em;
}
.book p {
margin:0;
}
</style>
<script>
window.onload = function ()
{
var xmr;
//创建XMLHttprRequest对象
if (window.XMLHttpRequest) {
xmr = new XMLHttpRequest();
}
else {
try{
xmr=new ActiveXObject("MSXML.XMLHTTP6.0")
} catch (e) { }
try {
xmr = new ActiveXObject("MSXML.XMLHTTP");
}catch(e){}
}
//为按钮添加事件处理
var btn = document.getElementById("btn");
btn.onclick = function ()
{
//如果成功创建XMLHttpRequest对象实例，则通过对象向服务器发出请求
if (xmr)
{
xmr.open("GET", "Books.xml", true);
xmr.onreadystatechange = function ()
{
// debugger;
if (xmr.readyState == 4)
{
//解析XML文档构造HTML
var doc = xmr.responseXML.documentElement;//注：responseXML 获得XML格式的响应数据
var books = doc.getElementsByTagName("book");
var container = document.getElementById("content");
var book, title, author, description, text;
for (var i = 0; i < books.length; i++)
{
//创建Div作为书籍数据的容器
book = document.createElement("div");
book.className = "book";
//创建h2存放书籍标题
title = document.createElement("h2");
text = document.createTextNode(books[i].childNodes[1].firstChild.data);
title.appendChild(text);
book.appendChild(title);
//创建p存放作者
author = document.createElement("p");
author.className = "author";
title = document.createTextNode(books[i].childNodes[3].firstChild.data);
author.appendChild(title);
book.appendChild(author);
//创建p存放内容简介
description = document.createElement("p");
title = document.createTextNode(books[i].childNodes[5].firstChild.data);
description.appendChild(title);
book.appendChild(description);
//将创建的Div节点加入到页面
container.appendChild(book);
}
}
}
xmr.send();
}
}
}
</script>
</head>
<body>
<div id="content"></div>
<input id="btn" type="button" value="Ajax获取数据" />
</body>
</html>
XML文档
<?xml version="1.0" encoding="utf-8" ?>
<root>
<book>
<title>呐喊</title>
<author>鲁迅</author>
<description>"呐喊"中的小说，以振聋发聩的气势...</description>
</book>
<book>
<title>追风筝的人</title>
<author>卡勒德.胡赛尼</author>
<description>12岁的阿富汗富家少爷阿米尔与仆人哈桑情同手足...</description>
</book>
</root>
浙公网安备 33010602011771号