Ajax原理入門説明

まずjavascriptでこのオブジェクトを作成する方法について説明します.
var
xmlHttp
=
new
XMLHttpRequest
()
;
この行の簡単なコードは、Mozilla、Firefox、Safari、Opera、および基本的にAjaxを任意の形式または方法でサポートする非MicrosoftブラウザのXMLHttpRequestオブジェクトを作成します.しかし、シェアが70%に達するIEでは、この方法はできません.IEバージョンによって作成方法が異なります.そのため、IEの下で次の2つのオブジェクトを作成する方法を使用する必要があります.
try
{
xmlHttp
=
new
ActiveXObject
(
"
Msxml2.XMLHTTP
"
)
;
//新しいブラウザ向け
}
catch
(
err
)
{
try
{
xmlHttp
=
new
ActiveXObject
(
"
Microsoft.XMLHTTP
"
)
;
//古いブラウザ向け
}
catch
(
err2
)
{
xmlHttp
=
false
;
}
}
それでも、このオブジェクトを作成できないブラウザがあるとは予想できません.作成に失敗した場合は、次の文を追加します.
if
(
!
xmlHttp
){
alert
(
"
XMLHttpRequestオブジェクトを作成できません!
"
)
;
}
結合すると、
var
xmlHttp
=
false
;
try
{
xmlHttp
=
new
XMLHttpRequest
()
;
}
catch
(
trymicrosoft
)
{
try
{
xmlHttp
=
new
ActiveXObject
(
"
Msxml2.XMLHTTP
"
)
;
}
catch
(
othermicrosoft
)
{
try
{
xmlHttp
=
new
ActiveXObject
(
"
Microsoft.XMLHTTP
"
)
;
}
catch
(
failed
)
{
xmlHttp
=
false
;
}
}
}
if
(
!
xmlHttp
){
alert
(
"
XMLHttpRequestオブジェクトを作成できません!
"
)
;
}
次に、非同期リクエストを開く関数getInfo()を作成します.
function
getInfo
()
{
var
num
=
document
.
getElementById
(
"
num
"
)
.
value
;
//フォームのデータ取得
var
url
=
"
/ajax/1.php?n=
"
+
escape
(
num
)
;
xmlHttp
.
open
(
"
GET
"
,
url
,
true
)
;
//ここのtrueは非同期リクエストを表します
} open()で構成されると、リクエストを送信することができる.send()を用いてデータを送信することもできるが、URL自体でデータを送信することもできる.実際、GETリクエストの大部分ではURLでデータを送信するのがずっと簡単なので、ここではnullをsend()のパラメータとして使えばよい.urlアドレスのphpファイルは、必要なデータを処理するように要求されたphpファイルで、私たちが普段PHPを使っているときのように、後ろのパラメータを複数追加して&で区切ることができます.
xmlHttp
.
send
(
null
)
;
データを送信した後、サーバの状態をコールバックメソッドで取得する必要があるため、onreadystatechangeプロパティが使用されます.
xmlHttp
.
onreadystatechange
=
updatePage
;
この文はsend()文の前に配置されているので、有効になります.後のupdatePageは、戻り情報を処理する関数です.完全なgetInfo()は次のとおりです.
function
getInfo
()
{
var
num
=
document
.
getElementById
(
"
num
"
)
.
value
;
//フォームのデータ取得
var
url
=
"
/ajax/1.php?n=
"
+
escape
(
num
)
;
xmlHttp
.
open
(
"
GET
"
,
url
,
true
)
;
//ここのtrueは非同期リクエストを表します
xmlHttp
.
onreadystatechange
=
updatePage
;
xmlHttp
.
send
(
null
)
;
}
htmlでこの関数をトリガーする必要があります.
<
input
name
=
"
num
"
id
=
"
num
"
onblur
=
"
getInfo()
"
type
=
"
text
"
/>
次はupdatePage()という関数を記述する必要があります.
function
updatePage
(){
if
(
xmlhttp
.
readyState
==
4
)
{
var
response
=
xmlhttp
.
responseText
;
document
.
getElementById
(
"
city
"
)
.
value
=
response
;
}
}
上記のコードのreadyStateはサーバが返す状態であり,4この状態は要求が送信され,処理が完了したことを示す.responseTextは、サーバから返される情報を取得し、javascriptを介してcityとしてIDを付与するフォームです.
これで、簡単なAjaxプログラムが完成し、完全なjavascriptコードは以下の通りです.
var
xmlHttp
=
false
;
try
{
xmlHttp
=
new
XMLHttpRequest
()
;
}
catch
(
trymicrosoft
)
{
try
{
xmlHttp
=
new
ActiveXObject
(
"
Msxml2.XMLHTTP
"
)
;
}
catch
(
othermicrosoft
)
{
try
{
xmlHttp
=
new
ActiveXObject
(
"
Microsoft.XMLHTTP
"
)
;
}
catch
(
failed
)
{
xmlHttp
=
false
;
}
}
}
if
(
!
xmlHttp
){
alert
(
"
XMLHttpRequestオブジェクトを作成できません!
"
)
;
}
 
function
getInfo
()
{
var
num
=
document
.
getElementById
(
"
num
"
)
.
value
;
//フォームのデータ取得
var
url
=
"
/ajax/1.php?n=
"
+
escape
(
num
)
;
xmlHttp
.
open
(
"
GET
"
,
url
,
true
)
;
//ここのtrueは非同期リクエストを表します
xmlHttp
.
onreadystatechange
=
updatePage
;
xmlHttp
.
send
(
null
)
;
}
 
function
updatePage
(){
if
(
xmlhttp
.
readyState
==
4
)
{
var
response
=
xmlhttp
.
responseText
;
document
.
getElementById
(
"
city
"
)
.
value
=
response
;
}
}
ここではphpファイルが1つ欠けていますが、処理の仕方が違い、書き方も違いますし、Ajaxの主な部分ではないので、ここではコードを入れません.phpが出力であることを覚えて、必要なデータを返すだけでいいです.