XMLHttpRequest オブジェクトの基本的な利用法

説明

XMLHttpRequest を利用して非同期 HTTP 通信を行う方法は次のようになる。

  1. ブラウザ間の差異を吸収しながら、XMLHttpRequest オブジェクトを作る
  2. onreadstatechange 属性に、コールバック関数を指定する
  3. open メソッドで HTTP 要求の準備をする。
  4. send メソッドで実際に要求を送る
  5. readyState 属性をチェックして HTML 文書の受信が完了したかどうかを確認する
  6. responseText 属性から送信された HTML 文書を取り出す
  7. 取得した HTML 文書を、要素ノードのinnerHTML 属性に格納する

スクリプト

<!--
	This is the source file for the "Hello World of AJAX" tutorial
	
	You may use this code in your own projects as long as this 
	copyright is left	in place.  All code is provided AS-IS.
	This code is distributed in the hope that it will be useful,
 	but WITHOUT ANY WARRANTY; without even the implied warranty of
 	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
	
	Please visit http://www.DynamicAJAX.com for more great AJAX
	source code and tutorials.
	
	Copyright 2006 Ryan Smith / 345 Technical / 345 Group.
-->
<html>
	<head>
		<title>The Hello World of AJAX</title>
		<script language="JavaScript" type="text/javascript">
			//Gets the browser specific XmlHttpRequest Object
			function getXmlHttpRequestObject() {
				if (window.XMLHttpRequest) {
					return new XMLHttpRequest(); //Not IE
				} else if(window.ActiveXObject) {
					return new ActiveXObject("Microsoft.XMLHTTP"); //IE
				} else {
					//Display your error message here. 
					//and inform the user they might want to upgrade
					//their browser.
					alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
				}
			}			
			//Get our browser specific XmlHttpRequest object.
			var receiveReq = getXmlHttpRequestObject();		
			//Initiate the asyncronous request.
			function sayHello() {
				//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
					//Setup the connection as a GET call to SayHello.html.
					//True explicity sets the request to asyncronous (default).
					receiveReq.open("GET", 'SayHello.html', true);
					//Set the function that will be called when the XmlHttpRequest objects state changes.
					receiveReq.onreadystatechange = handleSayHello; 
					//Make the actual request.
					receiveReq.send(null);
				}			
			}
			//Called every time our XmlHttpRequest objects state changes.
			function handleSayHello() {
				//Check to see if the XmlHttpRequests state is finished.
				if (receiveReq.readyState == 4) {
					//Set the contents of our span element to the result of the asyncronous call.
					document.getElementById('span_result').innerHTML = receiveReq.responseText;
				}
			}
			</script>
	<body>
		<!-- Clicking this link initiates the asyncronous request -->
		<a href="javascript:sayHello();">Say Hello</a><br />
		<!-- used to display the results of the asyncronous request -->
		<span id="span_result"></span>
	</body>

実行例

Say Hello