Ajax从服务器端获取数据

转载 2015年07月09日 14:48:43

写在前面的话

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文件中读取数据并添加至表格.

image

注意

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

js+实现+无刷新定时取数据

天气预报 var xmlhttp; function getWeather() { //创建异步对象 xmlhttp=new ...
  • wem520
  • wem520
  • 2011年10月18日 15:39
  • 6066

Ajax实现定时刷新,获取后台数据(实现技术ASP)

参考比如XML DOM,HTML Dom,javascript.在开发Ajax应用的时候,随时可以找到你需要的内容. Now(),开始我们的主题:这里我们用Access作为数据库,建个数据库名称为us...
  • chinmo
  • chinmo
  • 2008年03月04日 09:57
  • 3669

原生Ajax的使用--从服务器端获取数据

JavaScript在03年面临着被程序界淘汰的局面,除了些广告特效之外,没法与后台数据交互,再加上广告使得用户反感,所以一度被程序界放弃。但在03年微软的工程师在com++控件中封装得到了一个XML...

Ajax从服务器端获取数据

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

android开发学习笔记(一)分别通过GET和POST请求从服务器端获取数据

最近学习从服务器获取数据并且解析,做了一些笔记。 android上发送请求的方式有两种,這里主要使用HttpURLConnection, 另一种不做考虑。通过POST方式发送请求的工具类 p...

android学习历程,自定义listview并从服务器端获取数据填充进listview

android学习历程,自定义listview并从服务器端获取数据填充进listview

Android从服务器端获取数据的几种方法

在android中有时候我们不需要用到本机的SQLite数据库提供数据,更多的时候是从网络上获取数据,那么Android怎么从服务器端获取数据呢?有很多种,归纳起来有 一:基于Http协议获取数...

extjs4.1从服务器端动态获取数据确定条数画出折线图

接触程序员行业有一段时间了,现在才来开通博客,把我平时遇到的问题记录下来与大家分享。         第一家公司用的extjs4.1的mvc模式,这个框架从来没有接触过但是我能感觉出来它确实很强大。最...

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

首先说一下Json数据的最基本的特点,Json数据是一系列的键值对的集合,和XML数据来比,Json数据的体积更加小,传输效率高,易解析,不过可读性不高; 因为这次要...

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

首先说一下Json数据的最基本的特点,Json数据是一系列的键值对的集合,和XML数据来比,Json数据的体积更加小,传输效率高,易解析,不过可读性不高; 因为这次要从服务器端得到Json数据,并且...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax从服务器端获取数据
举报原因:
原因补充:

(最多只允许输入30个字)