`

2、使用innerHTML属性创建动态内容——ajax基础笔记

AjaxIE浏览器HTMLJavaScript 
阅读更多

使用innerHTML属性创建动态内容

如果结合作用HTML元素的innerHTML属性，responseText属性会变得非常有用。

innerHTML.html清单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using responseText with innerHTML</title>
    
<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
    
function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "innerHTML.xml", true);
    xmlHttp.send(null);
}
    
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {//把responseText直接赋给innerHTML
            document.getElementById("results").innerHTML = xmlHttp.responseText;
        }
    }
}
</script>
</head>

<body>
    <form action="#">
        <input type="button" value="Search for Today's Activities" onclick="startRequest();"/>
    </form>
    <div id="results"></div>
</body>
</html>

 innerHTML.xml清单：

<table border="1">
    <tbody>
        <tr>
            <th>Activity Name</th>
            <th>Location</th>
            <th>Time</th>
        </tr>
        <tr>
            <td>Waterskiing</td>
            <td>Dock #1</td>
            <td>9:00 AM</td>
        </tr>    
        <tr>
            <td>Volleyball</td>
            <td>East Court</td>
            <td>2:00 PM</td>
        </tr>    
        <tr>
            <td>Hiking</td>
            <td>Trail 3</td>
            <td>3:30 PM</td>
        </tr>    
    </tbody>
</table>

运行结果：


使用responseText和innerHTML可以大简化向页面增加动态内容的工作。遗憾的是，这种方法存在一些缺陷。因为innerHTML属性不是HTML元素的标准属性，所以与标准兼容的浏览器不一定提供这个属性的实现。不过，当前大多数浏览器支持innerHTML属性。但是，IE是率先使用innerHTML的浏览器，但它的innerHTML实现反而最受限制。现在许多浏览器都将innerHTML属性作为所有HTML元素的读/写属性。与此不同的是，IE则有所限制，在表和表行之类的HTML元素上innerHTML属性仅仅是只读属性，从一定程度上看这就是限制了它的使用。

分享到：
| 1、使用XMLHttpRequest对象——ajax基础笔 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics