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="";
}
