Ajax非同期リクエストについて

AJAX
AJAX引用
a)概念:ansychronous(非同期)javascript(js)and xml(全称、非同期javaScript and XML)
b)従来の要求
i.伝統的なリクエストを開始しますか?
​ 1.アドレスバー
​ 2.ハイパーリンク
​ 3.JavaScript:location.href
​ 4.フォーム＃フォーム＃
​ ii.従来のリクエストの問題
​ 1.同期要求応答は新しいページであるため、ユーザは応答結果を待つ必要があり、後続の操作を行うことができる.
​ 2.ユーザーエクスペリエンスが悪い
iii.非同期リクエストの特徴
​ 1.応答の内容は新しいページではなく、1ページのローカル情報であるため、ユーザが非同期要求を再利用する場合、応答を待つ必要はない.
iv.従来のリクエストと非同期リクエストの違い
​ 1.応答内容
従来のレスポンスの内容:新しいページ、ページのリフレッシュ
非同期応答の内容:ページのローカル、文字列情報
​ 2.ユーザーの操作
従来のリクエスト:応答待ち
非同期リクエスト:応答を待つ必要がなく、ユーザーは直接後続の操作を行うことができます.
v.適切なシーンでは、非同期リクエストを使用して、ユーザーの体験を向上させることをお勧めします.
非同期リクエストの開発
a)非同期要求とは
JAvascript:XmlHttpRequestオブジェクト略称xhr
Chrome|FF|sofiaでXmlHttpRequest
​ var xhr = new XmlHttpRequest();
IE中ActiveXObject
​ var xhr = new ActiveXObject(“Microsoft.XMLHHTP”);
b)xhrオブジェクトの使用
​ 1.xhrオブジェクトの作成
​ 2.リクエストの送信
a)要求の送信方法
​ xhr.open("get | | post,url);
b)データの伝達方法
​ xhr.send(null);
​ 3.リスニング応答
​ xhr.readstate属性の値
0 xhrオブジェクトが作成されsend()メソッドが呼び出されていない場合
1 xhrオブジェクトはsend()メソッドを呼び出し、応答しなかった
2 xhrオブジェクトはsend()メソッドを呼び出し、応答はclientに返された.
3応答解析
4応答解析が完了し、
​ xhr.status応答が正しいかどうか
応答コードエラーの応答コード4044054005500、正しい応答コードは200
​ xhr.onreadstatechange = function(){
//応答が完了したか、正しく応答したかを判断する
​ if(xhr.readstate4 && xhr.status200){
応答テキストxhrを取得する.responseText
JavaScriptのDOMプログラミングをページに追加
​ }
​ }
注意:ajaxサーバ側はページのジャンプを行うのではなく、文字列情報を返すことでインタラクションを完了し、request役割ドメインは使用しない.下地はResponse.getWriter()は、出力ストリームを取得する、インタラクションを行う.
送信要求(post)
​ xhr.open(“POST”,url);
xhrを設定します.setRequestHeader(“content-type”,“application/x-www-form-urlencoded”);
なぜ設定するか:シミュレーションフォーム
Web開発に基づいて、フォームを使用してデータをコミットするしかなく、フォームを使用してデータをコミットする場合はデフォルトでenctype=「アプリケーション/x-www-form-urlencoded」と指定されていますが、ajaxプログラミングを使用して現在は使用されておらず、使用されていません.
​ xhr.send(“name=suns&pwd=123&sex=male”);
JSONプロトコル列
JSONプロトコル列は本質的に文字列です
役割:異機種(異なるプログラミング言語)のプログラミングシステムにおいて、データの伝送、インタラクションを行う.
JAvaのオブジェクトまたはコレクション変換jsonプロトコル列のフォーマット:
JAvaオブジェクト回転json

User{           
    id=1;
    username="  ";
    password="123456";
}

json   
{"id":1,"username":"  ","password":"123456"}

JAva配列回転json

java
String [] ids={"  ","  ","  "};

json
["  ","  ","  "]

JAva集合[list,set]回転json

java

List<User>

User{
id=1;
username="  ";
password="123456";
}

User{
id=2;
username="  ";
password="123456";
}

json

[{"id":1,"username":"  ","password":"123456"},{"id":2,"username":"  ","password":"123456"}]

JAvaのMap集合回転json

java

Map<String,String>   maps = new HashMap<>();

maps.put("username","  ");
maps.put("password","123456")
   
Map   json         

json

{"username":"  ","password":"123456"}

jsonプロトコルシリアル変換ツール
​ FastJSON(alibaba) GSON(GOOGLE) JACKSON(SpringMVC)
FastJSONの使用手順

FastJSON導入依存

FastJSONで変換

@JSOnField注記

@JSOnField(serialize=false)の役割:JSONプロトコル列変換を行う場合、その属性を除外する.

@JSOnField(name="name")の役割:変換後のjsonプロトコル列の属性名を指定

@JSOnField(format="yyyy-MM-dd")の役割:日付変換フォーマットの指定

JSONプロトコル列変換javaオブジェクトまたはセット

JSONプロトコルシリアルオブジェクト

類名引用名=JSON.parseObject(jsonString,クラス名.class);

JSONプロトコルシリアルListセット

List users = JSON.parseArray(jsonString,User.class);

JSONプロトコルシリアルsetセット(Setタイプ)

Set set = JSON.parseObject(jsonString,Set.class);

JSONプロトコルシリアルMap

Map <String,String> maps = new HashMap<>();
maps.put("username","  ");
maps.put("password","123456");
String jsontoString = JSONtoString()

GSONの使用手順

GSON導入依存

javaでの集合とオブジェクト回転JSON

User user = new User(1,"  ","123456");
Gson gson = new Gson;
String  json = gson.toJson(user);

JSON転対象または集合

User user = new User(1,"  ","123456");
Gson gson = new Gson;
String  json = gson.toJson(user);
User  user1 = gson.fromJson(json,User.class);