总结XMLHttpRequest对象

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

总结XMLHttpRequest对象相关推荐

Ajax异步XMLHttpRequest对象
示例Ajax: <%@ page language="java" contentType="text/html; charset=utf-8"pageEn ...
转载 Xmlhttprequest对象池
2019独角兽企业重金招聘Python工程师标准>>> 在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就 ...
[转]建一个XMLHttpRequest对象池
在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也 ...
XMLHttpRequest 对象
XMLHttpRequest 对象用于在后台与服务器交换数据. 什么是 XMLHttpRequest 对象? XMLHttpRequest 对象用于在后台与服务器交换数据. XMLHttpReques ...
艾伟：详解AJAX核心 —— XMLHttpRequest 对象 (下)
继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的.那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Documen ...
XmlHttpRequest 对象详解
最通用的定义为:XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新 ...
介绍一下XMLHttpRequest对象，他有哪些常用方法和属性
XMLHttpRequest是ajax的核心,通过XMLHttpRequest对象,Web开发人员可以在页面加载以后进行页面的局部更新常用的方法: open(get/post,url,是否异步)创建 ...
jquery与ajax的XMLHttpRequest对象介绍
首先认识一个对象这个对象叫XMLHttpRequest XMLHttpRequest对象可以提供在不刷新页面的情况下向服务器发送异步请求,并且接受服务器端返回的结果.从而实现局部更新当前页面的功 ...
JS使用XMLHttpRequest对象POST收发JSON格式数据
JavaScirpt中的XMLHttpRequest对象提供了对 HTTP 协议的完全访问,使用该对象可以在不刷新页面的情况与服务器交互数据.XMLHttpRequest是实现AJAX技术的关键对象, ...
Ajax入门（创建 XMLHttpRequest 对象）
XMLHttpRequest 是 AJAX 的基础. 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest ...

总结XMLHttpRequest对象

1.前言

2.例子

总结XMLHttpRequest对象相关推荐

最新文章

热门文章