zoukankan      html  css  js  c++  java
  • 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秒钟页面的股票价格会刷新一次。

      

  • 相关阅读:
    BZOJ1187 [HNOI2007]神奇游乐园(插头dp)
    BZOJ4926 皮皮妖的递推
    BZOJ3684 大朋友和多叉树(多项式相关计算)
    BZOJ4574 [Zjoi2016]线段树
    杜教筛进阶+洲阁筛讲解+SPOJ divcnt3
    从几场模拟考试看一类分块算法
    bzoj3142 luogu3228 HNOI2013 数列
    luogu3244 bzoj4011 HNOI2015 落忆枫音
    codeforces 286E Ladies' Shop
    BZOJ4825 单旋
  • 原文地址:https://www.cnblogs.com/zhouyeqin/p/7452074.html
Copyright © 2011-2022 走看看