JSネイティブのAjaxとjQueryのAjax

[学習目標

1, JSネイティブAjaxの原則を理解する。

2, jsonデータ形式をマスターする

1. jsonデータ形式をマスターする方法
2. jsonのパース方法をマスターする

3、jQueryでAjaxラッピングをマスターする

4,Ajaxを使ったエフェクトの実装

1. ユーザー名の存在の非同期バリデーションの実装
2. サイト内検索機能の実装
   1. Ajaxの基本概念

1.1.1 Ajax 概要

同期とは何か、非同期とは何か

同期：クライアントがサーバーにリクエストを送信し、サーバーからレスポンスが返ってくるまで待機する。

非同期：クライアントがサーバーにリクエストを送信し、サーバーがレスポンスを返すかどうかにかかわらず、クライアントは引っかかることなく自由に他のことをすることができる

1.1.2 Ajax の動作原理は以下の通りです。

ページがリクエストを開始し、ブラウザカーネル内のAjaxエンジンに送り、Ajaxエンジンがサーバー側にリクエストを送信します。その間、サーバー側がAjaxエンジンにデータを返し、何らかの機能を完成させるためにカスタムjsロジックコードを実行するために設定したイベントが発生するまで、クライアントは好きなことをすることが可能です。例えば、以下の画像のようになります。

1.2 JSネイティブAjax技術(理解)

jsネイティブAjaxは、ブラウザに組み込まれたAjaxエンジンオブジェクトを中心に学習していくことになります。jsネイティブAjaxを使って非同期処理を実現するためには、以下のようないくつかのステップがあります。

1) Ajaxエンジン・オブジェクトの作成

2) Ajaxエンジンオブジェクトにリスナーをバインドする(サーバーがエンジンにデータを応答したことをリスニングする)

3) 送信先アドレスをバインドする

4) リクエストの送信

5) 応答データを受信する

[演習トピック]: ページにボタンを追加し、クリックするとajaxリクエストが送信されます。

開発のステップ

<テーブル

1. WEBプロジェクトの作成
2. JSPページを作成する
3. 非同期リクエストを処理するServletのコードを記述する
4. テストの実行

