JavaScriptのJSON&AJAX

9310 ワード

今日はJavaScriptのデータ伝送方式JSONとAJAXの技術について説明します.また、これはJavaScriptシリーズの最終編でもあります.

一JSON
JSONのフルネームはJavaScript Object Notation(jsオブジェクト表現法)で、テキスト情報を格納し交換する文法で、主にプログレッシブオブジェクト、配列、文字列、Boolean、数字とnullに使われます.JSONはテキスト形式でデータを格納します.
1, JSON文法とデータタイプ
JSONは、オブジェクト、配列、文字列、Boolean、数字、nullの6種類のデータをサポートできます.
JSONはJavaScript文法を採用していますので、JSONは配列を表しています.対象などはJavaScriptと全く同じです.大かっこはオブジェクトを保存し、大かっこは配列を保存します.
唯一の違いはJSONが二重引用符だけをサポートしているため、JSONファイルでは文字列が二重引用符を使用しなければならないことを示しており、対象のキーも二重引用符で包まれる必要があります.
JSONファイルの拡張子の名前は.jsonです.
2, JSONオブジェクトの方法
JavaScriptでは、JSONオブジェクトにペアのシングル引用符を追加し、文字列でJSONオブジェクトを表します.
JSON.parse方法:JSONデータをJavaScriptオブジェクトに変換します.

1 var myJson = '{"name" : "ren","age" : 12}';
2 var myObj = JSON.parse(myJson);
3 console.log(myObj);//{name:"ren",age:12}

JSON.strigify方法:JavaScriptオブジェクトをJSON文字列に変換します.

1 var myObj = {
2     name:'ren',
3     age:12
4 };
5 var myJson = JSON.stringify(myObj);
6 console.log(myJson);//"{"name":"ren","age":12}"

注意:サーバーが文字列タイプのデータを返したら、JavaScriptは一つの変数でそれを受け入れることができ、直接にそれを使うことができます.サーバーがJSONタイプのデータを返したら、必ずパーパーメソッドを使ってJavaScript標準オブジェクトに変換してから作業してください.もちろん、サーバーにJSONデータを送信するには、strigify方法を使ってJavaScriptオブジェクトをJSON文字列に変換して送信するべきです.

二AJAX
1, 概要
AJAXのフルネームはAynchronousです. JavaScript And XML(非同期javascriptとXML).
AJAXはXMLHttpRequestを通じてサーバーと通信しています.テキストファイル、XML、HTML、JSONを含む様々なデータを送信して受け入れられます.もちろんこれは一番魅力的なところではありません.AJAXの魅力的なところは非同期であってもいいです.これは、ページを更新しないでサーバーに要求を送信し、サーバーからの情報を受け取って処理し、ページを更新しないでサーバー上のデータを使って現在のページを修正することができます.
2, 使用
最初のステップは、まずXMLttpRequestオブジェクトを作成します.この相手を通して、サーバーと通信する条件ができました.

1 var httpRequest = new XMLHttpRequest();

なお、古いバージョンのIEブラウザ(IE 6及び以前)からは、ActiveXObjectを用いて作成するべきである.　

1 var httpRequest = new ActiveXObject('Microsoft.XMLHTTP');

第二のステップは、要求を送信する前に、まずサーバと通信する方式を定義し、接続を確立しなければならない.　　

1 httpRequest.open(method,url,async);

