Ajax发送简单请求

最新推荐文章于 2021-12-16 11:17:34 发布

q1054261752

最新推荐文章于 2021-12-16 11:17:34 发布

阅读量1.1k

点赞数

分类专栏： Ajax

Ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

所谓简单请求，是指不包含任何参数的请求。这种请求通常用于自动刷新的应用，例如证券交易所的实时信息发送。这种请求通常用于公告性质的响应，公告性质的响应无须客户端的任何请求参数，而是由服务器根据自动生成。对于简单请求，因为无须发送请求参数，所以采用POST和GET方式并没有太大区别。不管发送怎样的请求XMLHttpRequest都应该按如下步骤进行：

1.初始化XMLHttpRequest对象

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

3.设置监听XMLHttpRequest状态改变的事件处理函数。

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

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

1.承载变化内容的服务器端second.jsp页面

<span style="font-size:10px;"><%@ 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));
%></span>

2.客户端页面first.html接收服务器的数据

1.一个创建对象的XMLHttpRequest的函数

2.一个HTML中调用的函数，也是发送请求的函数

3.一个是XMLHttpRequest对象状态改变时的事件处理函数，两个状态分别是 xmlrequest.readyState==4和xmlrequest.status==200并且可以通过 xmlrequest.responseText 获取文本内容，xmlrequest.responseXML

该属性用于获取服务器的响应文本

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> readyStatus属性 </title>
</head>
<body>
mysql的虚拟股票价格：<div id="mysql" style="color:red;font-weight:bold;"></div>
tomat的虚拟股票价格：<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 = "second1.jsp";
		//打开与服务器的连接
		
		xmlrequest.open("POST",uri,true);
		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);
			}
					
		}
		
	}
	<span style="color:#ff0000;">document.body.onload = getPrice();</span>
</script>
</body>
</html>