您的位置：首页 > 理论基础 > 计算机网络

总结XMLHttpRequest对象

2016-05-07 15:17 357 查看

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) 运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航