研修10日目、AJAX初日:
8671 ワード
北京伝智アナウンサー
一、AJAXの技術核心
1.XMLHttpRequestオブジェクト
2.DOMとHTML
3.DOMとXML
4.オブジェクト向けJavascript
二、XMLHttpRequestオブジェクトの作成
異なるバージョンのブラウザはXMLHttpRequestオブジェクトを作成する方法が異なるので、異なるブラウザに対して異なるXMLHttpRequestオブジェクトを作成する必要があります.主に2種類に分けられます.
XMLHttpRequestオブジェクトを作成する前にif...elseを使用してください.文はどのブラウザかを判断します
1 . IE7.0次のバージョンでは、ActiveXコンポーネントを使用してXMLHttpRequestオブジェクトを作成します.作成方法は次のとおりです.
例えばvar xmlhttp;
xmlhttp=new ActiveXObject();
2 . その他のブラウザでは、JavascriptのXMLHttpRequestオブジェクトを直接作成できます.
例えばvar xmlhttp;
xmlhttp=new XMLHttpRequest();
完全なコードは次のとおりです.
三、documentについて.getElementById
document.getElementByIdの役割はid名に基づいて対応するノード(あるhtmlラベルの内容)を得ることであり、ここではdivとテキストボックスのノードをそれぞれこの文で得る.valueの役割は、テキストボックスのvalue属性値、すなわちテキストボックスの内容を取得することです.
4つの完全なAJAXを確立するステップ
1.XMLHttpRequestオブジェクトの作成
2.コールバック関数の設定
---注意:コールバック関数の後にカッコを付けないでください.そうしないと、コールバック関数を得る戻り値になります.
3.openメソッドを使用してサーバとの接続を確立する
ここでopenメソッドの3つのパラメータは必須です
---POSTメソッドとGETメソッドはopenメソッドとsendメソッドを記述するときに異なります.
POSTメソッドを使用する場合はsetRequestHeader(String header,String value)メソッドを設定し、send()内のパラメータは空ではありません
GETメソッドを使用して、OPENメソッドにパラメータを直接書きます...send(null)
4.sendメソッドを使用してサーバにデータを送信
5.コールバック関数を作成し、異なる応答状態に対して処理する
応答ステータスコードreadystateおよびサーバ戻りステータスコードstatusの判断
使用形式:xmlhttp.readystate
応答ステータスコードreadystateとその意味:
0:初期化されていないことを示します
1:openメソッドが正常に呼び出された後
2::サーバがクライアントの要求に応答したことを示す
3:インタラクションを表します.Httpヘッダ情報は既に受信されており、応答データはまだ受信されていない.
4:データ受信完了を示します.
サーバはステータスコードstatusを返す:フォーマット:xmlhttp.status
200は「成功」を表し、404は「見つからない」その他の具体的なコードの意味を示す.張先生JAVAWEB開発の内幕を参照」P 122ページ
五、重要な方法と属性
1 . 方法:open(String method,String url,boolean asynch,String username,String password)
サーバーへの接続を確立し、methodはHTTP呼び出し方法を表す.一般的には「GET」「POST」が用いられる.urlは呼び出したサーバのアドレスを表し、asynchは非同期方式を採用するかどうかを表し、trueであれば非同期を表す.usernameとpasswordは、http認証メカニズムを提供するために必要なユーザー名とパスワードをそれぞれ表し、この2つのパラメータは指定しなくてもよい.
2 . 方法:send(content)
サーバにリクエストを送信します.非同期であれば、メソッドはすぐに返されます.Contentは、DOMオブジェクト、入力ストリーム、または文字列の内容を指定しなくてもよい.
3 . 方法:setRequestHeader(String header,String value)
このメソッドはopenメソッド以降に呼び出され、POST方式を使用する場合に設定する必要があります.
4 . 属性:onreadystatechange
ステータスの変更を要求するイベントトリガ(readyStateが変更されるとこのメソッドが呼び出されます).通常はjavascript関数です
例:xmlhttp.onreadystatechange=callback;callbackはfunctionで定義された関数です.
5 . 属性:readyState status第4条第5点を参照
6 . プロパティ:responseTextサーバが返すテキストの内容
responseXMLサーバが返すDOM対応XMLコンテンツ
statusTextサーバはステータスコードのテキスト情報を返す
六、注意すべき内容
1 . 異なるブラウザの下でXMLHttpRequestオブジェクトの異なる作成方法
2 . コールバック関数を設定するときはカッコを付けないでください
3 . OPENメソッドの3つのパラメータの意味に加えて、GETとPOST方式のサーバ側アドレスの異なる書き方に注意する必要があります
4 . GET方式とPOST方式SENDのパラメータの違い、およびPOST方式を使用する場合、SENDの前に要求ヘッダ情報を設定する作業
5 . 正しい応答データが返されたと判断する方法と,応答データの内容をどのように取得するかに注意する.
七、AJAX応用の簡単な例
この例は、ユーザ名が存在するか否かを判定するAJAXの簡単なアプリケーションである.
1、HTMLページ
AJAXで作成したHTMLページ:多くのコードをHTMLクライアントに書きました
2、servletのコード
http://www.itcast.cn
一、AJAXの技術核心
1.XMLHttpRequestオブジェクト
2.DOMとHTML
3.DOMとXML
4.オブジェクト向けJavascript
二、XMLHttpRequestオブジェクトの作成
異なるバージョンのブラウザはXMLHttpRequestオブジェクトを作成する方法が異なるので、異なるブラウザに対して異なるXMLHttpRequestオブジェクトを作成する必要があります.主に2種類に分けられます.
XMLHttpRequestオブジェクトを作成する前にif...elseを使用してください.文はどのブラウザかを判断します
1 . IE7.0次のバージョンでは、ActiveXコンポーネントを使用してXMLHttpRequestオブジェクトを作成します.作成方法は次のとおりです.
例えばvar xmlhttp;
xmlhttp=new ActiveXObject();
2 . その他のブラウザでは、JavascriptのXMLHttpRequestオブジェクトを直接作成できます.
例えばvar xmlhttp;
xmlhttp=new XMLHttpRequest();
完全なコードは次のとおりです.
// XMLHttpRequest
if(window.XMLHttpRequest){
// IE7.0
xmlhttp=new XMLHttpRequest();
// if Mozillar xml bug
if(xmlhttp.overrideMimetype){
xmlHttp.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){
// IE6.0 IE
var MSXML=['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
//for MSXML MSXML
for(var n = 0; n < MSXML.length; n ++){
try{//
xmlhttp = new ActiveXObject(MSXML[n]);
break;
}catch(e){}
}
}
三、documentについて.getElementById
document.getElementByIdの役割はid名に基づいて対応するノード(あるhtmlラベルの内容)を得ることであり、ここではdivとテキストボックスのノードをそれぞれこの文で得る.valueの役割は、テキストボックスのvalue属性値、すなわちテキストボックスの内容を取得することです.
4つの完全なAJAXを確立するステップ
1.XMLHttpRequestオブジェクトの作成
2.コールバック関数の設定
---注意:コールバック関数の後にカッコを付けないでください.そうしないと、コールバック関数を得る戻り値になります.
3.openメソッドを使用してサーバとの接続を確立する
ここでopenメソッドの3つのパラメータは必須です
---POSTメソッドとGETメソッドはopenメソッドとsendメソッドを記述するときに異なります.
POSTメソッドを使用する場合はsetRequestHeader(String header,String value)メソッドを設定し、send()内のパラメータは空ではありません
GETメソッドを使用して、OPENメソッドにパラメータを直接書きます...send(null)
4.sendメソッドを使用してサーバにデータを送信
5.コールバック関数を作成し、異なる応答状態に対して処理する
応答ステータスコードreadystateおよびサーバ戻りステータスコードstatusの判断
使用形式:xmlhttp.readystate
応答ステータスコードreadystateとその意味:
0:初期化されていないことを示します
1:openメソッドが正常に呼び出された後
2::サーバがクライアントの要求に応答したことを示す
3:インタラクションを表します.Httpヘッダ情報は既に受信されており、応答データはまだ受信されていない.
4:データ受信完了を示します.
サーバはステータスコードstatusを返す:フォーマット:xmlhttp.status
200は「成功」を表し、404は「見つからない」その他の具体的なコードの意味を示す.張先生JAVAWEB開発の内幕を参照」P 122ページ
五、重要な方法と属性
1 . 方法:open(String method,String url,boolean asynch,String username,String password)
サーバーへの接続を確立し、methodはHTTP呼び出し方法を表す.一般的には「GET」「POST」が用いられる.urlは呼び出したサーバのアドレスを表し、asynchは非同期方式を採用するかどうかを表し、trueであれば非同期を表す.usernameとpasswordは、http認証メカニズムを提供するために必要なユーザー名とパスワードをそれぞれ表し、この2つのパラメータは指定しなくてもよい.
2 . 方法:send(content)
サーバにリクエストを送信します.非同期であれば、メソッドはすぐに返されます.Contentは、DOMオブジェクト、入力ストリーム、または文字列の内容を指定しなくてもよい.
3 . 方法:setRequestHeader(String header,String value)
このメソッドはopenメソッド以降に呼び出され、POST方式を使用する場合に設定する必要があります.
4 . 属性:onreadystatechange
ステータスの変更を要求するイベントトリガ(readyStateが変更されるとこのメソッドが呼び出されます).通常はjavascript関数です
例:xmlhttp.onreadystatechange=callback;callbackはfunctionで定義された関数です.
5 . 属性:readyState status第4条第5点を参照
6 . プロパティ:responseTextサーバが返すテキストの内容
responseXMLサーバが返すDOM対応XMLコンテンツ
statusTextサーバはステータスコードのテキスト情報を返す
六、注意すべき内容
1 . 異なるブラウザの下でXMLHttpRequestオブジェクトの異なる作成方法
2 . コールバック関数を設定するときはカッコを付けないでください
3 . OPENメソッドの3つのパラメータの意味に加えて、GETとPOST方式のサーバ側アドレスの異なる書き方に注意する必要があります
4 . GET方式とPOST方式SENDのパラメータの違い、およびPOST方式を使用する場合、SENDの前に要求ヘッダ情報を設定する作業
5 . 正しい応答データが返されたと判断する方法と,応答データの内容をどのように取得するかに注意する.
七、AJAX応用の簡単な例
この例は、ユーザ名が存在するか否かを判定するAJAXの簡単なアプリケーションである.
1、HTMLページ
AJAXで作成したHTMLページ:多くのコードをHTMLクライアントに書きました
<html>
<head>
<title></title>
</head>
<body>
<br/>
：<input type="text" id="name"/>
<input type="button" value=" " onclick="submit()"/><br/>
<div id="result"></div>
<script type="text/javascript">
var xmlhttp;
var resultNode;
function submit(){
// DIV
resultNode = document.getElementById("result");
/* XMLHttpRequset
* IE5,IE6 ， XMLHttpRequset ，
* ， 。
*/
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
// BUG， BUG， ，
if(xmlhttp.overrideMimetype){
xmlHttp.overrideMimeType("text/xml");
}
// ，
} else if (window.ActiveXObject) {
var MSXML =
['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
for(var n = 0; n < MSXML.length; n ++){
try{
xmlhttp = new ActiveXObject(MSXML[n]);
break;
}catch(e){}
}
}
if(xmlhttp == null){
resultNode.innerHTML = " XMLHttpRequest ";
}
// name ，
var name = document.getElementById("name").value;
if(name == null || name == ""){
resultNode.innerHTML = " ";
return false;
}
//GET
xmlhttp.onreadystatechange=callback;
xmlhttp.open("GET"," ClassicServer ?name=" +
encodeURI(encodeURI(name)),true);
xmlhttp.send(null);
//POST ，POST setRequestHeader
xmlhttp.open("POST"," ClassicServer ",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("name=" + encodeURI(encodeURI(name)));
}
//
function callback(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
resultNode.innerHTML = xmlhttp.responseText;
} else{
resultNode.innerHTML = " ";
}
}
}
</script>
</body>
</html>
2、servletのコード
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class ClassicServer extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try{
response.setContentType("text/html;charset=GB2312");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
if(old == null || old.length() == 0){
out.println(" ");
} else{
String name = new String(old.getBytes("ISO8859-1"));
if(name.equals("wangxingkui")){
out.println(" [" + name + "] ， ");
} else{
out.println(" [" + name + "] ， ");
}
}
out.println("<br/><a href=\"index.html\"> </a>");
} catch(Exception e){
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
http://www.itcast.cn