AJAX-jQuery-JSON

JavaWeb-AJAX

Ajaxのテクノロジーと原理

1.1Ajaxの概要

AJAX =非同期JavaScriptおよびXML（非同期JavaScriptおよびXML）。

AJAXは新しいプログラミング言語ではありませんが、既存の標準を使用する新しい方法です。

AJAXは、サーバーとデータを交換し、ページ全体をリロードせずにWebページの一部を更新する技術です。

1.2Ajaxに含まれるテクノロジー

ajaxは新しいテクノロジーではなく、いくつかの独自のテクノロジーの組み合わせであることは誰もが知っています。以下の技術を組み合わせたものです。

1.CSSとXHTMLを使用して表現します。

2. DOMモデルを使用して、動的に対話および表示します。

3. XMLHttpRequestを使用して、サーバーと非同期で通信します。

4.JavaScriptを使用してバインドおよび呼び出します

AJAXのコアはXMLHttpRequestオブジェクトです。

ブラウザが異なれば、XMLHttpRequestオブジェクトを作成する方法も異なります。

IEブラウザはActiveXObjectを使用しますが、他のブラウザはXMLHttpRequestと呼ばれるJavaScript組み込みオブジェクトを使用します

1.3 Ajaxはどのように機能しますか？

Ajaxの動作原理は、ユーザーとサーバーの間に中間層（AJAXエンジン）を追加して、ユーザーの操作とサーバーの応答を非同期にすることと同じです。すべてのユーザーリクエストがサーバーに送信されるわけではありません。同様に、一部のデータ検証とデータ処理はAjaxエンジンに渡されて実行され、サーバーから新しいデータを読み取る必要があると判断された場合にのみ、Ajaxエンジンがサーバーに代わってリクエストを送信します。

従来の方法との違いを見てみましょう

それぞれの
相互作用を見てみましょう

ブラウザのAjaxインタラクティブモード

Webサイトを作成するとき、クライアント側で画面の更新を実行すると、ユーザーに大きな柔軟性が提供されます。Ajaxを使用して実行できる機能は次のとおりです。ユーザーが[更新]をクリックしてサーバーがページ全体を再送信するのを待たずに、ショッピングカート内のアイテムの総数を動的に更新します。サーバーからダウンロードされるデータの量を減らすことによって達成されるサイトのパフォーマンスを向上させます。たとえば、Amazonのショッピングカートページでは、バスケット内の商品の数量が更新されると、ページ全体が再読み込みされるため、32Kのデータをダウンロードする必要があります。Ajaxを使用して新しい合計を計算する場合、サーバーは新しい合計値のみを返すため、必要な帯域幅は元の合計の1パーセントにすぎません。ユーザーが入力するたびにページが更新されることを排除します。たとえば、Ajaxでは、ユーザーがページングリストで[次へ]をクリックすると、サーバーデータはページ全体ではなくリストのみを更新します。ユーザーがデータを編集するために新しいページに移動する必要はなく、テーブルデータを直接編集します。Ajaxの場合、ユーザーが[編集]をクリックすると、静的テーブルを更新して、編集可能なコンテンツを含むテーブルにすることができます。ユーザーが[完了]をクリックすると、Ajaxリクエストを送信してサーバーを更新し、テーブルを更新して静的な読み取り専用データを含めることができます。

1.4XMLHttpRequestの一般的な属性

1.onreadystatechange属性

onreadystatechange属性には、サーバーの応答を処理する関数が含まれています。次のコードは、同時にできる空の関数を定義します

onreadystatechangeプロパティが設定されます：

