一、简介
Ajax处理获取XML格式的响应数据之外还可以通过responseText属性来获取字符串格式的服务器响应数据。
二、下面通过一个例子来说明如果获取Json格式的数据，Json格式表示的数据对象实际上就是javascript中的字面量对象，但是只允许包含以下几种类型：字符串、数值、数组和其它字面量对象，并且键和字符串类型的值都必须用双引号括起来。
例子如下：
<%@ 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.js", true);
xmr.onreadystatechange = function ()
{
//debugger;
if (xmr.readyState == 4)
{
//从json数据解析出books对象
eval(xmr.responseText);
var container = document.getElementById("content");
var book, title, author, description, text;
for (var key in books)
{
//创建Div作为书籍数据的容器
book = document.createElement("div");
book.className = "book";
//创建h2存放书籍标题
title = document.createElement("h2");
text = document.createTextNode(books[key]["title"]);
title.appendChild(text);
book.appendChild(title);
//创建p存放作者
author = document.createElement("p");
author.className = "author";
title = document.createTextNode(books[key]["author"]);
author.appendChild(title);
book.appendChild(author);
//创建p存放内容简介
description = document.createElement("p");
title = document.createTextNode(books[key]["description"]);
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>
var books = {
"book1": {
"title": "呐喊",
"author": "鲁迅",
"description":"“呐喊”中的小说，以振聋发聩的气势..."
},
"book2": {
"title": "追风筝的人",
"author": "卡勒德.胡赛尼",
"description": "12岁的阿富汗富家少爷阿米尔与仆人哈桑情同手足..."
}
}