[ステップ1】Webプロジェクトの作成：day08

注意：サーブレットバージョン 2.5 以上を選択し、6 や 7 など 5 より大きいものを選択して jdk をコンパイルしてください。

[ステップ2】 ajax.jspページを新規に追加し、リクエストを送信するコードを記述します。

<テーブル

<スパン 静的 html コード

< 身体 >

< 入力 タイプ = ボタン 価値 = " 非同期リクエストサーバー " オンクリック = "fn1()" >< スパン アイド = "span1"。 ></ スパン >< ブリ >

</ 身体 >

<テーブル

ライティング ジェイエス 実装 ジェイエス ネイティブ エイジャックス 機能

機能 fn1() { <未定義

// 非同期リクエストの送信

//1. 作成 アジャックス エンジンオブジェクト ---- すべての操作は ajax エンジンの完成

ヴァル xmlHttp = 新しい XMLHttpRequest()を使用します。

//2. リスニングイベントをエンジンオブジェクトにバインドする

              xmlHttp.onreadystatechange=。 機能 <スパン () { <未定義

// 状態が変化したときに処理するもの

もし (xmlHttp.readyState == 4 && xmlHttp.status == 200) { { { (xmlHttp.readyState == 4 && xmlHttp.status == 200) <未定義

//5. 応答メッセージの受信

ヴァル data = xmlHttp.responseText。

//alert(data)です。

                            document.getElementById()。 span1" <スパン ).innerHTML=data;

                     }

              }

//3. サーバーアドレスのバインド

// 第1パラメータ：リクエストメソッド GET/POST

// 第2パラメータ：バックエンドサーバアドレス

// 第3パラメータ：非同期かどうか true-- 非同期    false-- シンク

              xmlHttp.open() GET" , "${pageContext.request.contextPath}/ajaxServlet?username=zhangsan"。 ,

<スパン 真 );            

//4. リクエストの送信

              xmlHttp.send()を実行します。

       }

注 レスポンスメッセージの受信は、リスニングイベント内で、かつ ReadyState は 4 (すなわち、リクエストが処理され、レスポンスの準備ができた)、および ステータス について 200 (正常な応答) の後に、応答メッセージを処理します。

[ステップ3】非同期リクエストを処理するサーブレットを作成する

<テーブル

プロテクテッド ボイド doGet(HttpServletRequest) リクエスト , HttpServletResponse レスポンス ) 投げる ServletException, IOException {... <未定義

// ユーザー名の取得

              文字列 名前 = リクエスト .getParameter() ユーザー名" );

レスポンス .getWriter().write(Math. ランダム ()+ "-" <スパン + 名前 );

       }

[ステップ4】テスト

プロジェクトを公開し、アクセスする :http://localhost:8080/Day08/ajax.jsp

ボタンをクリックすると、非同期リクエストにより、バックエンドサーバーから乱数と渡されたパラメータの値が返されます。

[演習の拡張] 非同期と同期の比較

非同期と同期の主な違いは、同期ではバックグラウンドのレスポンスの終了を待たないとページが他の操作を行えず、動かなくなるように見えることです。一方、非同期リクエストでは、ページはサーバーのレスポンスに影響されず、サーバーがレスポンスを返さなかったとしても、クライアントは他の操作を行うことができます。この2つを比較するために、今度は2つのボタンをページに追加して、リクエストを同期的に送信し、それぞれクリックをテストしてみましょう。

1. ajax.jspのページで

<テーブル

< 入力 タイプ = ボタン"。 値 = " サーバーへのリクエストを同期させる "です。 オンクリック = <スパン fn2()" >< スパン イド = <スパン "span2"。 <スパン ></ スパン <スパン ><

ブラン >

< 入力 タイプ = ボタン"。 値 = " <スパン テスト " オンクリック = <スパン "alert(')です。 <スパン をクリックすることができます。 ')" <スパン >

fn2関数の書き方

<テーブル

機能 fn2() { <未定義

// 同期要求の送信

//1. 作成 アジャックス エンジンオブジェクト ---- すべての操作は ajax エンジンの完成

ヴァル xmlHttp = 新しい XMLHttpRequest()を使用します。

//2. リスニングイベントをエンジンオブジェクトにバインドする

              xmlHttp.onreadystatechange=。 機能 <スパン () { <未定義

// 状態が変化したときに処理するもの

もし (xmlHttp.readyState == 4 && xmlHttp.status == 200) { { { (xmlHttp.readyState == 4 && xmlHttp.status == 200) <未定義

//5. 応答メッセージの受信

ヴァル data = xmlHttp.responseText。

//alert(data)です。

                            document.getElementById()。 span2" <スパン ).innerHTML=data;

                     }

              }

//3. サーバーアドレスのバインド

// 第1パラメータ：リクエストメソッド GET/POST

// 第2パラメータ：バックエンドサーバアドレス

// 第3パラメータ：非同期かどうか true-- 非同期    false-- シンク

<テーブル <テーブル

偽 同期化要求

              xmlHttp.open() "GET" , "${pageContext.request.contextPath}/ajaxServlet"。 ,

虚偽 );

//4. リクエストの送信

              xmlHttp.send()を実行します。

       }

2. AjaxServletのスレッドのsleepメソッドを使用して、サーバーの応答期間をシミュレートします。

<テーブル

プロテクテッド ボイド doGet(HttpServletRequest) リクエスト , HttpServletResponse レスポンス ) 投げる ServletException, IOException {... <未定義

// TODO 自動生成されるメソッドスタブ

//response.getWriter().write(" ツァンサン ")。

試みる { <未定義

<テーブル <テーブル

スレッドスリープは、一定期間サーバーの実行をシミュレートします。

                     スレッド スリープ (5000);

              } キャッチ (InterruptedException e ) { <未定義

// TODO 自動生成されるキャッチブロック

e .printStackTrace()を使用します。

              }

// ユーザー名の取得

              文字列 名前 = リクエスト .getParameter() ユーザー名" );

レスポンス .getWriter().write(Math. ランダム ()+ "-" <スパン + 名前 );

       }

3. ページ効果の比較

をクリックします。 非同期リクエストサーバー ボタンをクリックしても テスト ボタンをクリックしても 同期化要求サーバー ボタンをクリックしても テスト ボタンをクリックします。

注）JSネイティブAjaxでは、投稿の際に

リクエストを送信する前にヘッダを設定する

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

要約すると

使用する非同期アクセスはすべてajaxエンジン

1.3 Jsonデータ形式(重要)

1.3.1 json 役割

jsonは言語に依存しないデータ交換のためのフォーマットで、主に以下のような役割を担っています。

1) フロントエンドとバックエンドのデータ交換にajaxを使用する

2) モバイルとサーバー間のデータ交換

1.3.2 Json 書式設定と構文解析

jsonには2つの形式があります。

1) オブジェクトの形式です。 {"key1":obj,"key2":obj,"key3":obj...} といった具合です。

例: json データ形式のユーザーオブジェクト

{"username":"zhangsan","age":28,"password":"123","addr":"Beijing" } 。

2) 配列 / フォーマットを設定します。 [obj,obj,obj...]です。

jsonデータ形式で表現されたリスト<Product> 。

[{"pid":"10","pname":"Xiaomi 4C"},{},{}]です。

注：オブジェクト形式と配列形式は互いに入れ子にすることができます

注）jsonのキーは文字列、値はObjectです。

jsonのパース。

jsonはjsにネイティブであり、jsはjsonオブジェクトのデータを直接取得できることを意味する

[Json演習1】Personオブジェクトをobjectフォーマットで保存する

<テーブル

< スクリプト 言語 = "JavaScript"。 >

// 使用方法 json のオブジェクト形式は

ヴァル user={ <未定義 "firstname"。 : <スパン " 張本人 " , <スパン "ラストネーム" : <スパン " <スパン ミツトヨ

"

, "年齢"。 :100};

//js をパースするのは簡単です。

       alert(user.lastname+) <スパン "----" +user.age）。

</ スクリプト >

[Json演習2】オブジェクト形式を使ったパーソンコレクションオブジェクトの保存

<テーブル

< スクリプト 言語 = "JavaScript"。 >

//json の配列は / 設定形式

ヴァル ユーザー = [

                                 { <未定義 "firstname"。 : <スパン " 張本人 " , <スパン "ラストネーム" : <スパン " <スパン ミツトヨ

"

, "年齢"。 :100},

                                 { <未定義 "firstname"。 : <スパン " リ "

, <スパン "ラストネーム" : <スパン " IV " , "年齢"。 :25},

                                 { <未定義 "firstname"。 : <スパン " 王 "

, <スパン "ラストネーム" : <スパン " V <スパン " , "年齢"。 :42}

                        ];

        alert(users[1].firstname+) "---" +users[2].lastname)。

</ スクリプト >

残りの例については、ソースコード day08/WebContent/json の json01.html-json05.html を参照してください。

1.3.3 Json の変換プラグインは

通常、開発時にサーバーサイドで処理されるデータはobjectやcollection型で、ページを返す際にjson形式に変換する必要があります。この処理を完全に手作業でjson文字列を継ぎ接ぎしていると、開発効率が大きく低下してしまう。したがって、多くのjson変換プラグインの出現は、主な目的は、Javaのオブジェクトまたはコレクションをjson形式の文字列にすることです。開発者は、ちょうどAPIを呼び出すには知っている必要があります。

以下のようなjson変換ツールが一般的です。

jsonlib。

グソン：グーグル

fastjson: alibaba

上記ツールの具体的な使用方法は、基本的に以下のステップに分かれており、同じです。

ステップ1：jarパッケージを導入する。

ステップ2：適切なAPIメソッドを呼び出して、JavaオブジェクトまたはコレクションをJson文字列に変換します。特定のAPIメソッドについては、後の例で詳しく説明します。

1.4 JqueryのAjax技術(フォーカス)

jqueryは優れたjsフレームワークであり、jsネイティブのajaxを自然にカプセル化しています。カプセル化されたajaxの操作方法はより簡潔で強力であり、ajax操作に関連するjqueryメソッドは以下のようにいくつかありますが、開発でよく使用されるのは以下の3つです。

1. $.get(url, [data], [callback], [type])
2. $.post(url, [data], [callback], [type])

のところです。

url: リクエストのサーバー側のアドレスを表します。

data: サーバー側のリクエストデータを表します (key=value 形式または json 形式)

callback: サーバー側でレスポンスが成功したときに起動される関数を表します（通常の成功が返された場合のみ実行されます）。

type: サーバ側で返されるデータの型を示す（指定された型に基づいてjqueryが自動的に型変換を行う）。

よく使われる戻り値のタイプ：text、json、htmlなど。

1. $.ajax( { オプション1:値1,オプション2:値2... } );----) その後、マスターアップ後