xmlHttp.onreadystatechange = function() {
    
     //我们需要在这写一些代码}

2.readyStateプロパティ

readyState属性は、サーバー応答のステータス情報を格納します。readyStateが変更されるたびに、onreadystatechange関数が実行されます。

readyStateプロパティの可能な値：

状態	説明
0	要求は初期化されません（open（）を呼び出す前）
1	リクエストは終了しました（send（）を呼び出す前）
2	リクエストが送信されました（通常、コンテンツヘッダーへの応答から）
3	リクエストは処理中です（通常、一部のデータはレスポンスで利用できますが、サーバーはレスポンスを完了していません）
4	リクエストが完了すると（サーバーの応答にアクセスして使用できます）

onreadystatechange関数Tainanjiaにifステートメントを送信して、応答が完了したかどうかをテストします（データを取得できると考えています）。

xmlHttp.onreadystatechange = function(){
    
    
	if(xmlHttp.readyState == 4){
    
    
		//从服务器的response获得数据
	}
}

3.responseText属性

サーバーから返されるデータは、responseTextプロパティを介して取得できます。このコードでは、timeテキストボックスの値をresponseTextと同じに設定します。

xmlHttp.onreadystatechange = function() {
    
    
    if (xmlHttp.readyState == 4) {
    
    
        document.myForm.time.value = xmlHttp.responseText;
    }
}

その他の属性は次のとおりです。

1.5XMLHttpRequestメソッド

1.open（）メソッド

open（）には3つのパラメーターがあります。最初のパラメーターは要求の送信に使用されるメソッドを定義し、2番目のパラメーターはサーバー側スクリプトのURLを指定し、3番目のパラメーターは要求を非同期で処理する必要があることを指定します。

xmlHttp.open("GET","test.php",true)

2.send（）メソッド

send（）メソッドは、リクエストをサーバーに送信します。HTMLファイルとPHPファイルが同じディレクトリにあると仮定すると、コードは次のようになります。

xmlHttp.send(null);

その他の方法は次のとおりです。

2つのAjaxプログラミングステップ

理解を容易にするために、AJAXのプロセスを統合しました。AJAXを実装する場合は、次の手順に従う必要があります。

1.XMLHttpRequestオブジェクトを作成します

2.リクエスト方法を設定します。

3.コールバック関数を呼び出します。

4.リクエストを送信します

特定の手順を見てみましょう。

2.1XMLHttpRequestオブジェクトを作成します。

XMLHttpオブジェクトを作成するための構文は次のとおりです。

var xmlHttp = new XMLHttpRequest();

IE5またはIE6ブラウザーの場合、ActiveXオブジェクトが使用され、作成方法は次のとおりです。

var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

一般に、AJAXを手動で作成する場合、ブラウザがXMLHttpRequestオブジェクトをサポートしているかどうかを最初に判断する必要があります。サポートしている場合はオブジェクトを作成し、サポートしていない場合はActiveXオブジェクトを作成します。JSコードは次のとおりです。

//第一步：创建XMLHttpRequest对象
var xmlHttp;
if (window.XMLHttpRequest) {
    
    
	//非IE
	xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    
    
	//IE
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}

2.2リクエスト方法の設定

WEB開発では、リクエストにはgetとpostの2つの形式があるため、使用するリクエストを設定する必要があります。XMLHttpRequestオブジェクトのopen（）メソッドは、リクエストメソッドを設定することです。open（）メソッド

特徴	パラメータ
リクエストの種類、URL、リクエストを非同期で処理するかどうかを指定します	パラメータ1：リクエストタイプ（GETまたはPOST）を設定します。GETとPOSTの違いについてBaiduにお願いします。ここでは説明しません。パラメータ2：サーバー上のファイルの場所。パラメータ3：処理するかどうか非同期で要求し、true、noはfalseです。

次のように：

//第二步：设置和服务器端交互的相应参数，向路径http://localhost:8080/JsLearning3/getAjax准备发送数据
var url = "http://localhost:8080/JsLearning3/getAjax";
xmlHttp.open("POST", url, true);

openメソッドは次のとおりです。

GETまたはPOST？POSTと比較して、GETはより単純で高速であり、ほとんどの場合に使用できます。ただし、次の状況ではPOSTリクエストを使用してください。

キャッシュファイル（サーバー上の更新ファイルまたはデータベース）を使用して大量のデータをサーバーに送信することはできません（POSTにはデータ制限がありません）不明な文字を含むユーザー入力を送信する場合、POSTはGETよりも安定していて信頼性があります

非同期-正誤問題？AJAXは、非同期JavaScriptおよびXML（非同期JavaScriptおよびXML）を指します。XMLHttpRequestオブジェクトをAJAXで使用する場合は、open（）メソッドのasyncパラメーターをtrueに設定する必要があります。Web開発者にとって、非同期リクエストの送信は大幅に改善されています。サーバーで実行される多くのタスクは非常に時間がかかります。AJAXの前は、これによりアプリケーションがハングまたは停止する可能性がありました。AJAXを使用すると、JavaScriptはサーバーの応答を待つ必要はありませんが、サーバーの応答を待っている間に他のスクリプトを実行し、応答の準備ができたら応答を処理します。

2.3コールバック関数を呼び出す

前の手順で選択したopenメソッドの3番目のパラメーターがtrueの場合、現在は非同期リクエストです。この時点で、コールバック関数を作成する必要があります。XMLHttpRequestオブジェクトにはonreadystatechange属性があります。この属性は匿名メソッドを返します。 、したがって、コールバック関数はここに記述されますxmlHttp.onreadystatechange = function {}、function {}はコールバック関数のコンテンツです。いわゆるコールバック関数は、バックグラウンドで処理されてからフォアグラウンドに戻った後、リクエストによって実装される関数です。この例では、コールバック関数の関数は、バックグラウンド処理後にフォアグラウンドにフィードバックされたデータを受信し、指定されたdivにこのデータを表示することです。バックグラウンドから返されたデータが間違っている可能性があるため、コールバック関数は最初にバックグラウンドから返された情報が正しいかどうかを判断する必要があり、正しい場合は実行を続行できます。コードは次のように表示されます。

//第三步：注册回调函数
xmlHttp.onreadystatechange = function() {
    
    
    if (xmlHttp.readyState == 4) {
    
    
        if (xmlHttp.status == 200) {
    
    
        	var obj = document.getElementById(id);
        	obj.innerHTML = xmlHttp.responseText;
        } else {
    
    
        	alert("AJAX服务器返回错误！");
        }
    }
}

上記のコードでは、xmlHttp.readyStateはXMLHttpRequestが存在する状態です。0から4に変更します。0：リクエストは初期化されていません。1：サーバー接続が確立されました。2：リクエストを受信しました。3：リクエストは処理中です。4：リクエストが完了し、レスポンスの準備が整いました。したがって、ここでは、xmlHttp.readyStateが4の場合にのみ、実行を続行できると判断します。

xmlHttp.statusはサーバーから返された結果であり、200は正しいことを意味します。404はページが見つからなかったことを意味するため、ここではxmlHttp.statusが200に等しい場合にのみ、実行を続行できると判断します。

var obj = document.getElementById(id);obj.innerHTML = xmlHttp.responseText;

このコードはコールバック関数のコアコンテンツであり、バックグラウンドから返されたデータを取得し、このデータをidがtestidであるdivに割り当てます。xmlHttpオブジェクトには、バックグラウンドから返されたデータを取得できる2つのプロパティがあります。つまり、responseTextとresponseXMLです。ここで、responseTextは文字列形式の応答データを取得するために使用され、responseXMLはXML形式の応答データを取得するために使用されます。どちらを選択するかは、バックエンドから返されるデータによって異なります。この例では、データの文字列のみを表示するため、responseTextを選択します。responseXMLは、後の例で紹介されます。

AJAXステータス値とステータスコードの違いAJAXステータス値は、アクセスが成功したかどうかに関係なく、AJAXが通過したいくつかの状態に応答するステップを指します。これはAJAX実行ステップとして理解できます。例：AJAXオブジェクトがサーバーと対話するときに取得される送信、応答など。取得するには「ajax.readyState」を使用します。（番号1〜4のユニット番号で構成）AJAXステータスコードは、AJAXアクセスが成功したかどうかに関係なく、HTTPプロトコルによって送信された情報に基づいてサーバーから返されるHTTPヘッダー情報コードを指します。情報は「 ajax.status ";（1XX、2XXの3桁の数字で構成され、RFCを詳細に確認します）これが、AJAXを使用するときに取得した情報が正しいかどうかを判断するために次の方法を使用する理由です。

if(ajax.readyState == 4 && ajax.status == 200) {
    
    。。。。);}

