HTML、JavaScript™ テクノロジ、DHTML、および DOM で構成される Ajax は、煩雑な Web インターフェイスを対話型の Ajax アプリケーションに変換する優れた方法です。 Ajax の場合、コア オブジェクトは XMLHttpRequest であり、すべての Ajax 操作はこのオブジェクトの操作から分離できません。
まず、JavaScript でこのオブジェクトを作成する方法を理解しましょう。
varxmlHttp=newXMLHttpRequest();
この単純なコード行は、Mozilla、Firefox、Safari、Opera、および基本的に任意の形式または形式で Ajax をサポートする Microsoft 以外のブラウザーで XMLHttpRequest オブジェクトを作成します。しかし、市場シェアが 70% ある IE では、この方法は不可能であり、IE のバージョンごとに作成方法が異なるため、IE でオブジェクトを作成するには次の 2 つの方法を使用する必要があります
。
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//新しいブラウザの場合
}キャッチ(エラー){
試す{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//古いブラウザの場合
}キャッチ(err2){
xmlHttp=false;
}
}
それでも、一部のブラウザーがこのオブジェクトを作成できない可能性があることは予測できないため、作成が失敗した場合は、次の文を追加する必要があります。
if(!xmlHttp){
alert("XMLHttpRequest オブジェクトを作成できません!");
}
組み合わせは次のとおりです
。varxmlHttp=false;
試す{
xmlHttp=newXMLHttpRequest();
}キャッチ(トライマイクロソフト){
試す{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}キャッチ(その他マイクロソフト){
試す{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}キャッチ(失敗){
xmlHttp=false;
}
}
}
if(!xmlHttp){
alert("XMLHttpRequest オブジェクトを作成できません!");
}
次に、非同期リクエストを有効にする関数 getInfo() を作成しましょう。
functiongetInfo(){
varnum=document.getElementById("num").value;//フォームデータを取得します
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//ここで true は非同期リクエストを表します
}
open() で構成すると、リクエストを送信できるようになります。 send() を使用してデータを送信できますが、URL 自体を通じてデータを送信することもできます。実際、ほとんどの GET リクエストでは、URL を使用してデータを送信する方がはるかに簡単なので、ここでは send() のパラメーターとして null を使用するだけです。 URLアドレス内のphpファイルは、通常PHPを使用する場合と同様に、必要なデータの処理を要求するphpファイルです。複数のパラメータを&で区切って追加できます。
xmlHttp.send(null);
データを送信した後、コールバック メソッドを使用してサーバーのステータスを取得する必要があるため、onreadystatechange 属性が使用されます。
xmlHttp.onreadystatechange=updatePage;
このステートメントが有効になるように、このステートメントは send() ステートメントの前に配置する必要があります。これは、返された情報を処理する関数です。完全な getInfo() は次のとおりです。
functiongetInfo(){
varnum=document.getElementById("num").value;//フォームデータを取得します
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//ここで true は非同期リクエストを表します
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
この関数を HTML でトリガーする必要もあります。
<inputname="num"id="num"onblur="getInfo()"type="text"/>
次に、updatePage() 関数を記述する必要があります。
functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
上記のコードのreadyStateは、サーバーから返されるステータスです。このステータス4は、リクエストが送信され、処理されたことを示します。 responseText はサーバーから返された情報を取得し、それを JavaScript を通じて ID city を持つフォームに割り当てます。
この時点で、単純な Ajax プログラムが完成します。完全な JavaScript コードは次のとおりです
。
試す{
xmlHttp=newXMLHttpRequest();
}キャッチ(トライマイクロソフト){
試す{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}キャッチ(その他マイクロソフト){
試す{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}キャッチ(失敗){
xmlHttp=false;
}
}
}
if(!xmlHttp){
alert("XMLHttpRequest オブジェクトを作成できません!");
}
functiongetInfo(){
varnum=document.getElementById("num").value;//フォームデータを取得します
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//ここで true は非同期リクエストを表します
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
functionupdatePage(){
if(xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
ここにはまだphpファイルがありませんが、処理方法が異なり、記述方法も異なり、これはAjaxの主要な部分ではないため、ここではコードは記載しません。 PHP は必要なデータを出力して返すということを覚えておいてください。
このチュートリアルは長い間更新されておらず、初心者に非常に適しています。