Ajax发送简单请求案例

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

初始化XMLHttpRequest对象
打开与服务器的连接，打开连接时，指定发送请求的方法：采用GET或POST；指定是否采用异步方式
设置监听XMLHttpRequest状态改变的事件处理函数
发送请求，如采用POST方法发送请求，可发送带参数的请求。

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

程序清单：Ajax02request/simple/second.jsp

<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.util.*" %>

<%

    //创建伪随机器，以系统时间作为随机器的种子

    Random rand = new Random(System.currentTimeMillis());

    //生成三个伪随机数字，并以$符号隔开后发送到客户端

    out.println(rand.nextInt(10) + "$" + rand.nextInt(10) + "$" + rand.nextInt(10));

 %>

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

程序清单：Ajax02request/simple/first.html

<!DOCTYPE html>

<html>

<head>

    <meta name="author" content="silvan" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <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() 方法用于在指定的毫秒数后调用函数或计算表达式

           setTimeout("getPrice()", 1000);

       }

    }

}

// 指定页面加载完成后指定getPrice()函数

document.body.onload = getPrice;

</script>

</body>

</html>

Open方法通常有三个参数：第一个参数指定发送请求的方式——只能是POST或GET，通常建议采用POST方式；第二个参数指定发送请求的服务器资源地址，虽然"second.jsp"在simple文件夹下，但是由于first.html也在simple文件夹下，所以访问地址直接写"second.jsp"就好了，如果处于不同文件夹下需要将地址写全；第三个参数只能为true或false，用于指定是否采用异步方式发送请求，一般默认true。上面的应用用于发送简单请求，请求不包含任何参数，发送请求时open（）方法的第一个参数决定了发送请求的方式，例如本应用指定以POST方式发送请求。

项目概况：

将项目加入tomcat，运行tomcat。

在浏览器中访问：http://localhost:8081/Ajax02request/simple/first.html

大概每隔1秒钟页面的股票价格会刷新一次。

posted @ 2017-08-30 11:04 silvan_happy 阅读(1246) 评论(0) 编辑收藏举报

刷新页面返回顶部

zhouyeqin

Ajax发送简单请求案例

公告