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秒钟页面的股票价格会刷新一次。
Ajax发送简单请求案例的更多相关文章
- Ajax发送XML请求案例
Ajax发送XML请求需求: 根据输入的国家,输出这些国家下面的城市. 如果请求参数较多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户端 ...
- Ajax的简单请求案例
$.ajax({ url : rootPath +'/jasframework/choosepilecontrol/querySubsytem.do', type : "POST" ...
- AJAX发送异步请求教程详解
AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...
- IT兄弟连 JavaWeb教程 使用AJAX发送GET请求并获取响应
GET请求用于获取数据,有时候我们需要获取的数据需要通过"查询参数"进行定位,在这种情况下,我们会将查询参数追加到URL的末尾,令服务器解析. 使用Ajax发送GET请求非常简单, ...
- Django中ajax发送post请求,报403错误CSRF验证失败解决办法
今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...
- Ajax发送Post请求
Ajax发送post请求与发送get请求大致类似.以下看详细实例.首先看JSP显示页面: <form action="servlet/LoginServlet" method ...
- 使用Ajax发送http请求(get&post请求)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...
- AJAX发送PUT请求引发的血案
如果直接发送ajax=put形式的请求 是拿不到请求体中的数据的. Tomcat: 1.将请求体中的数据,封装一个map ...
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
随机推荐
- 【待解决】maven创建web项目报错
创建web项目时报错
- Codeforces Round 313(div1)
A题: 题目大意: 给出内角全为120度的六边形的六条边的边长,求由多少边长为1的等边三角形构成. 解题思路: 将六边形补全为一个大的等边三角形,则大的等边三角形的边长为六边形的相邻三边之和,接着减去 ...
- JAVA 几种多线程的简单实例 Thread Runnable
实例1: class Hello extends Thread{ private String name; public Hello(){} public Hello(String name){ th ...
- [APIO 2010] 巡逻
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1912 [算法] 树的直径 [代码] #include<bits/stdc++. ...
- LINUX/UNIX找回删除的文件
当Linux计算机受到入侵时,常见的情况是日志文件被删除,以掩盖攻击者的踪迹.管理错误也可能导致意外删除重要的文件,比如在清理旧日志时,意外地删除了数据库的活动事务日志.有时可以通过lsof来恢复这些 ...
- LeetCode.888-公平的糖果交换(Fair Candy Swap)
这是悦乐书的第339次更新,第363篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第208题(顺位题号是888).Alice和Bob有不同大小的糖果棒:A[i]是Alic ...
- Ubuntu16.04下将hadoop2.7.3源代码导入到eclipse neon中
0.为什么会有这篇: 这篇文章的目的在于帮助想学习hadoop源码的内容,却在导入的过程中出现了各种问题的人. 或许你一定找了很多博客都无果,那么不用担心,我和你一样,这也是这篇文章存在的意义,废话少 ...
- jQuery hooks源码学习
段落不够清晰,待整理 看jQuery源码的时候,经常见到含有hooks标志的对象,如cssHooks, attrHooks, propHooks, valHooks. 下面对其中的一段进行解读. jQ ...
- 利用JavaScript实现文本框改文字功能
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- Android学习——Button填充颜色及实现圆角
在drawable下新建文件夹bt_shape.xml,如下: <?xml version="1.0" encoding="utf-8"?> < ...