検索
ホームページバックエンド開発PHPチュートリアルAjax の技術構成と中心原理の説明

Ajax の技術構成と中心原理の説明

Jan 12, 2018 pm 04:19 PM
ajax原理

この記事では主に JavaScript パフォーマンス最適化のための関数スロットルと関数デバウンスについて紹介します。興味のある方は参考にしていただければ幸いです。

1. Ajax
の特徴: 部分的な更新、ユーザーエクスペリエンスの向上、データはサーバープロバイダーからロードされます

2. AJax
の技術構成は新しいテクノロジーではなく、以前のテクノロジー
Ajax: 非同期 Javascript と
JavaScript: サーバーにリクエストを送信し、返された結果を取得し、ページを更新します。
XML: データをカプセル化するために使用されます。


3. Ajax の基本原則

XMLHttpRequst オブジェクト: このオブジェクトを通じてサーバーにリクエストを送信します。
これは、すべての最新のブラウザー (Chrome、IE5 以降) でサポートされている非同期リクエスト テクノロジーです

1) XMLHttpReuest オブジェクトを作成します

IE 以外のブラウザー (Mozilla/Safari): var xhr=new XMLHttpRequest();
IE: xhr =new ActiveXObject ("Msxml2.POST"、URL、true/false): サーバーへの接続を確立するために使用されます。 パラメーター 1: 送信メソッド、post または get パラメーター 3:同期または非同期リクエストを示します。true: 非同期リクエストを示します
false: 同期リクエストを示します
send(data): リクエストを送信します
Parameters: 送信されたコンテンツ。
POST メソッド: データは送信されたパラメーター、send(username=root&password=abc123); GET メソッド: send(null)

b) 属性:
onreadystatechange: 状態が変化したときにコールバック関数を設定します。サーバーデータを取得するために使用されます。
onreadystatechange=function(){


readyState: サーバーステータス応答

ステータスコード:

0: 未初期化

1: ロード中

2: ロード完了
3: リクエスト進行中
4: リクエスト完了

responseText: サーバーから返されたデータ (テキスト形式)
responseXML: サーバーから返されたデータ (XML 形式)
概要:

XMLHttpRequest を使用する手順:
1) XMLHttpRequest オブジェクトを作成します
2) リクエスト メソッドとURL
xhr.open("GET/POST","url",true/false)、trueは非同期リクエスト、falseは同期リクエストを意味します

3)状態変化時のコールバック関数を設定します

xhr.onreadystatechange=function(){ }
0:未初期化

1:読み込み中

2:読み込み完了 3:リクエスト進行中 4:リクエスト完了
4)送信リクエスト
xhr.send(data),
投稿後の場合はdataが送信されたデータ。取得のために送信された場合、パラメーターは null にすることができます。


ユーザーがログインした HTML ページを決定します:




<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<body>
  用户名:<input type="text" name="username" id="username"><br>
  密码:<input type="password" name="password" id="password">
  <a href="javascript:chkUser();">登录</a>
  <p id="res"></p>
</body>

<script type="text/javascript">
  var xhr;
  /**
  * 创建XMLHttpRequest对象
  */
 function createXMLHttpRequest(){
  //1、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
      //非IE内核浏览器
     xhr=new XMLHttpRequest(); 
    }else{
      //IE浏览器
      try{
        xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e){
       //IE低版本
        xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }
 }
  
  /**
  * 发送请求,用来检查用户名、密码是否正确
  */
  function chkUser(){
    
    //1、创建XMLHttpRequest
    createXMLHttpRequest();
    
    //2、获得用户名、密码
    var username=document.getElementById("username").value;
    var password=document.getElementById("password").value;
    
    //3、与服务器建立连接:open
    var url="login?username="+username+"&password="+password;
    //方式1:get提交
    //xhr.open("GET",url,true);
    
    //方式2:post提交
    var url2="login";
    xhr.open("POST",url2,true);
    
    
    //4、设置回调函数,获得服务器响应的数据
    xhr.onreadystatechange=function(){
      /*
      readyState状态码:
      0:未初始化
      1:正在加载
      2:加载完成
      3:请求进行中
      4:请求完成
      */
      if(xhr.readyState==4){
        //status,200表示响应正常
        if(xhr.status==200){
         //alert("从服务器返回的值为:"+xhr.responseText);
         var res=xhr.responseText;
         if(res==&#39;0&#39;){
           document.getElementById("res").innerHTML="登录成功";
         }else{
           document.getElementById("res").innerHTML="<font color=&#39;red&#39;>登录失败</font>";
         }
         
        }else{
          alert("出现在了异常:"+xhr.response.Text);
        }
        
      }
    }
    //5、发送请求
    //方式1:get方式
    //xhr.send(null);
    
    //方式2:post方式:
    //Post提交需要设置http请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username="+username+"&password="+password);
    
    
  }
 
</script>

</html>

サーバーコード:


package com.newer.login.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.newer.login.bean.User;
import com.newer.login.service.UserService;

