Ajax を使用してページの更新を最適化する 2 つの方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Ajax を使用してページの更新を最適化する 2 つの方法

php中世界最好的语言

Apr 02, 2018 pm 02:11 PM

ajax

今回は、Ajax 最適化されたページ更新の 2 つの方法を紹介します。Ajax 最適化されたページ更新の注意事項は何ですか? 実際のケースを見てみましょう。

コントローラーサーブレットは簡単な変更を提供します:

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}

ログイン後にコピー

html ページ

<!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>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、の他の関連記事に注目してください。 PHPの中国語サイトです！

推奨読書:

Blodを使用してAjaxプログレスバーのダウンロードを行う

複数の非同期Ajaxリクエストによって引き起こされるコードのネストを解決する方法

以上がAjax を使用してページの更新を最適化する 2 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7529

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

jQuery AJAXリクエスト403エラーを解決する方法 Feb 19, 2024 pm 05:55 PM

jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラーコード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか? Mar 09, 2024 pm 05:36 PM

Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプルコードです。

PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアントスクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページコンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

PHP と Ajax: Ajax のセキュリティを向上させる方法 Jun 01, 2024 am 09:34 AM

Ajax セキュリティを向上させるには、いくつかの方法があります。 CSRF 保護: トークンを生成してクライアントに送信し、それを検証リクエストのサーバー側に追加します。 XSS 保護: htmlspecialchars() を使用して入力をフィルタリングし、悪意のあるスクリプトの挿入を防ぎます。 Content-Security-Policy ヘッダー: 悪意のあるリソースの読み込みを制限し、スクリプトとスタイルシートの読み込みを許可するソースを指定します。サーバー側の入力を検証する: Ajax リクエストから受け取った入力を検証して、攻撃者による入力の脆弱性の悪用を防ぎます。安全な Ajax ライブラリを使用する: jQuery などのライブラリによって提供される自動 CSRF 保護モジュールを利用します。

ajaxのバージョンは何ですか? Nov 22, 2023 pm 02:00 PM

Ajax は特定のバージョンではなく、一連のテクノロジーを使用して Web ページのコンテンツを非同期に読み込み、更新するテクノロジーです。 Ajax には特定のバージョン番号はありませんが、ajax のバリエーションまたは拡張機能がいくつかあります: 1. jQuery AJAX; 2. Axios; 3. Fetch API; 4. JSONP; 5. XMLHttpRequest Level 2; 6. WebSocket; 7. Server -送信イベント; 8、GraphQL など

See all articles

Ajax を使用してページの更新を最適化する 2 つの方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック