今日は劉暁愛の独学ジャワの95日目。
ご視聴ありがとうございました。
それでは、今日の勉強を始めましょう:
同期、非同期リクエスト
ブラウザは、同期と非同期の2つの方法でサーバにリクエストを送信します。
1 同期要求
同期リクエストとはどういう意味ですか?
つまり、リクエストを送信した後、サーバーからのレスポンスが返ってくるのを待ってから、次のリクエストを送信する必要があります。
学習のリクエストはブラウザのアドレスバーから送信され、これは同期リクエストです。
しかし、これには2つの欠点があります:
リクエストは応答を待つ必要があります。
リクエストのブロック、ネットワークの遅延が発生した場合、ユーザーは待つ必要があるため、ユーザーエクスペリエンスの効果は良くありません。
すべての情報はリクエストに含まれます。
例えば、ユーザー名、パスワード、携帯電話番号など、複数の情報を入力する必要があるフォームがあるとします。
一つでも記入ミスがあり、リクエストに失敗した場合、もう一度すべてを記入するのは面倒で手間がかかります。
間違って記入したものだけを記入することはできないのですか?
この問題を解決するには?非同期の概念を導入する時が来ました。
2 非同期リクエスト
同期リクエストとは対照的に、非同期リクエストは応答を待つ必要がなく、 常に次のリクエストを送ることができます。
同期リクエストであれば、情報を完全に埋めてからリクエストを送信し、サーバーはそれが正しいかどうかを埋めるために応答し、その後変更を加える必要があります。
しかし、非同期リクエストは部分的なページ更新です。
例えば、上記の携帯電話番号とパスワード、電子メール名は、入力時に非同期リクエストが送信されます。
書式が正しくない場合は、変更するよう注意喚起が行われますが、既に記入されている他の正しい情報は影響を受けません。
ネイティブAjax
Ajaxとはどういう意味ですか?
単刀直入に言えば、非同期リクエストを送信するための方法です。
まず非同期リクエストのケーススタディを書き、それからステップ・バイ・ステップで学んでください。
ボタンがあり、それにクリックイベントを登録し、非同期要求を送信するためにそれをクリックして、5つのステップの合計の具体的な実装:
XMLHttpRequest の作成
XMLHttpRequestはAJAXの基本です。
AjaxはXMLHttpRequestオブジェクトを通して非同期リクエストを送信します。
onreadystatechangeイベント
このイベントは非同期リクエストを実装するための中心的な鍵です。
なぜ応答を待たずに非同期リクエストができるのですか?
ここにリスナー・イベントが設定されているからです。
サーバーがリッスンされ、readyStateが4でstatusが200であれば、レスポンスは成功です。
これらのプロパティがどこから来ているのかは、w3cのドキュメントで説明されています:
readyStateとstatusは、4と200が正常応答を示すことを除いて、どちらも異なる値を持ちます。
提出先住所
open()メソッドには3つの引数があります:
- メソッド: つまりリクエストメソッドです。
- url: リクエストパス、"/getAjaxServlet"。
- async: true は非同期、false は同期を意味します。
リクエスト送信
メソッドでサーバにリクエストを送信します。
同じ意味で、これらのメソッドはw3cドキュメントに詳しく書かれています。
応答データの受信
つまり、②でレスポンスが成功したと判定された場合、レスポンスを受け付けたデータには2つの属性があります:
- responseText : データを文字列として取得します。
- responseXML: XML 形式のデータを取得します。
XMLデータでない場合は、すべてresponseTextを使用します。
そして、それは基本的なことで、学ぶことが必要です。
III. JSON
JSONは、読みやすく書きやすい軽量なデータ交換フォーマットです。
JSONでは一般的にデータを渡すためにxmlが使用され、比較を行うために2つのデータ形式:
それに比べて、jsonデータはより簡潔です。
もちろん、XMLは無駄ではありません、その形式は統一されており、ビューに関する限り、一部の人々はまた、xmlのこの種のレイアウトを好みます。
XMLが世に出てからずいぶん経ちますが、プロモーションは深く一般的で、XMLが好きな人はまだたくさんいます。
しかし、データを送信するためには、そのデータが解析しやすいかどうか?これは非常に重要です。
そして、xmlと比較してjsonにはこのような利点があるため、この作品ではより一般的に使用されています。
Jsonの基本構文
データ形式は全部で3種類あり、それぞれについて説明します:
オブジェクトタイプ
フォーマット:{name:value,name:value......}。
カンマで区切られた複数のキー・バリュー・ペアを持つことができます。
ここで name は文字列型、value は任意の型です。
配列/コレクションタイプ
フォーマット:[値,値......]。
ここでvalueは任意の型です。
と配列は、中かっこを使ってデータを囲む点を除けば、非常によく似ています。
混合タイプ
つまり、オブジェクト型と配列型が含まれています。
注目に値します:
- JSONデータのキー値:文字列型、二重引用符で囲む必要があります。
- JSONデータ値 value: 型は問いませんが、文字列の場合は二重引用符で囲む必要があります。
時間が限られていて、特別講義をしないjsonのapiもありますが、今後、学習する側にも利用してもらえると良いと思います。
最後に
ご視聴ありがとうございました。