ホームページ > 記事 > ウェブフロントエンド > Ajaxの使い方簡単チュートリアル

Ajaxの使い方簡単チュートリアル

巴扎黑オリジナル: 2017-08-09 14:12:291093ブラウズ

非同期対話と同期対話

Ajax に関して言えば、非同期送信と同期送信について話さなければなりません。

非同期は通信方法です。送信者がデータを送信した後、受信者が応答を返すのを待たずに、次のデータパケットを送信します。
同期とは、送信者がデータを送信し、受信者が応答を返すのを待ってから次のデータパケットを送信する通信方法を指します。

は次のように理解することもできます:

非同期送信: ただ渡してください。私は自分の仕事をしに行きます。送信が完了したら知らせてください。
同期送信: あなたは今送信中ですが、他のことをする前に送信が完了するのを見守りたいと思います。

Ajax とは何ですか?

Ajaxは(Asynchronous JavaScript and Xml)の略称と考えられます。
さて、現在のページを更新せずにブラウザがサーバーと通信できるようにする技術は Ajax と呼ばれます。

Ajax の仕組み。

Ajax の中核は JavaScript オブジェクト XmlHttpRequest です。このオブジェクトは、Internet Explorer 5 で初めて導入されました。これは、非同期要求をサポートするテクノロジです。つまり、XmlHttpRequest を使用すると、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックせずに応答を処理できるようになります。
Ajax は非同期対話プロセスを使用します。 Ajax はユーザーとサーバーの間に仲介者を導入することで、ネットワーク相互接続プロセスにおける処理待ち処理待ちの欠点を解消します。
ユーザーのブラウザは、タスクを実行するときに Ajax エンジンを読み込みます。 Ajax エンジンは JavaScript 言語で記述されており、通常は非表示のフレームワークに隠されています。ユーザーインターフェイスとサーバー間の対話をコンパイルする役割を果たします。
Ajax エンジンを使用すると、ユーザーとアプリケーションソフトウェア間の対話プロセスを、ユーザーとネットワークサーバー間の通信とは独立して非同期で進めることができます。現在、HTTP ユーザーアクションを生成する代わりに、JavaScript を使用して Ajax エンジンを呼び出すことができ、ページ全体をリロードすることなく、メモリ内データの編集、ページナビゲーション、およびデータ検証を Ajax によって実行できるようになりました。
Ajax を使用すると、JSP、開発者、エンドユーザーに目に見える便利さをもたらします。

Ajax に含まれるテクノロジー:

Ajax は、実際には、JavaScript、XHtml、CSS、Dom、Xml、XmlHttpRequest テクノロジーを含む複数のテクノロジーの組み合わせです。。

サーバー側言語: サーバーには、特定の情報をブラウザーに送信する機能が必要です。 Ajax はサーバーサイド言語とは何の関係もありません。
Xml (Extensible Markup Language) は、データを記述するための形式です。 AJAX プログラムでは、サーバーとクライアント間で情報を渡すために何らかの形式が必要ですが、XML はオプションの 1 つです。
XHTML (拡張ハイパーテキストマークアップ言語、拡張ハイパーメディアマークアップ言語を使用) および CSS (Cascading Style Sheet、カスケードスタイルシート) の標準化されたレンダリング。
DOM (Document Object Model、Document Object Model) は、動的な表示とインタラクションを実現します。
非同期データ読み取りには、XMLHTTP コンポーネント XMLHttpRequest オブジェクトを使用します。
JavaScript を使用してすべてのデータをバインドして処理します。

Ajax の欠陥:

Ajax は完璧なテクノロジーではなく、欠陥があります:

AJAX は Javascript と AJAX エンジンを広範囲に使用しており、これはブラウザのサポートに依存します。これは、IE5.0 以降、Mozilla1.0、NetScape7 以降でのみサポートされています。Mozilla は AJAX もサポートしていますが、XMLHttpRequest は別の方法で提供されます。したがって、AJAX を使用するプログラムは、さまざまなブラウザとの互換性をテストする必要があります。
AJAX はページコンテンツを更新するときにページ全体を更新しないため、一部のユーザーは現在のデータが古いのか更新されたのか混乱することがあります。そのためには、わかりやすい場所で「データが更新された」ことをユーザーに通知する必要があります。
ストリーミングメディアのサポートは、FLASH や Java アプレットほど優れていません。

Ajax のコア XMLHttpRequest オブジェクト:

XMLHttpRequest は、このオブジェクトを通じて、デスクトップアプリケーションと同様にサーバーとのみデータを交換できます。毎回インターフェイスを更新する必要がなく、データ処理作業を毎回サーバーに引き渡す必要がなくなり、サーバーの負荷が軽減されるだけでなく、応答速度が向上し、ユーザーの待ち時間が短縮されます。時間。
XMLHttpRequest は、IE5 で ActiveX コンポーネントとして最初に実装されました。 W3C 標準ではありません。

rreee
xmlhttprequestオブジェクトメソッド：

getAllResponseHeader(): HTTP リクエストのすべての応答ヘッダーをキーと値のペアとして返します。

getResponseHeader("headerLabel"): 指定されたヘッダーの文字列値を返します。
open("method","url"): サーバーへの呼び出しを作成します。メソッドのパラメーターは GET または POST です。 url パラメータには、相対 URL または絶対 URL を指定できます。このメソッドには 3 つのオプションのパラメーターも含まれています。
send(content): リクエストをサーバーに送信します。
setRequestHeader("label","value"): 指定されたヘッダーを指定された値に設定します。 open() メソッドは、ヘッダーを設定する前に呼び出す必要があります。
XMLHttpRequest オブジェクトのプロパティ:
- onreadystatechange：状态改变的事件触发器。
- readyState：对象状态：
- responseText：服务器进程返回数据的文本版本。
- responseXML：服务器进程返回数据的兼容DOM的Xml文档对象。
- status：服务器返回的状态码，如404=“文件未找到”，200=“成功”。
- statusText：服务器返回的状态文本信息。
发送请求的属性和方法(重要)，使用以下3个关键部分:
- openreadystatechange事件处理函数。
- open(method, url, asynch)方法。
- send(data)方法。
- setRequestHeader(header,value)：
接受--方法和属性介绍：
- 用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中，XMLHttpRequest 的如下属性可被服务器更改：
Ajax的具体使用：
- AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：
- 只不过这个过程是异步的。
- 完整的如下：
```
var xmlHttpReq = createXmlHttpRequest();
				xmlHttpReq.onreadystatechange=function(){
					//为4表示请求和响应结束
					if(xmlHttpReq.readyState==4){
						//200表示响应成功
						if(xmlHttpReq.status==200){
							//在div上添加action返回的值
							document.getElementById("info").innerHTML=xmlHttpReq.responseText;
						}
					}
				}
				//这是get方式发送数据，中文记得在接受时进行编码
				xmlHttpReq.open("post","/webLogic/test_test.do?username=aaa",true);
				//post请求时一定要加这个请求头
//				xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//				xmlHttpReq.send("username="+"德玛"+"&pwd="+"123");//这是post请求的发送数据方法
				//get方式send(null)，写了也没用
				xmlHttpReq.send(null);
```

以上がAjaxの使い方簡単チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：JavaScript クイックスタートケースのチュートリアル次の記事：JavaScript クイックスタートケースのチュートリアル

続きを見る

Ajaxの使い方簡単チュートリアル

非同期対話と同期対話

Ajax とは何ですか?

Ajax の仕組み。

Ajax に含まれるテクノロジー:

Ajax の欠陥:

发送请求的属性和方法(重要)，使用以下3个关键部分:

接受--方法和属性介绍：

Ajax的具体使用：

関連記事