よく使われるオプションは以下の通りです。

async: 非同期にするかどうか、デフォルトは非同期を表すtrue

data: サーバーに送信するパラメータ、json形式を推奨

dataType: サーバー側から返されるデータのタイプ、一般にテキストとjson

success: 成功に応答して実行される関数、対応する型は function

type: リクエストメソッド、POST/GET

url: リクエストサーバー側のアドレス

1.5 デモの例

1.5.1 登録時のユーザー名有効性の非同期検証

[機能説明】。］ 以前のプロジェクトで、登録モジュールがありました。一般に、ユーザーが登録するとき、ユーザー名が記入され、テキストボックスがカーソルを失ったとき、そのユーザー名が利用可能かどうかを直ちに知る必要があります。この機能は、ajaxの非同期リクエストメソッドを使って実装することができます。具体的な手順は以下の通りです。

ステップ1：WEBプロジェクトを作成します。今回は、時間短縮のため、前回のday07プロジェクトのregistration moduleを使用します。

ステップ2： regist.jspに非同期リクエストを追加します。

<テーブル

< スクリプト タイプ = "text/javascript"。 >

    $( 機能 (){ <未定義

// テキストボックスの登録 ぼかし イベント情報

       $( "#username" ).blur( 機能 (){ <未定義

//1. テキストボックスに入力された内容を取得する

ヴァル usernameValue = $( "#username" ).val()を使用します。 //this.valの値 //$(this).val()

<テーブル <テーブル

要求されたバックエンドアドレス

//2. 送信 エイジャックス リクエスト

           $.post(

"${pageContext.request.contextPath}/checkUsername"。 ,

              { <未定義 ユーザー名" :usernameValue},

機能 <スパン (データ){ <未定義

<テーブル <テーブル

バックエンドから返された json データを解析し、必要に応じてユーザーにヒントを与えます。

//3. パース処理 {"isExist":true/false} です。

ヴァル isExist = data.isExist;

ヴァル usernameInfo= "" ;

もし <スパン (isExist) // ユーザープレゼンス ユーザー名が

                  { <未定義

                     usernameInfo= "

このユーザー名はすでに使用されています。 "

;

                     $( "#usernameInfo" ).css( カラー" , "red"。 );

                  } さもなくば { <未定義

                     usernameInfo= "

このユーザーネームは "です。 ;

                     $( "#usernameInfo" ).css( カラー" , <スパン "グリーン"。 );

                  }

                  $( "#usernameInfo" ).html(usernameInfo);

              },

"json"。

           )

       })

    })

</ スクリプト >

ステップ3：バックエンドのサーバーサイド処理用Servletの追加

<テーブル

プロテクテッド ボイド doGet(HttpServletRequest リクエスト、HttpServletResponse レスポンス) スロー ServletException, IOException {... <未定義

//1. ユーザー名を取得する

       String username = request.getParameter() ユーザー名("username".) );

//2. を呼び出す。 サービス メソッドを使用して、ユーザー名が存在するかどうかを確認します。

       UserService サービス = <スパン 新しい UserService()です。

ブーリアン isExist = service.checkUsername(username)。

// <スパン 自分で手動接続する json 文字列

       レスポンス.getWriter().write() "{ {} isExist +isExist+ (アイシストプラス) <スパン "}"。 );

    }

ステップ4：サービスレイヤーとダオレイヤー

UserService.javaで

<テーブル

公開 ブーリアン checkUsername(String username) { (ユーザー名) <未定義

       UserDao dao = <スパン 新しい UserDao()です。

       Long count = 0L;

試みる { <未定義

           count = dao.checkUsername(username)。

       } キャッチ (SQLExceptionのe){。 <未定義

// TODO 自動生成されるキャッチブロック

           e.printStackTrace()を実行します。

       }

<スパン 戻る count>0? 真 : 虚偽 ;

    }

UserDao.javaにて

<テーブル

公開 Long checkUsername(String username)
投げる SQLException { <未定義

       QueryRunner ランナー = 新しい QueryRunner(DataSourceUtils. getDataSource ());

       文字列 sql = "select count(*) from user where username=? " ;

       Long row = (Long)runner.query(sql.), 新しい ScalarHandler()、ユーザー名)。

戻る 行になります。

    }

上記の手順を実装し、プロジェクトをデプロイすると、登録モジュールでユーザー名の有効性をリアルタイムに確認することができるようになります。

1.5.2 サイト内検索機能の実装

機能説明】。］ 私たちのスループロジェクトでは、トップページにサイト内検索機能があります。つまり、検索バーでコンテンツを検索すると、検索バーの下に現在のモール下の関連商品名がすべてリアルタイムでポップアップ表示されます。実装手順は以下の通りです。

ステップ1：モールのヘッダーページ header.jsp をスタイル要件を満たすように修正し、検索ボックスに onkeyup イベントを追加する

<テーブル

< フォーム クラス = ナビバーフォーム ナビバーライト 役割 = <スパン "search"。 <スパン >

< ディブ クラス = フォームグループ。 スタイル = "position: relative" >

< 入力 id = <スパン "search"。 タイプ = <スパン "text"。 クラス = フォームコントロール。 プレースホルダー = <スパン "検索" オンキーアップ = <スパン searchWord(this)" >

< ディブ イド = "showDiv"。 スタイル = <スパン "表示:なし;位置:絶対;z-index:1000;背景色:#fff;幅:196px;ボーダー:1px solid #ccc" >

</ ディブ >

</ ディブ >

< ボタン タイプ = <スパン submit" クラス = "btn btn-default"。 > 提出 <スパン </ ボタン >

</ フォーム >

ステップ2：イベント処理関数を書く

<テーブル

機能 searchWord(obj)

    { <未定義

//1. キーボードを上げたときの入力ボックスの内容を取得する

// alert(obj.value);

ヴァル word = $(obj).val();

//2.ajax サーバーに送信されるリクエスト、ファジーなクエリキーワード リスト<プロダクト> リスト<ストリング>

       $.post(

"${pageContext.request.contextPath}/searchWord"。 , // 住所

           { <未定義 word" :word} です。

機能 <スパン (データ){ <未定義

もし (data.length>0){。 <未定義

ヴァル content= <スパン "" ;

//3. データをパースして表示し showDiv で

<スパン に対して ( ヴァル i=0;i<data.length;i++)

                  { <未定義

                     content+= "<div style='padding:5px;cursor:pointer' οnmοusever='overfn(this)' οnmοuseut='outfn(this)' οnclick='clickDiv(this)'>" ; +data[i]+の場合 "</div>"です。 ;

                  }

                  $( "#showDiv" ).html(content)をご覧ください。

                  $( "#showDiv" ).css( "display"。 , "ブロック"。 );

              }

<テーブル <テーブル

jsonコレクション、つまり関連するすべての商品名のコレクションをjsでパースして、ページの表示エリアに配置したものを返す

           },

"json"。