总结XMLHttpRequest对象

最新推荐文章于 2025-08-07 10:09:38 发布

Owen William

最新推荐文章于 2025-08-07 10:09:38 发布

阅读量481

点赞数

CC 4.0 BY-SA版权

分类专栏： XMLHttpRequest 文章标签： javascript jquery java web开发 ajax

本文链接：https://blog.youkuaiyun.com/owen_william/article/details/51338090

XMLHttpRequest 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种利用Ajax技术实现股票报价实时更新的方法。通过客户端周期性地向服务器发送请求，获取由服务器生成的随机股票报价，并将其展示在网页上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前言

不管发送怎样的请求XMLHttpRequest都应该按如下步骤进行：

1) 初始化XMLHttpRequest对象。

2) 打开与服务器连接。打开连接时，指定发送请求的方法：采用GET或POST：指定是否采用异步方式。

3) 设置监听XMLHttpRequest状态改变发送请求的事件处理函数。

4) 发送请求。如果采用POST方法发送请求，可发送带参数的请求

2.例子

下面应用模拟了一个简单的证券公告牌，下厕所代码是服务器的响应页面，该页面随机产生了三个数字，假设这三个字就是对应的三个股票的报价。将这三个数字以“$“符号隔开后发送到达客户端

1) 服务器页面的代码second.jsp

 <%@ page contentType="text/html; charset=GBK" language="java"%>
<%@ page import="java.util.Random"%>
<%
// 创建伪随机器，以系统时间作为伪随机器的种子
Random rand = new Random(System.currentTimeMillis());
// 生成三个伪随机数字，并以$符号隔开后发送到客户端
out.println(rand.nextInt(10) + "$" + rand.nextInt(10)
	+ "$" + rand.nextInt(10));
%>

2) 服务器响应生成三个随机数字，三个数字以$符号隔开，因此客户端页面只需要定时向服务器发送简单请求即可，这种请求无须任何参数。客户端代码first.jsp如下。

 <!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Owen.William" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 发送简单请求 </title>
</head>
<body>
mysql的虚拟股票价格：<div id="mysql"
	style="color:red;font-weight:bold;"></div>
tomcat的虚拟股票价格：<div id="tomcat"
	style="color:red;font-weight:bold;"></div>
jetty的虚拟股票价格：<div id="jetty"
	style="color:red;font-weight:bold;"></div>
<script type="text/javascript">
// XMLHttpRequest对象
var xmlrequest;
// 创建XMLHttpRequest对象的初始化函数
function createXMLHttpRequest()
{
	if(window.XMLHttpRequest)
	{ 
		// DOM 2浏览器
		xmlrequest = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		// IE浏览器
		try
		{
			xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e){}
		}
	}
}
// 用于发送简单请求的函数
function getPrice()
{
	// 初始化XMLHttpRequest对象
	createXMLHttpRequest(); 
	var uri = "second.jsp";
	// 打开与服务器的连接
	xmlrequest.open("POST", uri, true); 
	// 指定当XMLHttpRequest状态改变时的事件处理函数
	xmlrequest.onreadystatechange = processResponse;
	// 发送请求
	xmlrequest.send(null);
}
// 当XMLHttpRequest状态改变时，该函数将被触发
function processResponse()
{
	if(xmlrequest.readyState == 4)
	{
		if(xmlrequest.status == 200)
		{
			// 将服务器响应以$符号分割成一个字符串数组
			var prices = xmlrequest.responseText.split("$");
			// 将服务器的响应通过页面显示。
			document.getElementById("mysql").innerHTML=prices[0];
			document.getElementById("tomcat").innerHTML=prices[1];
			document.getElementById("jetty").innerHTML=prices[2];
			// 设置1秒钟后再次发送请求
			setTimeout("getPrice()", 1000);
		}
	}
}
// 指定页面加载完成后指定getPrice()函数
document.body.onload = getPrice;
</script>
</body>
</html>

3) 运行结果