AJAXの操作手順と状態値の説明AJAXの実際の操作では、XMLHttpRequest（XHR）へのアクセスは一度に完了しませんが、複数の状態を経験した後に得られた結果です。AJAXにはこの状態の5種類の状態があります。 0-（初期化されていない）send（）メソッドがまだ呼び出されていない1-（ロード中）send（）メソッドが呼び出され、リクエストが送信されている2-（ロードが完了した）send（）メソッドが呼び出されている実行済み、3-（インタラクティブ）応答コンテンツの解析4-（完了）応答コンテンツの解析が完了し、クライアント側で上記の状態を呼び出すことができます。「0」状態は、定義後に自動的に所有される状態値です。 、およびアクセス状態が成功するために（情報を取得します）私たちのほとんどは「4」を使用して判断します。

AJAXステータスコードの説明1：リクエストを受信し、処理を続行します2：操作を正常に受信し、分析して受け入れます3：リクエストをさらに処理する必要があります4：リクエストに不正な構文が含まれているか、完了できません5：サーバーが失敗しました完全に有効なリクエストを実行する

詳細は以下のとおりです。

100-クライアントは引き続き要求を行う必要があります101-クライアントはサーバーに要求に従ってHTTPプロトコルバージョンを変換するように要求します200-トランザクションは成功します201-新しいファイルのURLはプロンプトが表示されます202-受け入れられて処理されますが処理が完了していません203-戻り情報が不明または不完全です204-要求は受信されましたが、戻り情報が空です205-サーバーは要求を完了し、ユーザーエージェントは現在参照されているファイルをリセットする必要があります206-サーバーは完了しましたユーザーのGETリクエストの一部300-リクエストされたリソースは複数の場所で取得できます301-リクエストデータを削除します302-他のアドレスでリクエストデータが見つかりました303-クライアントが他のURLにアクセスするかメソッドにアクセスすることを提案します304-クライアントがGETを実行しました、ただしファイルは変更されていません305-要求されたリソースはサーバーによって指定されたアドレスから取得する必要があります。306-以前のバージョンのHTTPで使用されていたコード。307は現在のバージョンでは使用されなくなりました。307-要求されたリソースが一時的に削除されることを宣言します。400-構文エラーなどの誤った要求401-要求の承認に失敗しました402-有効なChargeToヘッダー応答を保持します403-要求は許可されません404-ファイル、クエリ、またはURLが見つかりません405-定義されたメソッド[Request-Line]フィールドのユーザーによる許可は許可されていません406-Acceptドラッグを送信したユーザーによると、要求されたリソースにアクセスできません407-401と同様に、ユーザーは最初にプロキシサーバーで承認される必要があります408-クライアントユーザー指定の空腹時間内にリクエストを完了しませんでした409——現在のリソースステータスでは、リクエストを完了できません410-—このリソースはサーバーで使用できなくなり、参照アドレスはありません411 —サーバーユーザー定義のContent-Length属性要求を拒否します412—現在の要求で1つ以上の要求ヘッダーフィールドが間違っています413 —要求されたリソースがサーバーよりも大きい許容サイズ414-要求されたリソースURLが許可された長さよりも長いサーバー415-要求されたリソースは要求されたアイテム形式をサポートしていません416-要求には範囲要求ヘッダーフィールドが含まれ、現在の要求されたリソース範囲に範囲表示値がなく、要求にはIf-Range要求ヘッダーフィールドが含まれていません417 -サーバーがリクエストのExpectヘッダーフィールドで指定された期待値を満たしていません。プロキシサーバーの場合、次のサーバーがリクエストを満たせない可能性があります。500-サーバーが内部エラーを生成します。501-サーバーは要求された機能をサポートしていません502-サーバーは一時的に利用できません。システムの過負荷を防ぐために時々使用できます503-サーバーの過負荷またはメンテナンスの一時停止504-ゲートウェイの過負荷、サーバーは別のゲートウェイまたはサービスを使用してユーザーに応答し、待機していますより長い時間設定505-サーバーはリクエストヘッダーで指定されたHTTPバージョンをサポートまたは拒否しません

