JavaScript 上級編 第 3 章 Ajax、JSON、プロトタイプ入門_基礎知識

Ajax
この言葉はよく聞きますが、実際に触ったことがなかったので、ここで少し勉強します。
Ajax テクノロジーの革新的な点は、従来の「要求、待機、応答、更新、データを返す」モードを改善することで、ユーザーは情報が返される前に操作を続行でき、現在のページは更新されません。リクエスト。これにより、対話性が大幅に向上します。
Ajax は実際にはテクノロジーではありませんが、多くのテクノロジーで構成されています。最大の特徴は、非同期伝送が可能であり、マルチスレッドサービスを実現できることです。
Ajax の非同期送信は js の XMLHttpRequst オブジェクトに依存しているため、それから始めます。
XMLHttpRequest は XMLHttp によって形成される抽象オブジェクトであり、データ対話に使用されます。 IE では、XMLHttpRequest は ActiveX コントロールとして使用され、FF Opera では組み込みの js オブジェクトとして使用されます。
XMLHttpRequest オブジェクトのカプセル化コードを作成します:

コードをコピーします コードは次のとおりです:

< スクリプトタイプ="text/javascript">
var xmlHttp=false;
function createXmlRequest(){
if(window.ActiveObject) { // IE
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); ");
}catch(e){
window.alert("XML リクエストの作成に失敗しました " e);
}
}
}else if(window.XMLHttpRequest){ // FF
xmlHttp= new XMLHttpRequest();
}
if(!xmlHttp){
window.alert("XML リクエストの作成に失敗しました")
}
}

ReadyState 属性:
0=未初期化 1=初期化済み 2=データ送信中 3=データ転送中 4=完了
responseText 属性:
1 、2=responseText は null 文字列です 文字列 3 = 受信中 4 = 受信完了
responseXML 属性:
send() の実行後、正しい XML 形式のデータが返された場合、XMLHttpRequest を使用して返されたデータを受信できます。 responseXML は、返される情報を XML Document オブジェクトとしてフォーマットできます。タイプは text/xml です。情報が含まれていない場合は、null を返します。
status 属性:
属性 send() の後、status 属性を使用してステータスを受信および読み取ることができます。この属性は、ReadyState が 3 または 4 の場合にのみ使用できます。それ以外の場合は、読み取り時にエラーが発生します。状態。一般的なものは次のとおりです:
100=クライアントはリクエストを続行する必要があります 200=トランザクションは成功しました 400=不正なリクエスト 403=リクエストは許可されません 404=ファイル、クエリ、または URL が見つかりません 500=内部サーバーエラー 502=サーバーは一時的に利用できません 505=サーバーは、リクエスト ヘッダーで指定された HTTP バージョンをサポートしていないか、拒否しています。
statusText 属性:
send() メソッドの後、statusText を通じてトランザクション ステータスを読み取ります。statusText は現在の HTTP リクエストのステータス行を返します。この属性は、readyState が 3 4 の場合にのみ使用でき、それ以外の場合はエラーが発生します。 。
onreadystatechange イベント:
このイベントの属性値が変更されたときに実行される操作。
abort() メソッド:
XMLHttpRequest オブジェクトの HTTP リクエストを停止し、オブジェクトを初期状態に戻します。
open() メソッド:
新しい HTTP リクエストを作成し、メソッド、URL、検証情報などを指定します。構文は次のとおりです: xmlHttp.open(method,url,mode,user,psd); Method 大文字と小文字を区別せずに、post、get、put などのリクエスト メソッドを示します。 url は宛先アドレス、mode はリクエストが非同期かどうかを指定する 2 種類以外のパラメータで、デフォルトは true です。
open() メソッドを呼び出した後、readyState 属性は 1 に設定されます。
send() メソッド:
xmlHttp.send(content); content は送信されるコンテンツであり、存在する場合は無視できます。内容がありません。
setRequestHeader() メソッド:
setRequestHeader(header, value) は、単一の HTTP ヘッダー情報を設定します。readyState が 1 の場合、このメソッドは open() の後に呼び出すことができます。それ以外の場合は、例外が既に存在する場合に返されます。元のものは上書きされます。値の型は、ヘッダ名の値を表す文字列型のデータです。
getResponseHeader() メソッド:
ヘッダー情報を読み取ることで、content-type(コンテンツタイプ)、content-length(コンテンツ長)、last-modify(最終更新日)日付などを読み取ることができます。特定の Web サイトは異なります。
getAllResponseHeaders() メソッド:
すべてのヘッダー情報を取得します。
次の例は、ヘッダー情報を取得することです:

コードをコピーします コードは次のとおりです:

