ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax を使用して不要な更新を解決する 2 つの方法
Ajax を使用して不要な更新を解決する 2 つの方法
- 亚连オリジナル
- 2018-05-22 16:55:281396ブラウズ
ここで、不要な更新を解決するための Ajax の 2 つの方法を紹介します。今からそれを皆さんと共有し、皆さんの参考にしてください。
コントローラー サーブレットは簡単な変更を提供します:
Ajax システムの場合、サーバーの応答はページのコンテンツ全体である必要はなく、
必要なデータのみにすることができます。コントローラーはデータ要求を JSP ページに転送できません。
現時点で、コントローラーには 2 つのオプションがあります:
1 単純な応答データを直接生成します。
このモードでは、サーブレットは応答を通じてページ出力ストリームを直接取得し、
出力ストリームを通じて文字応答を生成します。
package pers.zkr.chat.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import pers.zkr.chat.service.ChatService;
@WebServlet(urlPatterns={"/chat.do"})
public class ChatServlet extends HttpServlet {
@Override
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String msg=request.getParameter("chatMsg");
System.out.println(msg);
if(msg!=null&&!msg.equals("")){
String user=(String)request.getSession().getAttribute("user");
System.out.println(user+"user");
ChatService.instance().addMsg(user, msg);
}
//设置响应内容的类型
<strong>response.setContentType("text/html;charset=utf-8");
// 获取页面输出流
PrintWriter out = response.getWriter();
//直接生成响应
out.println(ChatService.instance().getMsg());</strong>
request.setAttribute("msg",ChatService.instance().getMsg());
forward("/chat.jsp", request , response);
}
private void forward(String url, HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.getRequestDispatcher(url)
.forward(request , response);
}
}2. 単純な JSP に切り替え、JSP ページを使用して単純な応答を生成します。
コントローラーはリクエストを別の JSP ページに転送し、JSP ページはチャット情報の出力のみを担当します
ここでは、コントローラーによって送信されたデータを受信するための JSP ページが必要です。これは、元のページの場合は、次のようにします。
1) XMLHttpRequest オブジェクトを作成します
2) リクエストを送信します
3) サーバーからレスポンスを受信します package org.crazyit.chat.web;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.*;
import org.crazyit.chat.service.*;
/**
* Description:
* <br/>网站: <a href=http://www.jb51.net>脚本之家</a>
* <br/>Copyright (C), 2001-2014, Yeeku.H.Lee
* <br/>This program is protected by copyright laws.
* <br/>Program Name:
* <br/>Date:
* @version 1.0
*/
@WebServlet(urlPatterns={"/chat.do"})
public class ChatServlet extends HttpServlet
{
public void service(HttpServletRequest request,
HttpServletResponse response)throws IOException,ServletException
{
// 设置使用GBK字符集来解析请求参数
request.setCharacterEncoding("utf-8");
String msg = request.getParameter("chatMsg");
if ( msg != null && !msg.equals(""))
{
// 取得当前用户
String user = (String)request.getSession(true)
.getAttribute("user");
// 调用ChatService的addMsg来添加聊天消息
ChatService.instance().addMsg(user , msg);
}
// 将全部聊天信息设置成request属性
<strong>request.setAttribute("chatList" ,
ChatService.instance().getMsg());</strong>
// 转发到chatreply.jsp页面
forward("/chatreply.jsp" , request , response);
}
// 执行转发请求的方法
private void forward(String url , HttpServletRequest request,
HttpServletResponse response)throws ServletException,IOException
{
// 执行转发
request.getRequestDispatcher(url)
.forward(request,response);
}
}
<%@ page contentType="text/html;charset=GBK" errorPage="error.jsp"%>
<%-- 输出当前的聊天信息 --%>
${requestScope.chatList}
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>聊天页面</title>
</head>
<body onload="sendEmptyRequest();">
<p style="width:780px;border:1px solid black;text-align:center">
<h3>聊天页面</h3>
<p>
<textarea id="chatArea" name="chatArea" cols="90"
rows="30" readonly="readonly"></textarea>
</p>
<p align="center">
<input id="chatMsg" name="chatMsg" type="text"
size="90" onkeypress="enterHandler(event);"/>
<input type="button" name="button" value="提交"
onclick="sendRequest();"/>
</p>
</p>
<script type="text/javascript">
var input = document.getElementById("chatMsg");
input.focus();
var XMLHttpReq;
// 创建XMLHttpRequest对象
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
// DOM 2浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// IE浏览器
try
{
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
}
// 发送请求函数
function sendRequest()
{
// input是个全局变量，就是用户输入聊天信息的单行文本框
var chatMsg = input.value;
// 完成XMLHttpRequest对象的初始化
createXMLHttpRequest();
// 定义发送请求的目标URL
var url = "chat.do";
// 通过open方法取得与服务器的连接
// 发送POST请求
XMLHttpReq.open("POST", url, true);
// 设置请求头-发送POST请求时需要该请求头
XMLHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定XMLHttpRequest状态改变时的处理函数
XMLHttpReq.onreadystatechange = processResponse;
// 清空输入框的内容
input.value = "";
// 发送请求，send的参数包含许多的key-value对。
// 即以：请求参数名=请求参数值 的形式发送请求参数。
XMLHttpReq.send("chatMsg=" + chatMsg);
}
//定时请求服务器
function sendEmptyRequest()
{
// 完成XMLHttpRequest对象的初始化
createXMLHttpRequest();
// 定义发送请求的目标URL
var url = "chat.do";
// 发送POST请求
XMLHttpReq.open("POST", url, true);
// 设置请求头-发送POST请求时需要该请求头
XMLHttpReq.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 指定XMLHttpRequest状态改变时的处理函数
XMLHttpReq.onreadystatechange = processResponse;
// 发送请求,，不发送任何参数
XMLHttpReq.send(null);
// 指定0.8s之后再次发送请求
setTimeout("sendEmptyRequest()" , 800);
}
// 处理返回信息函数
function processResponse()
{
// 当XMLHttpRequest读取服务器响应完成
if (XMLHttpReq.readyState == 4)
{
// 服务器响应正确（当服务器响应正确时，返回值为200的状态码）
if (XMLHttpReq.status == 200)
{
// 使用chatArea多行文本域显示服务器响应的文本
document.getElementById("chatArea").value
= XMLHttpReq.responseText;
}
else
{
// 提示页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
function enterHandler(event)
{
// 获取用户单击键盘的“键值”
var keyCode = event.keyCode ? event.keyCode
: event.which ? event.which : event.charCode;
// 如果是回车键
if (keyCode == 13)
{
sendRequest();
}
}
</script>
</body>
</html> 以上、皆様の参考になれば幸いです。
関連記事:
ajaxドラッグアンドドロップによるファイルアップロードを実装する(コード付き) jquery ajaxでファイルアップロード機能を実装する(コード付き) Ajaxを介して折れ線グラフを動的に読み込む方法(写真)とテキスト) チュートリアル)以上がAjax を使用して不要な更新を解決する 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。