AJAX处理文本数据

文本数据是由一些普通文本组成的，是AJAX接收的服务器传递的最常用的数据。
使用XMHttpRequest对象的responseText属性来获取服务器的响应信息，信息内容保存在responseText属性中。
文本数据以字符的形式显示在浏览器上，可以直接以文本形式显示，也可以作为HTML内容显示。

AJAX可以直接请求文本文件的内容，也可以请求HTML文件内容，将请求后的数据存储在responseText属性中。

responseText中的数据，是HTML能够识别的格式，直接插入页面中即可。

插入HTML数据较简单的方法是更新innerHTML属性。

在content文件夹下分别创建content.txt、content.html、content2.html文件。
在index.html文件中编写部分的代码。

在...标签中创建


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-2</title>
</head>
<body>
    <a href="content/content.txt">健走的好处</a>
    <br><span id="span1"></span><br>
    <a href="content/content.html">健走的好处</a>
    <br><span id="span2"></span><br>
    <a href="content/content2.html">健走的好处</a>
    <br><span id="span3"></span>
    <script>
        window.onload=function(){
            document.getElementsByTagName("a")[0].onclick = function(){
                var xhr = new XMLHttpRequest();
                var url = this.href;
                xhr.open("get",url);
                xhr.send(null);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        if(xhr.status==200){
                            var result = xhr.responseText;
                            document.getElementById("span1").innerHTML = result;
                        }
                    }
                }
                return false;
            }
        }
    </script>
</body>
</html>

效果如下

这里需要注意，先参考9.3配置好php服务器，在服务器里运行才能生效练习：给出另外2个链接的ajax效果，如下图所示


<script>
        function ajax(elementId) {
            return function() { // 返回一个匿名函数，该函数在点击时执行
                var xhr = new XMLHttpRequest();
                var url = this.href; // this在这里指向当前的<a>元素
                xhr.open("get", url);
                xhr.send(null);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            var result = xhr.responseText;
                            document.getElementById(elementId).innerHTML = result;
                        }
                    }
                };
                return false;
            };
        }

        window.onload = function() {
            // 将函数本身作为事件处理器，而不是函数的调用结果
            document.getElementsByTagName("a")[0].onclick = ajax("span1");
            document.getElementsByTagName("a")[1].onclick = ajax("span2");
            document.getElementsByTagName("a")[2].onclick = ajax("span3");
        };
        
    </script>

读取XML文件

AJAX通过XMLHttpRequest对象的responseXML属性接收和保存服务器发送的XML格式的数据。

XML数据是HTTP传输的通用数据类型，支持各种传输环境，特别是远程传输。

在兼容性和速度上，XML格式的数据都具有很大的优势。XML格式数据的缺点是，在解析时比较麻烦。


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-3</title>    
</head>
<body>
    <a href="content/content3.xml">健走的好处</a>
    <br><span id="span1"></span><br>
    <a href="content/content.html">健走的好处</a>
    <br><span id="span2"></span><br>
    <a href="content/content2.html">健走的好处</a>
    <br><span id="span3"></span>
    <script>
        window.onload = function(){
            document.getElementsByTagName("a")[0].onclick = function(){
                var xhr=new XMLHttpRequest();
                var url=this.href;
                xhr.open("get",url,true);
                xhr.send(null);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        var result = xhr.responseXML;
                        console.log(result);
                        var users = result.getElementsByTagName("user");
                        console.log(users);
                        console.log(users[0]);
                    }
                }
                return false;
            }
        }
    </script>
</body>
</html>

读取JSON文件

JSON是一种轻量级的数据交互格式，全称为JavaScript Object Notation，是较常用的一种数据格式。JSON基于 ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。JSON中的所有数据以键值对的形式存在，多个键值对之间用逗号隔开，键值对的键和值之间用冒号连接。可以用花括号或方括号标注，对应JavaScript中的object和array。“键”类似属性，“值”可以是4种基本数据（字符串、数值、布尔值、空值），也可以是两种结构（数组、对象），具体如图9-8所示：


<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-4</title>
    
</head>
<body>
    <a href="content/content.json">健走的好处</a>
    <br><span id="span1"></span><br>
    <a href="content/content.html">健走的好处</a>
    <br><span id="span2"></span><br>
    <a href="content/content2.html">健走的好处</a>
    <br><span id="span3"></span>
    <script>
        window.onload = function(){
            document.getElementsByTagName("a")[0].onclick = function(){
                var xhr=new XMLHttpRequest();
                var url=this.href;
                xhr.open("get",url,true);
                xhr.send(null);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4 && xhr.status==200){
                        var result = xhr.responseText;
                        console.log(result);                        
                    }
                }
                return false;
            }
        }
    </script>
</body>
</html>

目录

AJAX处理文本数据

读取XML文件

读取JSON文件