Ajax の仕組み (図付き)

この記事は主に ajax の動作原理について説明します。これは一定の参考価値があります。興味のある友人はそれについて学ぶことができます。お役に立てれば幸いです。

Ajax とは、Asynchronous JavaScript and XML (非同期 JavaScript および XML) のことで、最大の利点は、ページ全体を再読み込みすることなく、サーバーとデータを交換し、Web ページのコンテンツの一部を更新できることです。実装の基本原理: Web ページ DOM オブジェクトは、Web ページ内のコンテンツの一部を正確に操作できます。XML は純粋なデータ ストレージ キャリアとして、クライアントとサーバーが Web ページ コンテンツのデータのみを交換できるようにします。 Web ページのスタイルなどの追加情報 XMLHttpRequest は、ブラウザ自体の組み込みリクエストとは独立してサーバーと対話するリクエスト オブジェクトです。

Web アプリケーション Ajax がサーバーと対話する抽象的なプロセスは次のとおりです:

詳細なプロセスの説明:

1: 使用するにはAjax テクノロジ、基本 基本は XMLHttpRequest オブジェクトを作成することであり、これがなければ非同期送信の可能性はありません。

var xmlhttp;
if (window.XMLHttpRequest) { //检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest(); 
} else {
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

2: Web ページ内の特定のイベントに応答して非同期操作をバインドします。xmlhttp 経由で送信します。上記で作成されたオブジェクトはデータを要求して送信します。リクエストを行う前に、まずリクエスト オブジェクトのメソッド、リクエスト処理のためにサーバーにどのファイルを送信するか、どのデータを送信するか、非同期かどうかを定義する必要があります。

その中には、通常のリクエスト送信データと同様に、ここにも 2 つのメソッドがあります: GET/POST

 xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",);
 xmlhttp.send();

xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

3: サーバーはリクエストを受信した後、添付データを処理の入力として渡します。要求されたファイル。たとえば、fname=Henry&lname=Ford をファイル /try/ajax/demo_get2.php への入力として渡します。次に、受信データに従ってファイルが処理され、最終的に結果が返され、応答オブジェクトを通じて送り返されます。クライアントは、xmlhttp オブジェクトに基づいて応答コンテンツを取得し、DOM オブジェクトを呼び出して、応答コンテンツに基づいて Web ページのコンテンツを部分的に変更します。

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//请求处理完毕且状态为成功
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容
    }

このうち、レスポンスには文字列型とXMLテキストの2種類があります。 2 つの応答の違いは、次のように抽出されます。

responseText 属性は、文字列形式で応答を返します。

document.getElementById("myp").innerHTML=xmlhttp.responseText;

サーバーからの応答が XML の場合、 は次のようにする必要があります。 XML オブジェクトとして解析するには、responseXML を使用します。 ：

xmlDoc=xmlhttp.responseXML; //获取服务器响应的XML文本并转换得到XMLDOM对象
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br>"; }
 
document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去

関連チュートリアル:ajax ビデオ チュートリアル

以上がAjax の仕組み (図付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。