AJAX学习整理二之简单实例

    做了几个简单的实例,加载txt文本内容、加载xml文件内容,把xml文本内容转换成html表格显示。废话不多说,直接贴代码:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>通过ajax获取文本内容</title>
    <meta charset="utf-8">
    <script>
            //加载文件
            var loadTextByAjax = function(type){
                //第一步,创建XMLHttpRequest对象
                var xmlhttp;
                if(window.XMLHttpRequest){// Firefox, Opera 8.0+, Safari, IE7
                    xmlhttp = new XMLHttpRequest();
                }else{// Old IE
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    console.log("old IE");
                }
                //第二步,编写回调函数
                xmlhttp.onreadystatechange = function load(){
                    if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
                        document.getElementById('status').innerHTML = xmlhttp.status;
                        document.getElementById('readyState').innerHTML = xmlhttp.readyState;
                        if(type === 'txt'){
                            document.getElementById("content").innerHTML=  xmlhttp.responseText;
                        }
                        if(type === 'xml'){
                            document.getElementById("content").innerHTML=  xmlhttp.responseText;
                        }
                        if(type === 'table'){
                            transform();
                        }
                    }
                }
                //第三步,使用open()方法指定服务器地址
                switch (type){
                    case 'txt' :
                        xmlhttp.open("GET","Resources/test.txt",true);
                        break;
                    case 'xml' :
                        xmlhttp.open("GET","Resources/xml.xml",true);
                        break;
                    case 'table' :
                        xmlhttp.open("GET","Resources/xml.xml",true);
                        break;
                }

                //第四步,发送请求
                xmlhttp.send();

                //xml转换html表格显示
                var transform = function(){
                    var table = "<table border='1' style='color: blue'>";//1
                    table = table +"<tr><td>书名</td><td>作者</td><td>出版时间</td><td>价格</td></tr>"
                    var content = xmlhttp.responseXML.documentElement.getElementsByTagName('book');//获取遍历循环的内容
                    var i = 0;
                    for(i = 0; i<content.length; i++){
                        table = table + "<tr>"//2
                        var tr = content[i].getElementsByTagName('title');
                        {
                            try{
                                table = table + "<td>"+tr[0].firstChild.nodeValue+"</td>";//3
                            }catch(er) {
                                table = table + "<td> </td>";//3
                            }
                        }
                        var tr = content[i].getElementsByTagName('author');
                        {
                            try{
                                table = table + "<td>"+tr[0].firstChild.nodeValue+"</td>";//3
                            }catch(er) {
                                table = table + "<td> </td>";//3
                            }
                        }
                        var tr = content[i].getElementsByTagName('year');
                        {
                            try{
                                table = table + "<td>"+tr[0].firstChild.nodeValue+"</td>";//3
                            }catch(er) {
                                table = table + "<td> </td>";//3
                            }
                        }
                        var tr = content[i].getElementsByTagName('price');
                        {
                            try{
                                table = table + "<td>"+tr[0].firstChild.nodeValue+"</td>";//3
                            }catch(er) {
                                table = table + "<td> </td>";//3
                            }
                        }
                        table = table +"</tr>";
                    }
                    table = table +"</table>";
                    document.getElementById('content').innerHTML = table;//把获取的转换后的table插入页面元素
                }
            }
    </script>
</head>
<body>
    <div style="border:1px solid black;font: 16px;font-family: 黑体">
        通过ajax方式改变内容哦:</br>
        Status:<span id="status"></span></br>
        ReadyState:<span id="readyState"></span></br>
        responseText:<span id="content">哈哈哈哈</span></br>

        <button onclick="loadTextByAjax('txt')">点我加载txt文本内容</button>
        <button onclick="loadTextByAjax('xml')">点我加载xml内容</button>
        <button onclick="loadTextByAjax('table')">点我xml转换成table</button>
    </div>
</body>
</html>

下面是xml.xml文件内容,可直接复制粘贴内容:

<bookstore>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
    <book category="web">
        <title lang="en">XQuery Kick Start</title>
        <author>James McGovern</author>
        <author>Per Bothner</author>
        <author>Kurt Cagle</author>
        <author>James Linn</author>
        <author>Vaidyanathan Nagarajan</author>
        <year>2003</year>
        <price>49.99</price>
    </book>
</bookstore>

文本内容test.txt文本内容:

the is a first content,so easy !

虽然例子比较简单,但是好记性不如烂笔头嘛,整理一下留个笔记,方便以后观看学习。

你可能感兴趣的:(html,xml,Ajax,转换)