jquery ajax学習メモ2 XMLHttpRequestオブジェクトを使用したresponseXML_jquery

概要: このセクションは、ajax 学習ノート 1
の 2 番目のメソッドを補足します。XMLHttpRequest オブジェクトの responseXML メソッドを使用して、Ajax 学習の準備とニーズで使用された XML データ オブジェクト
の DOM オブジェクトを受け取ります。注意事項 1 このセクションでは、主に変更が必要なコードと新しいサーブレット クラス
AJAXXMLServer.java

を紹介します。 🎜>コードをコピーします コードは次のとおりです:

import javax.servlet.http.HttpServlet

import javax.servlet.http。 HttpServletRequest;
import javax.servlet.ServletException;
import java.io.PrintWriter; data
public class AJAXXMLServer extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8 ");
response.setContentType("text/xml;charset=utf-8"); //今回は text/xml に変更します
PrintWriter out=response.getWriter();
//1パラメータを取得します
String old=request.getParameter("name");
StringBuffer sb=new StringBuffer();
sb.append("");問題がないか確認してください。
if(old==null||old.length()==0){
sb.append("ユーザー名を空にすることはできません").append("}else{
//3. 検証操作
String name=old;
if(name.equals("pan")){
/ /4. 従来との違いを適用します。このステップでは、ユーザーに新しいページを送信するのではなく、ユーザーが関心のあるデータをページに返す必要があります
//書き込み方法は変わっていませんが、本質は変わりました
sb.append(" user name[" name " ]すでに存在します").append(""); //XML を組み立てます
}else{
sb.append("Username[" name "] を使用できます").append(" "); //XML を組み立てる
}
}
out.println(sb.toString());//この文が欠けてはいけないことに注意してください
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response)
; >}


。web.xml を変更します。
AJAXXMLServer クラスの構成を追加します。
web.xml

コードをコピーします。 🎜>

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

AJAXXMLServer AJAXXMLServer <サーブレット> <サーブレット名>AJAXXMLServer AJAXXMLServer

を変更します。 >
コードをコピー


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

Change xmlhttp.open("GET","AJAXServer?name=" username,true);


から

コードをコピーします

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

xmlhttp.open("GET","AJAXXMLServer?name=" username,true);//responseXML メソッド、クラス名を変更します

2 番目:

Copy responseText コード

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

//サーバーから返されたデータを取得します
//最初の方法: サーバーによって出力されたプレーン テキスト データを取得します
//var responseText=xmlhttp.responseText
//ページ上にデータを表示し、div タグに対応する要素ノードを見つけます。 dom

//var divNode=document.getElementById("result"); //要素ノードに HTML のコンテンツを設定します //divNode.innerHTML=responseText; 🎜> は次のように変更されました: responseXML

コードをコピー


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

//2 番目の方法: responseXML を使用して XML データ オブジェクトの DOM オブジェクトを受け入れます。
var domObj = xmlhttp.responseXML;
var messageNodes = domObj.getElementsByTagName("message"); >//メッセージノード内のテキストコンテンツを取得します
//メッセージタグ内のテキストは、dom内のメッセージタグに対応する要素ノードの子ノードです firstChildは、現在のノードの最初の子ノードを取得できます。
if (messageNodes.length > 0) {
var textNode = messageNodes[0].firstChild;
//テキスト ノードの場合、nodeValue を通じてテキストを返すことができます
var responseMessage = textNode .nodeValue ;
// div に responseMessage の値を表示します
var divNode=document.getElementById("result");
divNode.innerHTML=responseMessage; else {
alert; XML データ形式が間違っています。元のテキストの内容は次のとおりです:"


コードをコピー

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


if( xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/html "); } が text/xml

に変更されました

コードをコピー

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


if(xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml ");//XML を使用する場合はこの場所を変更する必要があります } IE ブラウザの場合、3 番目の部分が変更されていなければエラーは報告されませんが、Firefox ブラウザの場合は、この部分が変更されていない場合、次のステートメントはエラーを報告します。var domObj = xmlhttp.responseXML; 3 番目の変更されたコードの if ステートメントは実行されないことを確認できます。 IE ブラウザ。この if ステートメントは Firefox ブラウザで実行されます。

説明: アクセス パス、実行中のスクリーンショットと ajax 学習メモ 1 については既に説明したので省略します。