/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  UserService userService = new UserService();

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doGet(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
  
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doPost(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    // 1、获得页面参数
    String username = request.getParameter("username");
    String password = request.getParameter("password");

    System.out.println("获得请求的参数username:"+username);
    System.out.println("获得请求的参数password:"+password);    
    // 2、封装User对象
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);

    // 3、调用服务类,完成用户名、密码的校验
    User u = userService.login(user);

    /*
     * 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
     * //跳转至首页... }else{ //登录失败,跳转登录页面
     * 
     * }
     */
    // ajax响应

    PrintWriter out = response.getWriter();

    if (u != null) {
      //0成功,1失败
      out.print(0);
    }else{
      out.print(1);
    }
    out.close();
  }
}

関連する推奨事項:


php の最も親しい友人の 1 つである ajax テクノロジー


jqueryの使い方ajax テクノロジーを達成する 3: $.get()


ajax テクノロジーの使い方を簡単に学ぶための推奨 5 つの AJAX 入門チュートリアル

以上がAjax の技術構成と中心原理の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
どのデータをPHPセッションに保存できますか?どのデータをPHPセッションに保存できますか?May 02, 2025 am 12:17 AM

phpssionscanStorestrings、numbers、arrays、andobjects.1.strings:textdatalikeusernames.2.numbers:integersorfloatsforcounters.3.arrays:listslikeshoppingcarts.4.objects:complextructuresthataresialized。

どのようにPHPセッションを開始しますか?どのようにPHPセッションを開始しますか?May 02, 2025 am 12:16 AM

tostartaphpsession、outsession_start()atthescript'sbeginning.1)placeitbe foreanyouttosetthesscookie.2)usesionsionsionsionserdatalikelogintatussorshoppingcarts.3)再生セッションインドストップレベントフィックスアタック

セッションの再生とは何ですか?また、セキュリティをどのように改善しますか?セッションの再生とは何ですか?また、セキュリティをどのように改善しますか?May 02, 2025 am 12:15 AM

セッション再生とは、新しいセッションIDを生成し、セッション固定攻撃の場合にユーザーが機密操作を実行するときに古いIDを無効にすることを指します。実装の手順には次のものが含まれます。1。感度操作を検出、2。新しいセッションIDを生成する、3。古いセッションIDを破壊し、4。ユーザー側のセッション情報を更新します。

PHPセッションを使用する際のパフォーマンスの考慮事項は何ですか?PHPセッションを使用する際のパフォーマンスの考慮事項は何ですか?May 02, 2025 am 12:11 AM

PHPセッションは、アプリケーションのパフォーマンスに大きな影響を与えます。最適化方法には以下が含まれます。1。データベースを使用してセッションデータを保存して応答速度を向上させます。 2。セッションデータの使用を削減し、必要な情報のみを保存します。 3.非ブロッキングセッションプロセッサを使用して、同時実行機能を改善します。 4.セッションの有効期限を調整して、ユーザーエクスペリエンスとサーバーの負担のバランスを取ります。 5.永続的なセッションを使用して、データの読み取り時間と書き込み時間を減らします。

PHPセッションはCookieとどのように異なりますか?PHPセッションはCookieとどのように異なりますか?May 02, 2025 am 12:03 AM

phpsesionsareserver-side、whilecookiesareclient-side.1)Sessionsionsionsoredataontheserver、aremoresecure.2)cookiesstoredataontheclient、cookiestoresecure、andlimitedinsizeisize.sesionsionsionivationivationivationivationivationivationivationivate

PHPはユーザーのセッションをどのように識別しますか?PHPはユーザーのセッションをどのように識別しますか?May 01, 2025 am 12:23 AM

phpidentifiesauser'ssessionsingsinssessionCookiesIds.1)whensession_start()iscalled、phpgeneratesauniquesidstoredsored incoookienadphpsessidontheuser'sbrowser.2)thisidallowsphptortorieSessiondatadata fromthata

PHPセッションを保護するためのベストプラクティスは何ですか?PHPセッションを保護するためのベストプラクティスは何ですか?May 01, 2025 am 12:22 AM

PHPセッションのセキュリティは、次の測定を通じて達成できます。1。session_regenerate_id()を使用して、ユーザーがログインまたは重要な操作である場合にセッションIDを再生します。 2. HTTPSプロトコルを介して送信セッションIDを暗号化します。 3。Session_Save_Path()を使用して、セッションデータを保存し、権限を正しく設定するためのSecure Directoryを指定します。

PHPセッションファイルはデフォルトで保存されていますか?PHPセッションファイルはデフォルトで保存されていますか?May 01, 2025 am 12:15 AM

phpsessionFilesToredInthededirectoryspecifiedBysession.save_path、通常/tmponunix-likesystemsorc:\ windows \ temponwindows.tocustomizethis:1)uesession_save_path()tosetaCustomdirectory、ensuringit'swritadistradistradistradistradistra

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。