javascriptは各種ブラウザの非同期要求に対応しています.

jsコード:
XMLHttpRequestオブジェクトを作成します.
var xmlhttp;
function createxmlhttp(){
    if(window.XMLtpRequest)  {/code for IE 7+,Firefox,Chrome,Opera,Safari      xmlhttp=new XMLtpRequest()  }else  {/code for IE 6,IE 5      xmlhttp=new ActiveXObject(「Microsoft.XMLHTTP」);  }
)
 
AJAX-サーバに要求を送信する
要求をサーバーに送信する場合、XMLtpRequestオブジェクトのopen()とsend()を使用します.

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

GET要求
簡単なGET要求:

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

上記の例では、キャッシュの結果が得られます.
このような状況を避けるために、URLに一意のIDを追加してください.

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

POSTリクエスト
簡単なPOST要求:

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

自分で試してみる
HTMLフォームのようなPOSTデータが必要なら、set Request Header()を使ってHTTPヘッダを追加してください.そしてsend()の方法で、あなたが送信したいデータを指定してください.

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

Async=true
async=trueを使用する場合は、オンレドステージイベントのレディ状態に応答して実行する関数を規定してください.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

AJAX-サーバ応答
サーバの応答
サーバーからの応答が必要な場合は、XMLHttpRequestオブジェクトのレスポンスTextまたはレスポンスXML属性を使用してください.
属性
説明
レスポンスText
文字列形式の応答データを取得します.
レスポンスXML
XML形式の応答データが得られます.
レスポンスText属性
サーバーからの応答がXMLでない場合は、レスポンスText属性を使用してください.
レスポンスインデックスText属性は文字列形式の応答を返しますので、このように使用できます.

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

自分で試してみる
レスポンスXML属性
サーバからの応答がXMLであり、XMLオブジェクトとして解析が必要な場合は、レスポンスXML属性を使用してください.
要求book s.xmlファイルは、応答を解析する.

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

AJAX-onreadystatechange事件
onreadystatechangeイベント
要求がサーバに送信されると、応答に基づくいくつかのタスクを実行する必要があります.
readyStateが変わるたびに、onreadystatechangeイベントが発生します.
readyState属性はXMLtpRequestの状態情報を保持しています.
次はXMLHttpRequestオブジェクトの3つの重要な属性です.
属性
説明
onreadystatechange
記憶関数(または関数名)は、readyState属性が変化するたびに、この関数を呼び出します.
readyState
XMLHttpRequestの状態があります.0から4まで変化があります.

:要求未初期化

:サーバ接続が確立されました.

:要求はすでに

を受信しました.

:要求処理中

:要求が完了し、応答が完了しました.
status
200:「OK」404:ページが見つかりませんでした.
オンレドステージイベントでは、サーバーが処理される準備ができているときに実行するジョブを規定しています.
readyStateが4に等しく、状態が200になると、応答が完了したことを表します.

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

自分で試してみる
onreadystatechangeイベントは4回トリガされ、readyStateの変化に対応しています.
Callback関数を使う
calback関数はパラメータ形式で他の関数に伝達する関数です.
ウェブサイトに複数のAJAXタスクが存在する場合、XMLHttpRequestオブジェクトを作成するために標準の関数を作成し、AJAXタスクごとにこの関数を呼び出すべきです.
この関数の呼び出しには、URLとオンレドステージイベントが発生したときに実行すべきタスクが含まれています.

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}