Ajax基础篇之使用XMLHttpRequest返回html

一、前言

HTML由一些普通文本组成。如果服务器通过XMLHttpRequest发送 HTML,文本将存储在responseText属性中。不必从responseText属性中读取数据,可以直接将它插入到页面中。插入HTML代码最简单的方法是更新这个元素的 innerHTML 属性。

二、步骤

♦搭建一个动态的Web工程AjaxReturnHtml
Ajax基础篇之使用XMLHttpRequest返回html的照片 - 1
♦新建三个jsp页面,apple.jsp,balana.jsp,orange.jsp页面内容如下:

<h2>Apple</h2>
<ul>
	<li>number:001</li>
	<li>price:20</li>
	<li>qty:100</li>
</ul>
<h2>Balana</h2>
<ul>
	<li>number:002</li>
	<li>price:10.99</li>
	<li>qty:30</li>
</ul>
<h2>Orange</h2>
<ul>
	<li>number:003</li>
	<li>price:5.99</li>
	<li>qty:20</li>
</ul>

♦再新建一个index.jsp页面,jsp页面内容如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fruit</title>
<script type="text/javascript">
	window.onload = function() {
		var aNodes = document.getElementsByTagName("a");
		for (var i = 0; i < aNodes.length; i++) {
			aNodes[i].onclick = function() {
				var request = new XMLHttpRequest();
				var method = "GET";
				var url = this.href;
				request.open(method, url);
				request.send(null);
                                //指定响应处理函数
				request.onreadystatechange = function() {
                                        //对象的状态 4表示完成
					if (request.readyState == 4) {
                                                //信息已成功,返回200
						if (request.status == 200 || request.status == 304) {
                                                        //开始处理信息
							document.getElementById("details").innerHTML=request.responseText;
						}
					}
				}
				return false;
			}
		}
	}
</script>
</head>
<body>
	<ul>
		<li><a href="files/apple.jsp">Apple</a></li>
		<li><a href="files/balana.jsp">Balana</a></li>
		<li><a href="files/orange.jsp">Orange</a></li>
	</ul>
	<div id="details"></div>
</body>
</html>

这个页面主要是通过超链接获取三个界面的html标记,并返回在界面上显示。
♦部署应用,启动动服务,访问链接:http://localhost:8080/AjaxReturnHtml/html/index.jsp
Ajax基础篇之使用XMLHttpRequest返回html的照片 - 3

三、总结

HTML 使用小结
优点:
从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。
HTML 的可读性好。
HTML 代码块与 innerHTML 属性搭配,效率高。
缺点:若需要通过 AJAX 更新一篇文档的多个部分,HTML 不合适

博客地址:http://www.marsitman.com/ajax/ajax_return_html.html
版权声明:本文为博主原创文章,允许转载,但转载必须标明出处。

 

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!



点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注