代码改变世界

利用AJAX，得到XML和JSON信息，不用JQuery等UI框架，兼容 IE、Firefox、Chrome、Safari、Opera 等浏览器。

2011-03-16 15:03  音乐让我说  阅读(850)  评论(0)  编辑  收藏  举报

代码胜过一切说明：

<!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>利用AJAX，得到XML和JSON信息，不用JQuery等UI框架</title>
    <script language="javascript" type="text/javascript">
        var xmlDoc = null, xmlhttp = null;
        function InitXMLHttpRequest() {
            xmlhttp = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHttp");
        }
        function LoadXML() {
            if (xmlhttp == null) {
                InitXMLHttpRequest();
            }
            if (xmlhttp == null) {
              alert("你的浏览器不支持 XMLHttpRequest");
              return;
            }
            xmlhttp.open("GET", "MyInfo.xml?randomNum=" + Date.parse(new Date()), true);
            xmlhttp.setRequestHeader("Content-Type", "text/xml");
            xmlhttp.onreadystatechange = GetXMLMessage;
            xmlhttp.send(null);
        }
        function GetXMLMessage() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                xmlDoc = xmlhttp.responseXML.documentElement;
                if (xmlDoc == null) {
                    alert("返回的XML数据不正确。");
                    return;
                }
                var nodes = xmlDoc.getElementsByTagName("t1");
                for (i = 0; i < nodes.length; i++) 
                {
                    var title = nodes[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
                    var url = nodes[i].getElementsByTagName("url")[0].childNodes[0].nodeValue;
                    AppendRow(title, url);
                }
            }
        }
        function LoadJSON() {
            if (xmlhttp == null) {
                InitXMLHttpRequest();
            }
            if (xmlhttp == null) {
                alert("你的浏览器不支持 XMLHttpRequest");
                return;
            }
            xmlhttp.open("GET", "MyJson.txt?randomNum=" + Date.parse(new Date()), true);
            xmlhttp.setRequestHeader("Content-Type", "text/plain");
            xmlhttp.onreadystatechange = GetJSONMessage;
            xmlhttp.send(null);
        }
        function GetJSONMessage() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var jsonText = xmlhttp.responseText;
                if (jsonText == null || jsonText == "") {
                    alert("返回的JSON数据为空！");
                    return;
                }
                var jsonObj = eval('(' + jsonText + ')');
                var jsonObjLength = jsonObj.length;
                for (var i = 0; i < jsonObjLength; i++) {
                    var item = jsonObj[i];
                    AppendRow(item.title, item.url);
                }
            }
        }
        function AppendRow(title,url) {
            var tb = document.getElementById("tbody_note");
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            td1.innerHTML = title;
            tr.appendChild(td1);
            var td2 = document.createElement("td");
            td2.innerHTML = "<a href='" + url + "'>" + url + "</a>";
            tr.appendChild(td2);
            tb.appendChild(tr);
        }
    </script>

</head>
<body>
<div>
    <input type="button" value="加载XML数据" onclick="LoadXML();" />   
    <input type="button" value="加载JSON数据" onclick="LoadJSON();" />   
</div>
<br /><br />
<table border="1">
    <tr>
      <td>标题</td>
      <td>网址</td>
    </tr>
    <tbody id="tbody_note">  
    </tbody>
  </table>
</body>
</html>

MyInfo.xml

<?xml version="1.0" encoding="utf-8" ?>
<note>
  <t1>
    <title>百度</title>
    <url>http://www.baidu.com</url>
  </t1>
  <t1>
    <title>新浪</title>
    <url>http://www.sina.com.cn</url>
  </t1>
</note>

MyJson.txt

[{ title : "网易", url : "http://www.163.com" }, { title : "搜狐", url : "http://www.sohu.com" }]

谢谢浏览！