この例は、IE で動作しますが、FF では死活的にならず、MS の原因は FF が ActiveX をサポートしていないためです。 >JSON
JSON の完全名は、JavaScript オブジェクト表記のオブジェクト マークです。これは、テキストに基づいた、ある種のデータ交換形式であり、言葉とは無関係です。これはそのようなもので、私には一組のデータがあり、xml を使用します。
餃子 <性別>ファムル<年齢>22<年齢>

那么如果用JSONの格式，就是：
"user":[{"name":"Dumpling", "gender":"Famle", "age":22}]
优点就是它
上の例を再度書き直すと、JSON の具体的な形式が確認でき、JS に要求された時点で、次のように記述できます:

复制代码代码如下:

var users={

"users":[
{"名前":"餃子", "性別":"ファムル", "年齢":22},
{"名前":"サンデー", "性別":"ファムル", "年齢":20} ,
{"名前":"シャイン", "性別":"家族", "年齢":18}
]};


は、JSON.stringify(obj) のメソッドである JSON カプセル化データを使用します。obj 自身で 1 つの種類をカプセル化することができます。

文字列を自分で記述する必要はありません。典型的な例:

代打 次のように:

<スクリプト言語="javascript">
関数 user(名前,年齢,性別){
this.userName=name;
this.userAge=年齢;
this.userGender=性別;
}
function submidForm(){
var subForm=document.jsonForm;
var userTable=document.getElementById("users");
var newRow=userTable.insertRow(-1);// テーブルの最後に 1 行を挿入します
newRow.insertCell(0).innerHTML=subForm.name.value;
newRow.insertCell(1).innerHTML=subForm.gender.value;
newRow.insertCell(2).innerHTML=subForm.age.value;
var newuser=new user(subForm.name.value,subForm.age.value,subForm.gender.value);
var jsonStr=JSON.stringify(newuser);
アラート(jsonStr);
subForm.name.value="";
subForm.age.value="";
}

名前:		性別:	ファムル 男性	年齢:

名前

性別

年齢

害怕太长我遮就起来了，反正结果是这样子滴:

もちろん、一度にカプセル化する必要がある場合、たとえば 5 6 人のユーザーを渡した後、一度 JSON 形式にカプセル化し、これを 1 つの Arry サイトに放り、その後、arry を stringify のパラメータとして使用することもできます。 ~我就不上代了~

JS 内での JSON 解析と赋值

この块就算は json の中心了、他の解析その实很简单、比如以前の例、

复制代 代码如下:

var usersJson={
"users":[
{"name":"Dumpling", "gender":"Famle", "age" :22},
{"名前":"サンデー", "性別":"ファムル", "年齢":20},
{"名前":"シャイン", "性別":"ファムル" , "年齢":18}
],
"物":[
{"名前":"食べ物","価格":55}
]
};

sanday の値を取得したい場合は、次のように書くことができます: var username=uersJson.users[1].name; これがわかれば、あとはすべて大丈夫です~
データを変更してから、値を直接割り当てるだけです。たとえば、その食べ物の価格を変更したい場合、userJson.objects[0].price=43;
入力が合法かどうかの判断に関しては、私も同様です。書くのが面倒なので時間がかかります。
JSON についてはこれで終わりです。最後の部分です。
プロトタイプ フレームワーク
まず、プロトタイプの Web サイトにアクセスします: http://www.prototypejs.org/
実際には、JS に多くの拡張が行われます。これは大まかに、一般的なメソッドとテンプレートの 2 つの部分で構成されます。 $() $$() $A() などの一般的なメソッドですが、テンプレートは JS 内部クラスを拡張し、さまざまな Ajax アプリケーションのサポート テンプレートを提供します。詳細については、指定されたウェブサイトを確認してください。ここに 2 つの例を示します。詳細については API ページにアクセスしてください: http://api.prototypejs.org/ (はい、私はとても怠け者です╮(╯▽╰)╭)
$() メソッド: 要素を取得しますgetElementById メソッドと同様のオブジェクトで、複数のパラメータを受け入れて配列を返すことができます。
$$() メソッド: 指定された要素の配列を取得します。getElementByTagName() メソッドと同様に、タグ名に基づいてオブジェクトを取得します。
Ajax オブジェクト: 先ほど述べたように、ブラウザーが異なるため、多くの判断コードを記述する必要があります。そのため、Ajax.Request オブジェクトは、XMLHttpRequest オブジェクトを作成するコードもカプセル化します。各種処理としてサーバーが情報を返すのは一般的な方法なので、今でも非常に便利です。さらに詳しく知りたい場合は、引き続き上記の API リンクを参照してください (= =!)
フォーム オブジェクト: フォーム オブジェクトは非常に一般的に使用されるため、プロトタイプが重点を置くオブジェクトでもあります。この部分は非常に重要です。 API部分を参照できるようになります。 。 。 。 。 。