反向Ajax 30分钟快速掌握
这篇文章主要介绍了反向Ajax 30分钟快速掌握的相关资料,需要的朋友可以参考下
场景1：当有新邮件的时候，网页自动弹出提示信息而无需用户手动的刷新收件箱。
场景2：当用户的手机扫描完成页面中的二维码以后，页面会自动跳转。
场景3：在类似聊天室的环境中有任何人发言，所有登录用户都可以即时看见信息。
与传统的MVC模型请求必须从客户端发起由服务器响应相比，使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验。本文将分两个部分讨论反向Ajax技术，包括：Comet和WebSocket。文章旨在演示如何实现以上两种技术手段，Struts2或SpringMVC中的应用并未涉及。此外，Servlet的配置也采用注解的方式，相关知识大家可以参考其它资料。
一、Comet（最佳的兼容手段）
Comet本质上则是这样的一种概念：能够从服务器端向客户端发送数据。在一个标准的 HTTP Ajax 请求中，数据是发送给服务器端的，反向 Ajax 以某些特定的方式来模拟发出一个 Ajax 请求，这样的话，服务器就可以尽可能快地向客户端发送事件。由于普通HTTP请求往往会伴随页面的跳转，而推送事件则需要浏览器停留在同一个页面或者框架下，因此Comet的实现只能够通过Ajax来完成。
它的实现过程如下：页面加载的时候随即向服务器发送一条Ajax请求，服务器端获取请求并将它保存在一个线程安全的容器中（通常为队列）。同时服务器端仍然可以正常响应其他请求。当需要推送的事件到来的时候，服务器遍历容器中的请求在返回应答后删除。于是所有停留在页面中的浏览器都会获得该应答，并再次发送Ajax请求，重复上述过程。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<base href="<%=basePath%>">
<head>
<title>WebSocket</title>
<script type="text/javascript" src="static/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
connect();
$("#btn").click(function() {
var value = $("#message").val();
$.ajax({
url : "longpolling?method=onMessage&msg=" + value,
cache : false,
dataType : "text",
success : function(data) {
}
});
});
});
function connect() {
$.ajax({
url : "longpolling?method=onOpen",
cache : false,
dataType : "text",
success : function(data) {
connect();
alert(data);
}
});
}
</script>
</head>
<body>
<h1>LongPolling</h1>
<input type="text" id="message" />
<input type="button" id="btn" value="发送" />
</body>
</html>我们注意到，由btn发送的请求其实并不需要获取应答。整个过程的关键是需要客户端始终让服务器保持connect()的请求。而服务器端首先需要支持这种异步的响应方式，幸运的是目前为止绝大部分的Servlet容器都已经提供了良好的支持。下面以Tomcat为例：
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Queue;
import java.util.concurrent.ConcurrentLinkedQueue;
import javax.servlet.AsyncContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(value="/longpolling", asyncSupported=true)
public class Comet extends HttpServlet {
private static final Queue<AsyncContext> CONNECTIONS = new ConcurrentLinkedQueue<AsyncContext>();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String method = req.getParameter("method");
if (method.equals("onOpen")) {
onOpen(req, resp);
} else if (method.equals("onMessage")) {
onMessage(req, resp);
}
}
private void onOpen(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
AsyncContext context = req.startAsync();
context.setTimeout(0);
CONNECTIONS.offer(context);
}
private void onMessage(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String msg = req.getParameter("msg");
broadcast(msg);
}
private synchronized void broadcast(String msg) {
for (AsyncContext context : CONNECTIONS) {
HttpServletResponse response = (HttpServletResponse) context.getResponse();
try {
PrintWriter out = response.getWriter();
out.print(msg);
out.flush();
out.close();
context.complete();
CONNECTIONS.remove(context);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}ConcurrentLinkedQueue是Queue队列的一个线程安全实现，这里使用它来作为保存请求的容器。AsyncContext是Tomcat支持的异步环境，不同的服务器使用的对象也略有不同。Jetty支持的对象是Continuation。完成了广播的请求需要通过context.complete()将相关请求结束，并使用CONNECTIONS.remove(context)删除队列。
二、WebSocket（来自HTML5的支持）
使用 HTTP 长轮询的 Comet 是可靠地实现反向 Ajax 的最佳方式，因为现在所有浏览器都提供了这方面的支持。
WebSockets 在 HTML5 中出现，是比 Comet 更新的反向 Ajax 技术。WebSockets 支持双向、全双工通信信道，而且许多浏览器（Firefox、Google Chrome 和 Safari）也支持它。连接通过 HTTP 请求（也称为 WebSockets 握手）和一些特殊的标头 (header)。连接一直处于激活状态，您可以用 JavaScript 编写和接收数据，正如您使用原始 TCP 套接字一样。
通过输入 ws:// 或 wss://（在 SSL 上）启动 WebSocket URL。如图：
首先：WebSockets并非在所有浏览器上都能获得良好的支持，显然IE又拖了后腿。因此当你打算使用这项技术之前必须考虑到用户的使用环境，如果你的项目面向的是互联网或者包括手机端用户，奉劝大家三思。
其次：WebSockets提供的请求区别于普通的HTTP请求，它是一种全双工通信且始终处于激活状态（如果你不去关闭它的话）。这就意味着你不用每次获得应答后再次向服务器发送请求，这样可以节约大量的资源。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
String ws = "ws://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<base href="<%=basePath%>">
<head>
<title>WebSocket</title>
<script type="text/javascript" src="static/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var websocket = null;
if ("WebSocket" in window){
websocket = new WebSocket("<%=ws%>websocket");
} else {
alert("not support");
}
websocket.onopen = function(evt) {
}
websocket.onmessage = function(evt) {
alert(evt.data);
}
websocket.onclose = function(evt) {
}
$("#btn").click(function() {
var text = $("#message").val();
websocket.send(text);
});
});
</script>
</head>
<body>
<h1>WebSocket</h1>
<input type="text" id="message" />
<input type="button" id="btn" value="发送"/>
</body>
</html>JQuery对WebSocket还未提供更良好的支持，因此我们必须使用Javascript来编写部分代码（好在并不复杂）。并且打部分常见的服务器都可以支持ws请求，以Tomcat为例。在6.0版本中WebSocketServlet对象已经被标注为@java.lang.Deprecated，7.0以后的版本支持jsr365提供的实现，因此你必须使用注解来完成相关配置。
package servlet;
import java.io.IOException;
import java.util.Queue;
import java.util.concurrent.ConcurrentLinkedQueue;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket")
public class WebSocket {
private static final Queue<WebSocket> CONNECTIONS = new ConcurrentLinkedQueue<WebSocket>();
private Session session;
@OnOpen
public void onOpen(Session session) {
this.session = session;
CONNECTIONS.offer(this);
}
@OnMessage
public void onMessage(String message) {
broadcast(message);
}
@OnClose
public void onClose() {
CONNECTIONS.remove(this);
}
private synchronized void broadcast(String msg) {
for (WebSocket point : CONNECTIONS) {
try {
point.session.getBasicRemote().sendText(msg);
} catch (IOException e) {
CONNECTIONS.remove(point);
try {
point.session.close();
} catch (IOException e1) {
}
}
}
}
}三、总结（从请求到推送）
在传统通信方案中，如果系统 A 需要系统 B 中的信息，它会向系统 B 发送一个请求。系统 B 将处理请求，而系统 A 会等待响应。处理完成后，会将响应发送回系统 A。在同步 通信模式下，资源使用效率比较低，这是因为等待响应时会浪费处理时间。
在异步 模式下，系统 A 将订阅它想从系统 B 中获取的信息。然后，系统 A 可以向系统 B 发送一个通知，也可以立即返回信息，与此同时，系统 A 可以处理其他事务。这个步骤是可选的。在事件驱动应用程序中，通常不必请求其他系统发送事件，因为您不知道这些事件是什么。在系统 B 发布响应之后，系统 A 会立即收到该响应。
Web 框架过去通常依赖传统 “请求-响应” 模式，该模式会导致页面刷新。随着 Ajax、Reverse Ajax 以及 WebSocket 的出现，现在可以将事件驱动架构的概念轻松应用于 Web，获得去耦合、可伸缩性和反应性 (reactivity) 等好处。更良好的用户体验也会带来新的商业契机。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
Atas ialah kandungan terperinci 反向Ajax 30分钟快速掌握. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX
Feb 20, 2024 am 10:07 AM
Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.
Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403
Feb 19, 2024 pm 05:55 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403
PHP dan Ajax: Membina enjin cadangan autolengkap
Jun 02, 2024 pm 08:39 PM
Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Kes praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.
Apakah perbezaan dalam laluan 'Komputer Saya' dalam Win11? Cara cepat untuk mencarinya!
Mar 29, 2024 pm 12:33 PM
Apakah perbezaan dalam laluan "Komputer Saya" dalam Win11? Cara cepat untuk mencarinya! Memandangkan sistem Windows sentiasa dikemas kini, sistem Windows 11 terkini turut membawakan beberapa perubahan dan fungsi baharu. Salah satu masalah biasa ialah pengguna tidak dapat mencari laluan ke "Komputer Saya" dalam sistem Win11 Ini biasanya merupakan operasi mudah dalam sistem Windows sebelumnya. Artikel ini akan memperkenalkan cara laluan "Komputer Saya" berbeza dalam sistem Win11, dan cara mencarinya dengan cepat. Dalam Windows1
Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?
Feb 23, 2024 pm 04:27 PM
Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat
Panduan Membina Laman Web WordPress: Membina Laman Web Peribadi dengan Cepat
Mar 04, 2024 pm 04:39 PM
Panduan Membina Laman Web WordPress: Cepat Membina Laman Web Peribadi Dengan kemunculan era digital, mempunyai laman web peribadi telah menjadi bergaya dan perlu. Sebagai alat pembinaan laman web yang paling popular, WordPress menjadikannya lebih mudah dan lebih mudah untuk membina tapak web peribadi. Artikel ini akan memberi anda panduan untuk membina laman web peribadi dengan cepat, termasuk contoh kod khusus, saya harap ia dapat membantu rakan-rakan yang ingin memiliki tapak web mereka sendiri. Langkah 1: Beli nama domain dan pengehosan Sebelum mula membina tapak web peribadi, anda mesti membeli sendiri
Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?
Mar 09, 2024 pm 05:36 PM
Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:
PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik
Jun 06, 2024 pm 01:12 PM
Ajax (JavaScript Asynchronous dan XML) membenarkan menambah kandungan dinamik tanpa memuatkan semula halaman. Menggunakan PHP dan Ajax, anda boleh memuatkan senarai produk secara dinamik: HTML mencipta halaman dengan elemen kontena dan permintaan Ajax menambah data pada elemen selepas memuatkannya. JavaScript menggunakan Ajax untuk menghantar permintaan kepada pelayan melalui XMLHttpRequest untuk mendapatkan data produk dalam format JSON daripada pelayan. PHP menggunakan MySQL untuk menanyakan data produk daripada pangkalan data dan mengekodnya ke dalam format JSON. JavaScript menghuraikan data JSON dan memaparkannya dalam bekas halaman. Mengklik butang mencetuskan permintaan Ajax untuk memuatkan senarai produk.