2.4リクエストを送信する

//第四步：设置发送请求的内容和发送报送。然后发送请求
var uname= document.getElementsByName("userName")[0].value;
var upass= document.getElementsByName("userPass")[0].value ;
var params = "userName=" + uname+ "&userPass=" +upass+ "&time=" + Math.random();
// 增加time随机参数，防止读取缓存
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");

// 向请求添加 HTTP 头，POST如果有数据一定加加！！！！
xmlHttp.send(params);

HTMLフォームのようにデータをPOSTする必要がある場合は、setRequestHeader（）を使用してHTTPヘッダーを追加します。次に、send（）メソッドで送信するデータを指定します。

3つのjqueryajax操作

3.1従来のAjaxの欠点

面倒な手順

覚えにくい方法、属性、一般的な値がたくさんあります

3.2 ajax（）メソッド

リモートデータはHTTPリクエストを送信することでロードできます。これはjQueryの最低レベルのAjax実装であり、高い柔軟性を備えています。

.ajax（[settings]）; //パラメーター設定は.ajax（）メソッドのパラメーターリストであり、Ajaxリクエストのキーと値のペアのコレクションを構成するために使用されます。

$.ajax({
    
    
    url:请求地址
    type:"get | post | put | delete " 默认是get,
    data:请求参数 {
    
    "id":"123","pwd":"123456"},
    dataType:请求数据类型"html | text | json | xml | script | jsonp ",
    success:function(data,dataTextStatus,jqxhr){
    
     },//请求成功时
    error:function(jqxhr,textStatus,error)//请求失败时
})

3.3 get（）メソッドは、リモートHTTPGETリクエストを介して情報をロードします。

