使用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属性仅仅是只读属性,从一定程度上看这就是限制了它的使用。
分享到:
相关推荐
3.1.1 使用innerhtml属性创建动态内容 37 3.1.2 将响应解析为xml 40 3.1.3 使用w3c dom动态编辑页面 45 3.2 发送请求参数 52 3.2.1 请求参数作为xml发送 59 3.2.2 使用json向服务器发送数据 64 3.3 小结 70 ...
解决ajax返回innerHTML中javascript不能运行问题
超全面javaweb第4天-_08_innerHTML属性
2.4.5 捷径:使用innerHTML属性 2.5 使用XML技术异步加载数据 2.5.1 IFrame 2.5.2 XMLDocument和XMLHttpRequest对象 2 5.3 向服务器发送请求 2.5.4 使用回调函数监视请求 2.5.5 完整的生命周期 2.6 Ajax有何不同 2.7...
博文链接:https://wangtong40.iteye.com/blog/53718
Innerself – 使用innerHTML将React / Redux转换成50行代码
如何使用Ajax 初始化对象 指定响应处理函数 发出http请求 处理服务器返回的信息 一个初步的Ajax开发框架 异常处理机制 中文乱码问题及其解决方案 使用responseText处理返回的普通文本信息 实战技巧:数据校验 实战...
innerHTML的使用document.getElementById("id").innerHTML = "contenttext";
innerHTML的简单应用
innerHTML属性用来读取或设置某个节点内的HTML代码。 outerHTML属性用来读取或设置HTML代码时,会把节点本身包括在内。 textContent属性用来读取或设置节点包含的文本内容。 innerText属性和outerText属性在读取元素...
NULL 博文链接:https://newtime.iteye.com/blog/461146
简单日历和innerHTML使用 javascript的简单应用实例 可以自定义Css
15.7.1 innerHTML属性和元素的内容 15.7.2 更改元素的内容 15.7.3 使用DOM创建新元素 15.7.4 在节点前插入 15.7.5 为节点创建属性 15.7.6 DOM回顾:创建博客 15.7.7 使用DOM创建...
利用纯javascript来实现的动态表格!!!超级实用知识点大概包括,jq、基本dom的获取、创建节点、innerHTML添加内容、js给标签创建属性、动态在表格中添加按钮。
打包好的Ajax代码,实现了对象化,使用时直接调用就可以了,调用时需要重构三个方法,如下: function onerror() //错误处理方法 { alert("error"); } function getInfo() //发送请求方法,包括请求方法和请求...
本文实例讲述了javascript中innerText和innerHTML属性用法。分享给大家供大家参考。具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个...
收集一些基础的Ajax学习知识实例,这些实例基于HTML静态网页格式,并配合封装好的Ajax操作类,实现一些不同的页面无刷新操作效果,其中封装类中的一些代码释义摘录如下: 1、回调函数,用于处理所有方法中function...