ホームページ >ウェブフロントエンド >jsチュートリアル >ajaxの原理は何ですか? ajax の共通属性と原則の分析 (概要)

ajaxの原理は何ですか? ajax の共通属性と原則の分析 (概要)

寻∝梦
寻∝梦オリジナル
2018-09-10 16:22:511473ブラウズ

この記事では主に私の概要、ajaxに関するいくつかの質問といくつかの回答について説明します。それが皆様のお役に立てば幸いです。今すぐこの記事を一緒に読みましょう

まず、ajaxとはAsynchronous JavaScript and XMLの正式名称で、Asynchronousとは非同期を意味し、従来のWebとは異なります。

同期とは何ですか?非同期とは何ですか?

同期とは、送信者がデータを送信した後、次のステップに進む前に、受信者がデータを受信して​​応答するのを待つ必要があることを意味します。

非同期の場合、送信者はデータ送信後に受信者の応答を待つ必要がなく、次のステップに進むことができます。

同期とは、A が B に食事に行くように頼むようなもので、A が B に招待状を送り、一緒に食事するかどうかを尋ねるのを待つ必要があります。そうではありません。A が一人で食事することを決める前に、B が一緒に行くのを待つ必要があります。それが非同期の場合、A は B に食事に行くと告げて出発するようなものです。 B が応答するかどうかは関係ありません。

Ajaxの原則

簡単に言うと、XMLHttpRequestオブジェクトを通じてサーバーに非同期リクエストを送り、サーバーからデータを取得し、JSを通じてDOMノードを操作するというものです。

XMLHttpRequestオブジェクト

メソッド:

1.open (リクエストタイプ、URL、ブール値)

2.send() パラメータは次のとおりですリクエスト本文でデータを送信する必要がない場合は、null

3.abort() を渡して非同期リクエストをキャンセルします

4.getAllResponseHeaders()すべての HTTP リクエストを書き込みます 応答ヘッダーはキーと値のペアとして返されます

5.getResponseHeader("header") 指定されたヘッダーの文字列値を返します

6.setRequestHeader("ヘッダー", "value")指定されたヘッダーを指定された値に設定します。 open() はヘッダーを設定する前に呼び出す必要があります。 ヘッダーを設定してリクエストと一緒に送信します ('post' メソッドは必須です)

ajax の共通属性:

1.readyState は、リクエスト/応答プロセスの現在のアクティブなステージを表します (0: 初期化されておらず、open メソッドはまだ初期化されていません)まだ呼び出されています。 1: 開始、open メソッドが呼び出されていますが、send メソッドは呼び出されていません。 2: 送信: 送信が呼び出されていますが、応答は受信されていません。 3: 受信、応答データの一部が受信されています。 4. 完了、クライアントで使用可能)

2.onreadystatechange このメソッドは、readyState の値が変化したときに一度呼び出されます (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAJAX 開発マニュアル の列を参照してください) learn)

3.responseText 応答本文として返されるテキスト

4.responseXML 応答データの XML DOM ドキュメントを応答タイプ「text/xml」または「application/xml」で保存します

5.status 応答 HTTP ステータス

6.statusText HTTP ステータスの説明

以下の XHR オブジェクトを作成します:

function createXHR(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttprequest();
}else if(typeof ActiveXObject != "undefined"){
if(typeof arguments.callee.sctiveXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
for(i =0;i<versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){
跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available");
}
}
var xhr = createXHR();
xhr.onreadyststechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status <300) || 304){
alert(xhr.responseText);
}else{
alert("请求位成功"+ xhr.status);
}
}
};
xhr.open("get","aaa.txt",true);
xhr.send(null);

ajax の利点:

1. 更新せずにデータを更新し、ユーザーの待ち時間を短縮し、ユーザー エクスペリエンスを向上させます

2. 、ユーザーを中断することなく、応答が速くなります

3. サーバーの一部を置くことができます。負荷はクライアントに転送されます。クライアントの空き容量を処理に使用し、サーバーと帯域幅の負担を軽減し、節約します。スペースとブロードバンドのレンタル費用。また、サーバーの負荷を軽減するために、AJAX の原則は「オンデマンドでデータを取得する」ことで、冗長なリクエストと応答によるサーバーの負荷を最小限に抑え、サイトのパフォーマンスを向上させることができます。

5. 標準化に基づいて、広くサポートされています

1. ユーザーは、前の操作をキャンセルするために戻るボタンを使用することがよくあります。 ajax 達成を使用して実行することはできません。 Gmail を使用すると、この問題を解決できます。それは、比較的愚かではあるが効果的な方法を使用するだけです。つまり、ユーザーが戻るボタンをクリックして履歴にアクセスしたときに、コンテンツを再現するための非表示の IFRAME

を作成または使用します。ページ変更時。

2. セキュリティの問題。 ajax テクノロジーは、企業データへの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。 ajax のロジックはクライアント側のセキュリティ スキャン テクノロジから隠すことができ、ハッカーがリモート サーバーから新たな攻撃を確立できるようになります。クロスサイトスクリプティング攻撃やSQLインジェクションなどの攻撃にも悩まされています。

3. 検索エンジンのサポートが弱い

4. 一部のハンドヘルドデバイスは十分にサポートされないなど。 PHP 中国語 Web サイトAJAX ユーザーマニュアル の欄にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がajaxの原理は何ですか? ajax の共通属性と原則の分析 (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。