写在前面的话

Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用.

一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用JSON语句话,服务端需要多做一些工作,但到了客户端,通过使用eval()函数来进行解析,就会获得js对象,使用起来很方便.在使用过程中,究竟使用哪种方法,这个要根据项目的实际需要,建议:在能使用JSON的情况下,尽量使用JSON.

具体使用方法参见例子.

例子

1.XML数据user.xml

<?xml version="1.0" encoding="utf-8" ?>
<users>
<user>
<username>张三XML</username>
<age>33</age>
</user>
<user>
<username>李四XML</username>
<age>34</age>
</user>
</users>

2.JSON数据user.js

[
{ username : "张三JSON", age : 33},
{ username : "李四JSON", age : 34}
]

3.HTML页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table,td,th
{
border:solid 1px silver;
border-collapse:collapse;
text-align:center;
} th,td
{
width:100px;
height:20px;
}
</style>
<script type="text/javascript">
function GetXML() {
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xmlHttp.open("get", "user.xml?random=" + Math.random(), true); xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
//获取返回XML数据主体内容
var result = xmlHttp.responseXML.documentElement; //获得user节点元素
var users = result.getElementsByTagName("user"); for (var i = 0; i < users.length; i++) {
//获取单个user信息
var user = users[i]; //获取user具体信息
var username = user.getElementsByTagName("username")[0].text;
var age = user.getElementsByTagName("age")[0].text; //添加行
appendRow(username, age);
}
}
} xmlHttp.send();
} //添加新行
function appendRow(username, age) {
var ui = document.getElementById("userinfo"); //添加新行
var newRow = ui.insertRow(ui.rows.length); //添加新的单元格
newRow.insertCell(0).innerHTML = username;
newRow.insertCell(1).innerHTML = age; } function GetJSON() {
var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp"); xmlHttp.open("get", "user.js?random=" + Math.random(), true); xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var result = xmlHttp.responseText; //使用eval函数使返回的字符串变成js对象
var users = eval("(" + result + ")"); for (var i = 0; i < users.length; i++) {
//获取单个user信息
var user = users[i]; //此处已经知道user数据的格式,故可以直接用user.username和user.age
appendRow(user.username, user.age);
}
}
} xmlHttp.send();
} </script>
</head>
<body>
<input type="button" value="加载XML数据" onclick="GetXML();" />
<input type="button" value="加载JSON数据" onclick="GetJSON();" />
<br />
<br />
<table id="userinfo">
<thead>
<tr>
<th>
姓名
</th>
<th>
年龄
</th>
</tr></thead>
<tbody>
</tbody>
</table>
</body>
</html>

效果

运行页面,点击"加载XML数据"按钮,会从XML数据文件中读取数据并添加至表格中;点击"加载JSON数据"按钮,会从js文件中读取数据并添加至表格.

注意

因为使用的Get请求,应注意缓存问题.

Ajax从服务器端获取数据的更多相关文章

  1. Ajax从服务器端获取数据---原生态Ajax

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  2. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  3. jsTree通过AJAX从后台获取数据

    页面代码: <div id="MenuTree"></div> javascript代码: $(document).ready(function ($) { ...

  4. ajax异步请求获取数据,实现滚动数字的效果。

    BackgroundPositionAnimate.js下载 需要导入的js: <script type="text/javascript" src="js/jqu ...

  5. MVC—实现ajax+mvc异步获取数据

    之前写过ajax和一般处理程序的结合实现前后台的数据交换的博客,如今做系统用到了MVC,同一时候也用到了异步获取数据. ajax+一般处理程序与MVC+ajax原理是一样的在"URL&quo ...

  6. jQuery使用ajax跨域获取数据

    var webMethod = "http://localhost:54473/Service1.asmx/HelloWorld";  jQuery.support.cors = ...

  7. Json--Android中数据文件解析(Json解析--从服务器端获取数据并且解析,显示在客户端上面)

    前面学习过了使用SAX解析XML数据(点击进入:SAX解析XML数据),今天学习Json解析: 首先说一下Json数据的最基本的特点,Json数据是一系列的键值对的集合,和XML数据来比,Json数据 ...

  8. scrapy爬虫之模拟ajax post请求获取数据

    实质:分析真实请求地址,根据规则构造新地址从而获得数据. 分析发现数据是通过异步ajax方式→post 获得的 于是通过分析response ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 发现每次翻页 网 ...

  9. c# ajax从后台获取数据list数组 $.each再显示数据

    后台代码 public JsonResult linkage(string Department) {//逻辑是:先从数据库查到表数据 再把表数据转换为LIST给AJAX HE_Department ...

随机推荐

  1. 中文和unicode互转

    public class Test { public static void main(String[] args) { String uname="欧阳红"; for (int ...

  2. ld: framework not found AGCommon 关于三方库到入 问题解决方案!!

    ld: framework  not found AGCommon clang:error:linker command failed with exit code 1 (use -v to see ...

  3. 使用DateUtils和DateFormatUtils处理时间日期转换与SimpleDateFormat的区别

    在Apache Commons项目的Lang里面,有两个类:DateUtils和DateFormatUtils,专门用于处理时间日期转换.它们在 org.apache.commons.lang.tim ...

  4. NYOJ题目816它合法吗?

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAAJ0CAIAAACwTVMOAAAgAElEQVR4nO3du1LjzNo24O8kyDkQYh

  5. 转:不再以讹传讹,GET和POST的真正区别

    如果有人问你,GET和POST,有什么区别?你会如何回答? 我的经历 前几天有人问我这个问题.我说GET是用于获取数据的,POST,一般用于将数据发给服务器之用. 这个答案好像并不是他想要的.于是他继 ...

  6. 知乎大牛的关于JS解答

    很多疑惑一扫而空.... http://www.zhihu.com/question/35905242?sort=created JS的单线程,浏览器的多进程,与CPU,OS的对位. 互联网移动的起起 ...

  7. dbca:Exception in thread "main" java.lang.UnsatisfiedLinkError: get

    在64位的操作系统安装oracle10g 软件安装完成后,使用dbca建库的时候报下面的错: $ dbcaUnsatisfiedLinkError exception loading native l ...

  8. CodeForces 371D Vessels(树状数组)

    树状数组,一个想法是当往p注水时,认为是其容量变小了,更新时二分枚举,注意一些优化. #include<cstdio> #include<iostream> #include& ...

  9. Solr入门之(2)快速启动:第一个例子

    Solr作为一个web应用来启动,因此需要JDK支持,需要WEB容器,本文环境如下: JDK6.0或以上(环境变量设置等不再赘述) Tomcat-6.0.35或以上(自行下载) apache-solr ...

  10. FP-Growth算法及演示程序

    FP-Growth算法 FP-Growth(频繁模式增长)算法是韩家炜老师在2000年提出的关联分析算法,它采取如下分治策略:将提供频繁项集的数据库压缩到一棵频繁模式树(FP-Tree),但仍保留项集 ...