ホームページ > 記事 > ウェブフロントエンド > ajaxの仕組みを詳しく解説

ajaxの仕組みを詳しく解説

php中世界最好的语言オリジナル: 2018-04-03 10:06:281399ブラウズ

今回は、ajax の動作原理について詳しく説明します。ajax を使用する際の注意事項は何ですか?実際の事例を見てみましょう。

AJAX は、高速で動的な Web ページを作成するためのテクノロジーです。 AJAX を使用すると、バックグラウンドでサーバーと少量のデータを交換することで、Web ページを非同期に更新できます。これは、ページ全体を再読み込みしなくても、Web ページの一部を更新できることを意味します。

1. ajax に含まれる技術

ajax が新しい技術ではなく、いくつかの独自の技術を組み合わせたものであることは誰もが知っています。以下の技術で構成されています。

CSSとXHTMLを使用して表現されます。

インタラクションと動的な表示には DOM モデルを使用します。

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

JavaScriptを使用してバインドして呼び出します。

上記のテクノロジーのうち、XmlHttpRequest オブジェクトを除く他のテクノロジーはすべて Web 標準に基づいており、XMLHttpRequest はまだ W3C に採用されていませんが、ほぼすべての主要なブラウザーですでに事実上の標準になっています。現在それをサポートしています。

2. ajaxの作り方

Ajaxの原理は単純に、XmlHttpRequestオブジェクトを通じてサーバーに非同期リクエストを送信し、サーバーからデータを取得し、JavaScriptを使用してDOMを操作して更新するだけです。ページ。この中で最も重要なステップは、サーバーからリクエストデータを取得することです。 ajax をネイティブに作成するには、次の 4 つの手順に分けることができます。

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

最新のブラウザ (IE7 以降、Firefox、Chrome、Safari、Opera) にはすべて XMLHttpRequest オブジェクトが組み込まれています。

XMLHttpRequest オブジェクトを作成するための構文:

var xhr = new XMLHttpRequest();

Internet Explorer の古いバージョン (IE5 および IE6) は ActiveX オブジェクトを使用します:

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

IE5 および IE6 を含むすべての最新のブラウザーで動作するには、ブラウザーが XMLHttpRequest オブジェクトをサポートしているかどうかを確認してください。サポートされている場合は、XMLHttpRequest オブジェクトを作成します。サポートされていない場合は、ActiveXObject を作成します:

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. リクエストを準備します

3 つのパラメータを受け入れて XMLHttpRequest オブジェクトを初期化します:

xhr.open(method,url,async);

最初のパラメータは

リクエストタイプの文字列を表し、その値はGET または POST になります。

GET request:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST request:

xhr.open("POST",demo.php,true);

2 番目のパラメータは、リクエストの送信先となる URL です。

3 番目のパラメーターは true または false で、リクエストが非同期モードで発行されるか同期モードで発行されるかを示します。 (デフォルトは true ですが、一般に false は推奨されません)

false: 同期モードで発行されたリクエストは、サーバーが応答を受け取るまですべての JavaScript コードの実行を一時停止します。ネットワークへの接続時またはファイルのダウンロード時にブラウザーが失敗した場合、ページは常にハングします。

true: リクエストオブジェクトがデータを送受信している間、ブラウザはページの読み込みを続けて他の JavaScript コードを実行できます

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

xhr.send();

通常、Ajax によって送信されるパラメーターのほとんどは単純な文字列です。GET メソッドを使用して、送信するパラメーターを open メソッドの url パラメーターに直接書き込むことができます。このとき、send メソッドのパラメーターは次のとおりです。 null または空。

GET リクエスト:

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST リクエスト:

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

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

4. 応答

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

onreadystatechange イベントの処理:

リクエストがサーバーに送信されるとき、応答ベースの処理を実行する必要があります。タスク。 readyState が変化するたびに、onreadystatechange イベントがトリガーされます。

readyState プロパティ:

0: オブジェクトは

作成されましたが、open() メソッドはまだ呼び出されていません。 1: open() メソッドが呼び出されていますが、リクエストはまだ送信されていません。

2：请求已经发送，标题和状态已经收到，并可用。

3：接收到来自服务器的响应。

4：接收完请求数据，表示已经完成请求。

status属性：

200:”OK”

404: 未找到页面

responseText：获得字符串形式的响应数据

responseXML：获得 XML 形式的响应数据

返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象。

5、完整例子

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

data.json

{
"name":"tsrot",
"age":24
}

三、ajax应用场景

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面

四、ajax优缺点

优点：

1、页面无刷新，用户体验好。

2、异步通信，更加快的响应能力。

3、减少冗余请求，减轻了服务器负担

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1、ajax干掉了back按钮，即对浏览器后退机制的破坏。

2、存在一定的安全问题。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、无法用URL直接访问。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

ajaxの仕組みを詳しく解説

関連記事