1。Ajaxの紹介
Ajaxは（非同期JavaScriptおよびXML）の略語であると考えられており、ブラウザが現在のページを更新せずにサーバーと通信できるようにするテクノロジーはAjaxと呼ばれます。
例：Baidu検索、リアルタイムマップなど。AJAXモデルでは、データはクライアントとサーバーの間に独立して送信されます。サーバーは、ページ全体を更新せずにデータを更新できます。
2。AJAX作業原理図
3. AJAXの送信と受信方法
1.リクエストを送信するための対応する方法
1）onreadystatechangeイベント処理機能：この関数は、ユーザーではなくサーバーによってトリガーされます。 ReadyStateプロパティが変更されるたびに、OnreadedStateChangeイベントがトリガーされます。
2）open（メソッド、URL、非同期）：XMLHTTPREQUESTオブジェクトのOpen（）により、プログラムはAJAXコールサーバーでリクエストを送信できます。メソッド要求タイプは「取得」または「投稿」にすることができ、URLはパス文字列です。 sysnchronizedは、リクエストが非同期に送信されるかどうかを示します。
3）送信（データ）：データは、サーバーにも渡される文字列です。 「取得」要求が選択されている場合、データはnullです。
2。対応する方法を受け取ります
1）READYSTATE：数値で表されるAjaxの現在の状態を表し、0は初期化を表し、1はロードを表します。2はロードを表し、3はサーバーが応答を送信します。
2）ステータス：Javawebのように、404はページを見つけませんでした、403はアクセスを禁止し、500内部サーバーエラー、200すべてが正常であり、304は変更されていません。XmlhttpRequestオブジェクトでは、サーバーによって送信されたステータスコードがステータス属性に保存されます。この値を通じて、サーバーが成功した応答を送信したことを確認できます。
3）responseText：サーバーから送信されたデータが含まれています。サーバーは、通常はHTML、XML、または通常のテキストです。 ReadyStateの値が4およびステータスの値が200の場合、ResponseText属性は使用できます。表面的には、AJAX要求が終了しました。サーバーがXMLを返す場合、データはResponseXMLに保存されます。
4。コードデモンストレーション（Baidu検索ボックスを模倣）
1。Javawebプロジェクトを作成します（プロジェクトディレクトリ構造は次のとおりです）
2。SearchServlet.java
パッケージcn.jon.ajax; java.io.ioexceptionをインポートします。 java.util.listをインポートします。 javax.servlet.servletexceptionをインポートします。 javax.servlet.http.httpservletをインポートします。 javax.servlet.http.httpservletrequestをインポートします。 javax.servlet.http.httpservletResponseをインポートします。 net.sf.json.jsonarrayをインポートします。 cn.jon.ajax.data.datautilsをインポートします。パブリッククラスSearchServletはhttpservletを拡張します{private static final long serialversionuid = 1l; public void doget（httpservletrequest request、httpservletresponse応答）Servletexception、ioexception {//リクエストの出力形式とUTF-8 request.setchAracterencoding（ "utf-8"）への応答を設定します。 Response.setcharacterencoding（ "utf-8"）;文字列キーワード= request.getParameter（ "keyword"）; if（keyword！= null）{datautils dataresource = new DataUtils（）;リスト<文字列>リスト= dataresource.finddatalist（keyword）; //system.out.println（jsonarray.fromobject（list）.toString（））; Response.getWriter（）。write（jsonarray.fromobject（list）.toString（））; }} public void dopost（httpservletrequest request、httpservletResponse応答）servletexception、ioexception {doget（request、response）; }} 3。Datautils.java、リソースファイルの下のデータを読み取ります
パッケージcn.jon.ajax.data; java.io.bufferedreaderをインポートします。 java.io.ioexceptionをインポートします。 java.io.inputStreamをインポートします。 java.io.inputStreamReaderをインポートします。 java.util.arraylistをインポートします。 java.util.listをインポートします。 public class datautils {private static list <string> datalist = new ArrayList <String>（）; public static final string url = "/test.txt"; static {readresource（url）; // datalist.add（ "aa"）; // datalist.add（ "ajax"）; // datalist.add（ "afinal"）; // datalist.add（ "bb"）; } // public static void readresource（string url）{inputstream is = null; inputStreamReader ISR = null; BufferedReader Br = null;文字列line = null; try {is = datautils.class.getClassLoader（）。getResourceasStream（url）; ISR = new inputStreamReader（is）; BR = new BufferedReader（ISR）; line = br.readline（）; while（null！= line）{if（！line.isempty（））{datalist.add（line）; } line = br.readline（）; } // while} catch（ioexception e）{e.printstacktrace（）; }最後に{if（null！= br）{try {br.close（）; } catch（ioexception e）{}} if（null！= isr）{try {isr.close（）; } catch（ioexception e）{}} if（null！= is）{try {is.close（）; } catch（ioexception e）{}}}} public list <string> findDatalist（string str）{list <string> data = new ArrayList <String>（）; for（string sdata：datalist）{if（sdata.contains（str））{data.add（sdata）; }} //戻りデータの場合。 }} 4。Index.jsp、ページディスプレイ
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "UTF-8"％> <html> <head> <link rel = "href =" css/my.css "> <script type =" text/javascript "src =" js/my.js "> </div> <img src = "img/baidu.png"> <！ - 入力ボックス - > <入力タイプ= "テキスト" size = "50" id = "keyword" onkeyup = "getMoreContents（）" onblur = "keywordblur（）" onfocus = "getmorecontents（）領域 - > <div id = "popdiv"> <table id = "content-table" bgcolor = "＃fffafa" cellpacing = "0" cellpadding = "0"> <tbody id = "content_table_body"> <！ - 動的に照会されたデータがここに表示されます - > </tbody> </div> </div>
5。My.js、Ajaxの中核部分
var xmlhttp; // 1。関数関数ユーザー入力コンテンツの関連情報を取得する関数getMoreContents（）{//最初にユーザー入力var content = document.getElementByID（ "keyword"）; if（content.value == ""）{//入力ボックスが空の場合、以前のデータClearContent（）をクリアします。戻る; } //alert(content.value）; // 2。次に、Ajaxを使用してデータを非同期に送信するため、ユーザー入力コンテンツをサーバーに送信するため、Xmlhttpオブジェクト// xmlhttp = get xmlhttpオブジェクトを使用する必要があります。 xmlhttp = createxmlhttp（）; // alert（xmlhttp）; // 3。サーバーにデータを送信するには、最初にサーバーのアドレスを定義します。var url = "search？keyword ="+escase（content.value）; // trueとは、サーバーからの応答を待たずに、send（）メソッドの後もJavaScriptスクリプトが実行され続けることを意味します。 xmlhttp.open（ "get"、url、true）; // XMLHTTPコールバックメソッドにバインドします。このコールバックメソッドは、XMLHTTP状態が変更されたときに呼び出されます。 xmlhttp.onreadystatechange = callback; //パラメーターはすでにURLに含まれているため、パラメーターxmlhttp.send（null）を追加する必要はありません。 } // get xmlhttpオブジェクト関数createxmlhttp（）{// var xmlhttpほとんどのブラウザーに適しています。 if（window.xmlhttprequest）{xmlhttp = new xmlhttprequest（）; } //ブラウザの互換性を検討してください（window.activexobject）{xmlhttp = new ActiveXObject（ "microsoft.xmlhttp"）; //ブラウザにActiveXObjectオブジェクトがあるが、microsoft.xmlhttpパラメーターがない場合はif（！xmlhttp）{xmlhttp = new ActiveXObject（ "msxml2.xmlhttp"）; }} xmlhttpを返します。 } // callback関数関数callback（）{// 4は完了を意味します（xmlhttp.readystate == 4）{// 200はサーバー応答が成功し、404は見つかっていないことを意味します。 var result = xmlhttp.responsetext; //取得したデータの分析var json = eval（ "（"+result+"）"）; //これらのデータを取得した後、データを動的に表示できます。これらのデータを入力ボックスの下に表示します。 // alert（json）; SetContent（JSON）; }}} //関連するデータの表示を設定します。パラメーターは、関連するデータ関数setContent（contents）を表します{//以前のデータClearContent（）をクリアします。 // position setlocaltion（）を設定します。 //最初に関連するデータの長さを取得して、<tr> </tr> var size = contents.lengthの数を決定します。 //（var i = 0; i <size; i ++）{var nextnode = contents [i]; // json data var tr = document.createelement（ "tr"）のi番目の要素を表します。 var td = document.createelement（ "td"）; td.setattribute（ "borde"、 "0"）; td.setattribute（ "gbcolor"、 "＃fffafa"）; // TDの2つのスタイルをバインドします（マウスが入って移動するときのイベント）td.onmouseOver = function（）{this.className = 'MouseOver'; }; td.onmouseout = function（）{this.classname = 'mouseout'; }; td.onclick = function（）{//このメソッドは、関連データがマウスでクリックされると、関連データが自動的に入力ボックスに入力されることを実装します。 }; td.onmousedown = function（）{//マウスが関連データをクリックすると、データは入力ボックスdocument.getElementById（ "keyword"）。value = this.innertextに自動的に追加されます。 }; //関連データにマウスが吊り下げられると、入力ボックスに自動的に追加されます/* td.onmouseOver = function（）{this.className = 'MouseOver'; if（td.innertext！= null）document.getElementById（ "keyword"）。value = this.innertext; } *///テキストノードの作成var text = document.createTextNode（nextNode）; TD.AppendChild（テキスト）; Tr.AppendChild（TD）; document.getElementById（ "content_table_body"）。appendChild（TR）; }} //以前のデータ関数ClearContent（）{var contentTableBody = document.getElementById（ "content_table_body"）; var size = contenttablebody.childnodes.length; //削除するとき、（var i = size-1; i> = 0; i - ）{var i = size-1; i> = 0; i-）forの下から上に削除すると、i番目の子ノードcontenttablebody.removechild（contenttablebody.childnodes [i]）の削除を指定します。 } //関連するデータの外側の境界をクリアvar popdiv = document.getElementbyId（ "popdiv"）。style.border= "none"; } //入力ボックスがフォーカスを失ったら、以前のデータ関数keywordblur（）{clearContent（）;をクリアします。 } //関連する情報関数を表示する位置を設定しますsetlocaltion（）{//関連する情報の表示位置は、入力ボックスvar content = document.getElementByID（ "keyword"）と一致する必要があります。 var width = content.offsetwidth; //入力ボックスの長さvar left = content ["offsetLeft"]; popdiv.style.border = "グレー1px solid"; popdiv.style.left = left+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; popdiv.style.top = top+"px"; popdiv.style.width = width+"px"; document.getElementById（ "Content-Table"）。style.width = width+"px"; } 6。MY.CSS、コントロールスタイル
#mydiv {position：absolute;左：50％;トップ：50％;マージン左：-200px;マージントップ：-120px; } #button {background-color：＃5566ee; } .MouseOver {background：＃708090;色：#fffafa; } .Mouseout {background：#fffafa;色：＃000000; }注：このコードは、MOOC.comの研究から来ており、自分で改善を行っています。興味のある人が一緒にコミュニケーションを取り、学ぶことができることを願っています。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。