Ajax は「Asynchronous JavaScript and XML」の略で、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 Ajax テクノロジーは、現在 JavaScript スクリプトを通じてブラウザーで利用できるすべてのテクノロジーを集めたものです。 Ajax はこれらすべてのテクノロジーを新しい方法で使用し、Web 開発の古い B/S スタイルを復活させます。
Ajax テクノロジの中で、コアとなるテクノロジは XMLHttpRequest です。その元の名前は XMLHTTP であり、開発者のニーズを満たすために Microsoft によって 1999 年に初めて導入されました。その後、このテクノロジーは上記の仕様により XMLHttpRequest と名付けられました。これが Ajax テクノロジーをユニークなものにしているのです。つまり、XMLHttpRequest は、ブラウザーで実行されている JavaScript スクリプトがページ内のサーバーと通信するための手段を提供します。ページ内の JavaScript は、ページを更新せずにサーバーからデータを取得したり、サーバーにデータを送信したりできます。 XMLHttpRequest の出現は、Web 開発に新たな可能性をもたらし、Web アプリケーションの構成要素に対する人々の見方を完全に変えます。これにより、まったく新しい方法で Web 開発を行うことができ、ユーザーにより良いインタラクティブなエクスペリエンスを提供できるようになります。
従来の Web 開発とは異なり、Ajax は Web アプリケーションを静的なページベースの方法で表示しません。 Ajax の観点から見ると、Web アプリケーションは少数のページで構成されている必要があり、各ページは実際にはより小さな Ajax アプリケーションになります。各ページには、JavaScript を使用して開発されたいくつかの Ajax コンポーネントが含まれています。これらのコンポーネントは、XMLHttpRequest オブジェクトを使用してサーバーと非同期で通信し、サーバーから必要なデータを取得した後、DOM API を使用してページ上のコンテンツの一部を更新します。したがって、Ajax アプリケーションと従来の Web アプリケーションの間には、次の 3 つの主な違いがあります。
1. ページ全体を更新せずに、ページ内でサーバーと通信します。
2. 非同期モードを使用して、ユーザーの操作を中断することなくサーバーと通信し、より高速な応答機能を実現します。
3. アプリケーションはわずか数ページで構成されています。ほとんどの操作はページ内で完了するため、ページ全体を切り替える必要はありません。
Ajax によって Web アプリケーションがより動的になり、より高度なインテリジェンスがもたらされ、Ajax UI コンポーネントに豊かな表現力が提供されることがわかります。このような新しいタイプの Web アプリケーションは、RIA (Rich Internet Application) アプリケーションと呼ばれます。
冒頭は、AJAX 技術を知らない読者に AJAX 技術をできるだけ早く理解してもらうために、インターネットで見つけた AJAX の導入に関する情報をいくつか紹介します。 次に、私がこれまでに使用した AJAX 技術とテクニックをいくつか紹介します。実際の開発プロセス。
AJAX テクノロジを使用する場合に最も重要なことは、XMLHttpRequest オブジェクトを作成することです。このオブジェクトの作成方法については、インターネット上にたくさんの情報があります。私が最もよく使用する方法の 1 つは、次のとおりです。
関数 createXMLHttpRequest() {
var xmlhttp;
試す {
xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
} キャッチ(e) {
試す {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
} キャッチ(e) {
試す {
xmlhttp = 新しい XMLHttpRequest();
} キャッチ(e) {
alert("XMLHttpRequest オブジェクトの作成に失敗しました!");
}
}
}
xmlhttp を返します。
}
以下にいくつかの例と、これらの例から学べることをいくつか挙げます。
次のコードは、特定の項目を追加するときに、その項目がデータベースにすでに存在するかどうかを確認する方法の例です。
<input type="text" style="width:100%" class="noEmptyInput" name="segment10" value="<%=segment10%>" maxlength="16" onblur="do_verify();">
関数 do_verify() {
var セグメント 10 = document.mainFrm.segment10.value;
var inventoryItemId = document.mainFrm.inventoryItemId.value;
// アラート(セグメント10)
xmlHttp = createXMLHttpRequest();
var url = "/servlet/com.sino.ies.inv.maintenance.servlet.ItemMaintainServlet?forward=doVerify&segment10=" +セグメント10 + "&inventoryItemId=" + inventoryItemId;
xmlHttp.onreadystatechange = handleReadyStateChange;
xmlHttp.open("post", url, true); //データの送信方法にもGETとPOSTの2つがあるが、POSTの場合は以下の文を書く必要がある
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlHttp.send(null);
}
関数 handleReadyStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText == 'Y') {
document.mainFrm.isExist.value = 'Y';
document.getElementById("フラグ").style.display = "ブロック"
document.mainFrm.segment10.focus();
} それ以外 {
document.mainFrm.isExist.value = 'N';
document.getElementById("flag").style.display = "なし"
}
} それ以外 {
アラート(xmlHttp.status);
}
}
}
バックグラウンドコードは次のとおりです。
boolean success = itemDAO.doVerifyItem(); //doVerifyItem は、指定されたアイテムがデータベースに存在するかどうかを確認するメイン メソッドです。アイテムが既に存在する場合、このメソッドは TRUE を返します。
PrintWriter 出力 = res.getWriter();
if (成功) {
out.print("Y");
}
out.flush();
out.close();
}