これは、複雑な$ .ajaxを置き換える単純なGETリクエスト関数です。

$.get(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});

url：要求されたパス

データ：送信されたデータ

成功：成功関数

データ型が返すデータ

4つのJSON

4.1、JSONとは

JSON（JavaScript Object Notation）は、軽量のデータ交換フォーマットです。読み取りと書き込みが簡単です。同時に、機械による解析と生成も簡単です。これは、JavaScriptプログラミング言語、標準ECMA-262第3版（1999年12月のサブセット）に基づいています。JSONは、完全に言語に依存しないテキスト形式を使用しますが、C言語ファミリー（C、C ++、C＃、Java、JavaScript、Perl、Pythonなどを含む）と同様の習慣も使用します。これらの機能により、JSONは理想的なデータ交換言語になります。

4.2、JSONオブジェクトの定義と基本的な使用法

標準のjson形式では、jsonオブジェクトは括弧で囲まれています。オブジェクトの属性、つまりjsonのキーは文字列であるため、二重引用符で囲む必要があります。キーの各グループを区切るには、コンマを使用します。

4.2.1JSONの定義

Json定義形式：

var 变量名 = {
    
    
“key” : value , 	// Number类型
“key2” : “value” , 	// 字符串类型
“key3” : [] , 	// 数组类型
“key4” : {
    
    }, 	// json 对象类型
“key5” : [{
    
    },{
    
    }] 	// json 数组
};

4.2.2、JSONオブジェクトへのアクセス

jsonオブジェクトは、その名前が示すように、それがオブジェクトであることを認識しています。内部のキーはオブジェクトの属性です。オブジェクトのプロパティにアクセスしたい場合は、[オブジェクト名。プロパティ名]のメソッドを使用するだけで済みます。

<script type="text/javascript">
    // json的定义
    var jsons = {
    
    
        "key1":"abc", // 字符串类型
        "key2":1234, // Number
        "key3":[1234,"21341","53"], // 数组
        "key4":{
    
     // json类型
        "key4_1" : 12,
        "key4_2" : "kkk"
        },
        "key5":[{
    
     // json数组
        "key5_1_1" : 12,
        "key5_1_2" : "abc"
    },{
    
    
    	"key5_2_1" : 41,
    	"key5_2_2" : "bbj"
	}]
};

    // 访问json的属性
    alert(jsons.key1); // "abc"
    // 访问json的数组属性
    alert(jsons.key3[1]); // "21341"
    // 访问json的json属性
    alert(jsons.key4.key4_1);//12
    // 访问json的json数组
    alert(jsons.key5[0].key5_1_2);//"abc"
</script>

4.3、JavaでのJSONの使用

jsonとjavaを使用したいので、サードパーティのパッケージを使用する必要があります。です

Javaオブジェクトとjson間の変換

「1」の単一オブジェクトまたはマップコレクション

java-> json：

Users user2=new Users();
user2.setUsername("李四");
user2.setPassword("abc");
user2.setAge(20);
JSONObject obj=JSONObject.fromObject(user);//obj就是json格式的

json-> java：

String str="{'username':'李四','password':'admin','age':19}";
JSONObject json=JSONObject.fromObject(str);
Users user=(Users)JSONObject.toBean(json,Users.class);

「2」オブジェクトコレクションとjson変換

javaコレクション-> json配列：

List list=new ArrayList();
list.add("dd");
list.add("aa");
JSONArray obj=JSONArray.fromObject(list);//set也是这么转

json配列-> javaコレクション：

方法1：

String str2="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'张三'}]";
JSONArray json2=JSONArray.fromObject(str2);
Object[] obj=(Object[])JSONArray.toArray(json2,Users.class);

方法2：

String str3="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'展示干'}]";

JSONArray json3=JSONArray.fromObject(str3);
//默认转换成ArrayList
List<Users> list=(List<Users>) JSONArray.toCollection(json3,Users.class);

ajaxの例2-自動データ入力：

ページ

'：'张三 '}] ";
JSONArray json2 = JSONArray.fromObject（str2）;
Object [] obj =（Object []）JSONArray.toArray（json2、Users.class）;

方式2:

String str3 = "[{'age'：20、 'password'： 'abc'、 'username'： '李四'}、
{'age'：10、 'password'： 'adb'、 'username'： '乾いた状態を表示 '}] ";

JSONArray json3 = JSONArray.fromObject（str3）;
//默认転换成ArrayList
リストlist =（List）JSONArray.toCollection（json3、Users.class）;

ajax实例2-实现数据的自动填充：

页面