methodは要求タイプを表します.get、post、head.
getとpost方式は伝送に本質的な違いはないが、実際の使用には以下のような点がある.
a)       getは、主要ユーザーがサーバからデータを取得し、postはサーバにデータを送信する能力を備えており、get方式の要求データはurlに表示され、postは表示されないので、post方式は潜在的な危険があり、get方式は比較的安全である.
b)       get方式のデータはキャッシュされ、BOMオブジェクトhistoryに保持され、ページラベルを追加することができます.ベスト方式はだめです.
c)       get方式ではASCII文字のみ送信できますが、ポストには制限がありません.url長の制限により、get方式はバイト長2048を制限し、post方式は限定されない.
皆さんは前の「JavaScriptのローカルデータストア」を覚えていますか?中にはlocation.hashを説明する時、urlの長さはブラウザやサーバーによって制限されています.javascript言語や通信プロトコル自体ではなく、ブラウザやサーバーによって制限されています.忘れた友達はまた帰って見てもいいです.
         headとget方式は似ていますが、唯一の違いはhttp新聞のヘッダ情報だけが含まれています.実際の内容はありません.一般的には、サーバ上に何らかのデータが存在しているかどうかを検出します.
         urlは要求されたサーバアドレスで、逆順にソースポリシーを遵守します.
         asyncはブール値で、trueは非同期を表し、falseは同期を表します.
ブラウザは一般的にキャッシュからデータを読み取るので、get方式で要求を送信する時に、一意IDを追加して、毎回直接にサーバーからデータを取得することができます.

1 httpRequest.open('get','url?=' + new Date().getTime());//   
2 httpRequest.open('get','url?=' + Math.random());//

postデータが欲しいなら、要求のMIMEタイプを設定しなければならないかもしれません.例えば、フォームのようなpostデータを求めるなら、オプンとsend方法の間でset Request Header方法を呼び出す必要があります.

1 httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//

httpリクエストヘッダについては、こちらをご覧ください.https://baike.baidu.com/item/http請求先
ステップ3で、要求を送信します.

1 httpRequest.send();

openでpost方式を選択したら、sendメソッドにサーバに送信したいデータを追加してもいいです.そうでなければ、データを追加しても無効です.

1 httpRequest.send('{name:"ren",age:12}');

第四ステップ、データ処理.
XMLHttpRequestオブジェクトにはイベント属性があります.この属性に関数参照または匿名関数を追加して、サーバから返された情報を処理します.

1 httpRequest.onreadystatechange = function (){};

また、XMLHttpRequestオブジェクトには、通信状態を格納する属性が二つあります.readyStateとstatus(readyStateの値が変わるたびに、上のオンリーステージイベントがトリガされます.)と、受信内容を格納する属性が二つあります.
         readyStateは要求状態を表します.
                   0:要求は初期化されていません.まだオプンを呼び出していません.
                   1:サーバーと接続を確立しました.send()を呼び出したばかりです.
                   2:http要求はすでに発送しました.send()は実行済みです.
                   3:http要求処理において、サーバは要求の内容を解析しています.
                   4:要求が完了し、内容の解析が完了し、応答が準備されました.
         statusは応答状態を表し、http状態コードを返します.
                   200:サーバからコンテンツの返信を成功裏に受信しました.
                   404:サーバに関連コンテンツが見つかりません.
                   503:サーバは利用できません.
         レスポンス:文字列タイプの応答として解析します.
         レスポンスXML:DOMオブジェクトタイプに解析した応答
私たちはサーバから戻ってきた情報を使うには、正確に入手したことを確認する必要がありますので、イベント処理関数の内部には検出メカニズムがあるべきです.

1 if(httpRequest.readyState == 4 && httpRequest.Status == 200){
2     fnSuc(responseText);
3 }else{
4     if(fnFail){
5         fnFail();
6     }
7 }

また、対応するサーバ応答情報をパラメータとして伝達することができる.
最後に完全なajax関数パッケージを添付します.

 1 function ajax(method,url,Fnsucc,Fnfail){
 2     var httpRequest = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
 3     httpRequest.open(method,url,true);
 4     httpRequest.send();
 5     httpRequest.onreadystatechange = function (){
 6         if(httpRequest.readyState == 4){
 7         　　if(httpRequest.status == 200){
 8         　　　　FnSuc(httpRequest.responseText);//          。
 9         　　}else{
10         　　　　if(FnFail){
11         　　　　　　FnFail(httpRequest.status);//  http     ，      。
12                 }    
13             }
14         }
15     }
16 }

学習時間は一日をおすすめします.

JSONデータはJavaオブジェクトに変換されます.