Ajax PHP の簡単な入門チュートリアル コード

まず、このオブジェクトを 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 (失敗) {
xmlHttp = false;
}
}
}
if (!xmlHttp){
alert("XMLHttpRequest を作成できませんobject ! ");
}

次に、関数 getInfo() を作成して、非同期リクエストを開きます。 code

コードは次のとおりです:

function getInfo() { var num = document.getElementById("num").value;//フォーム データを取得します。 var url = "/ajax/1.php?n="scape(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;
後続の updatePage が有効になるように、このステートメントは send() ステートメントの前に配置する必要があります。完全な getInfo() は次のとおりです。




コードをコピー

コードは次のとおりです。

function getInfo( ) { var num = document.getElementById("num").value;//フォームデータを取得します var url = "/ajax/1.php?n="scape(num); xmlHttp.open(" GET", url, true);//ここで true は非同期リクエストを表します

xmlHttp.onreadystatechange = updatePage;

xmlHttp.send(null)


HTML でこの関数をトリガーする必要もあります。

ここで、updatePage() 関数を記述する必要があります。

function updatePage(){
if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
document; getElementById("city").value = response;
}
}
上記のコードの readState は、サーバーから返されたステータスです。ステータス 4 は、リクエストが送信され、処理されたことを示します。 responseText はサーバーから返された情報を取得し、それを JavaScript を通じて ID city を持つフォームに割り当てます。

この時点で、単純な 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 (失敗) {
xmlHttp = false;
}
}
if (!xmlHttp){
( "XMLHttpRequest オブジェクトを作成できません!");
}

function getInfo() {
var num = document.getElementById("num").value;//フォーム データを取得します
var url = "/ajax/1.php?n="scape(num);
xmlHttp.open("GET", url, true);//ここで true は非同期リクエストを表します
xmlHttp.onreadystatechange = updatePage;
xmlHttp.send(null);
}

関数 updatePage(){
if (xmlhttp.readyState == 4) {
var 応答 = xmlhttp.responseText ;
document.getElementById("city").value = response;
}
}
処理方法が異なるため、書き込み方法も異なります。これは Ajax の主要部分ではないため、ここにはコードを掲載しません。 php は必要なデータを出力して返すことを覚えておいてください。




今日は久しぶりにこのチュートリアルを見ました。