写在前面的话

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. 项目差异class文件提取-->上线用

    package fileReader; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStre ...

  2. Linear regression with one variable算法实例讲解（绘制图像，cost_Function ,Gradient Desent, 拟合曲线, 轮廓图绘制）_矩阵操作

    %测试数据 'ex1data1.txt', 第一列为 population of City in 10,000s, 第二列为 Profit in $10,000s 1 6.1101,17.592 5. ...

  3. 简单获取input file 选中的图片，并在一个div的img里面赋值src实现预览图片

    html代码: <input id="file_upload" type="file" /> <div class="image_c ...

  4. poj 3461Oulipo

    题目链接:http://poj.org/problem?id=3461 统计字符串出现的次数 #include<cstdio> #include<iostream> #incl ...

  5. PHP面向对象——类常量，魔术常量与延期绑定

    普通常量  define('常量名',常量值): 以前说过:define定义的常量,全局有效 无论是页面内,函数内,类内,都可以访问. 例: define('ACC','Deny')    class ...

  6. 数据库支持emoji表情

    从MySQL5.5.3开始,MySQL 支持一种utf8mb4的字符集,这个字符集能够支持4字节的UTF8编码的字符.utf8mb4字符集能够完美地兼容utf8字符串.在数据存储方面,当一个普通中文字 ...

  7. 重温WCF之WCF传输安全（十三）（1）前期准备之证书制作（转）

    转载地址:http://www.cnblogs.com/lxblog/archive/2012/09/12/2682372.html 一.WCF中的安全方式 说到安全就会涉及到认证,消息一致性和机密性 ...

  8. 无废话ExtJs 入门教程二[Hello World]

    无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...

  9. Linux 配置NFS，文件共享

    配置:   1.设定共享主机服务器    ---(注意防火墙) 编辑ipA端的/etc/exports 文件 [root@dbrac2 ~]# cat /etc/exports /media  192 ...

  10. HP SAN Switch光纖交換機命令行畫zone

    有時候我們無法登陸網頁交互界面去操縱交換機,如下提供了命令行方式從交換機劃zone 1.創建別名 alicreate "SummaryDB_N", "211,14; 21 ...