jquery 1_jquery での Ajax 学習メモ-jsチュートリアル-php.cn

AJAX の簡単な紹介:
AJAX は、Asynchronous JavaScript And XML (Asynchronous JavaScript And XML) を指し、インタラクティブな Web アプリケーションを作成するための Web 開発テクノロジを指します。 AJAX を使用すると、JavaScript の XMLHttpRequest オブジェクトを使用して、JavaScript がサーバーと直接通信できるようになります。このオブジェクトにより、JavaScript はページをリロードせずに Web サーバーとデータを交換できるようになります。
jQuery は JavaScript フレームワークであり、理解しやすい JavaScript の軽量カプセル化です。
Ajax は、XML JavaScript と組み合わせた非同期リクエストテクノロジであり、動的更新を実現できます。
ajax準備:
1.jqueryダウンロード:
公式サイトの最新ダウンロードアドレス: http://blog.jquery.com/2011/09/01/jquery- 1- 6-3-リリース/
ダウンロード時に jQuery 1.6.3 Minified または jQuery 1.6.3 Uncompressed を選択し、右クリックして「Thunder を使用してダウンロード」を選択します
2. 主な知識の紹介
2.1. Ajax 非同期送信手順:
1. dom を使用してテキストボックスの属性の値を取得します
document.getElementById("id name").value
2. XMLHttpRequest オブジェクトを作成します
ブラウザ上には XMLHttpRequest、ActiveXObject の 2 種類のオブジェクトがあります
3. コールバック関数の登録コールバック関数を登録するときは、関数名のみが必要です。括弧は追加しないでください
コールバック関数を登録するときに、返されたデータ
1 番目の方法: クライアントから出力されたプレーンテキストデータをサーバーから取得します。
2 番目の方法: responseXML を使用して XML データオブジェクトの DOM オブジェクトを受け取ります。
4.接続情報
5. データを送信し、サーバーとの対話を開始します
Post メソッド/get メソッド

2.2.ajax メインメソッド:
(1).getElementById("id 属性値") ):
指定された id 属性値に従ってオブジェクトを取得します
(2 ).getElementsByTagName(tagname):
HTML ドキュメント全体で任意の HTML 要素を検索し、指定された要素を持つ要素のコレクションを返します名前
(3). セレクター:
セレクターには、基本セレクター、階層選択セレクター、属性セレクターなどが含まれます。このプログラムには、次のような基本的なセレクター #id のみがあります。
$("#myDiv"): ID「myDiv」を持つ要素を検索します。
2.3.XMLHttpRequest オブジェクト:
XMLHttpRequest は、次のような関数を提供します。ページのリロードページがロードされると、Web ページが更新され、ページがロードされた後にクライアントがサーバーにデータを要求し、ページがロードされた後にサーバーがデータを受信し、バックグラウンドでクライアントにデータを送信します。
2.3.1. メソッド:
(1)overrideMimeType("text/html"):
サーバーに送信されるヘッダーをオーバーライドし、text/xml を MIME タイプとして強制します
(2) ) open(method, url, async, username,password):
URL や HTTP メソッドなどの HTTP リクエストパラメーターを初期化しますが、リクエストは送信しません。
method パラメータはリクエストに使用される HTTP メソッド (GET、POST、HEAD など)、
url パラメータはリクエストの本文です。
async パラメータはリクエストが同期か非同期かを示します。誤ったリクエストは同期です。、本当のリクエストは次のとおりです。非同期の
ユーザー名とパスワードのパラメーターはオプションであり、URL で必要な承認の認証資格を提供します。指定すると、URL 自体で指定された修飾がオーバーライドされます。
(3)send(body):
open() メソッドに渡されるパラメータと、メソッド
send(body) に渡されるオプションのリクエスト本文を使用して、HTTP リクエストを送信します。open を呼び出す場合() ) 指定された HTTP メソッドは POST または PUT で、body パラメーターはリクエストの本文を文字列または Document オブジェクトとして指定します。リクエストボディが必要ない場合、このパラメータは null になります。
以前に呼び出された open() の async パラメータが false の場合、このメソッドはブロックされ、readyState が 4 になり、サーバーの応答が完全に受信されるまで戻りません。
async パラメータが true の場合、またはこのパラメータが省略された場合、send() はすぐに戻り、後述するように、サーバーの応答はバックグラウンドスレッドで処理されます。
(4)setRequestHeader(name, value):
開いているが送信されていないリクエストに HTTP リクエストを設定または追加します。
name パラメータは、設定するヘッダーの名前です。このパラメータには空白、コロン、改行を含めないでください。
value パラメータはヘッダーの値です。このパラメータには改行を含めることはできません
2.3.2. 属性:
(1)onreadystatechange:
readyState 属性が変更されるたびに呼び出されるイベントハンドラー関数。また、readyState が 3 の場合、複数回呼び出される場合もあります。
(2)readyState:
XMLHttpRequest が最初に作成されたとき、この属性の値は 0 から始まり、完全な HTTP 応答が受信されるまで 4 まで増加します。
5 つの状態には、それぞれ非公式の名前が関連付けられています。次の表に、状態、名前、および意味を示します。

readyState の値は、リクエストの処理中以外はデクリメントされません。または、プロセス中に open() メソッドが呼び出されます。このプロパティの値が増加するたびに、onreadystatechange イベントハンドラーがトリガーされます。
(3)status:
サーバーから返された HTTP ステータスコード (成功の場合は 200、「見つかりません」エラーの場合は 404 など)。 readyState が 3 未満のときにこのプロパティを読み取ると、例外が発生します。
(4)responseText:
これまでにサーバーから受信した応答本文 (ヘッダーを除く)、またはまだデータを受信していない場合は空の文字列。
readyState が 3 未満の場合、このプロパティは空の文字列です。このプロパティは、readyState が 3 の場合、それまでに受信した応答部分を返します。 readyState が 4 の場合、このプロパティは完全な応答本文を保持します。
応答に応答本文の文字エンコーディングを指定するヘッダーが含まれている場合は、そのエンコーディングを使用します。それ以外の場合は、Unicode UTF-8 が想定されます。
(5)responseXML: リクエストに対する応答。XML に解析され、Document オブジェクトとして返されます。

コード例:
注: この例はフロントエンドで構成されています。バックエンドはサーブレット実装を使用しますが、データベースにアクセスしてデータを検証しません。フロントデスクはhtmlとjavascriptで構成されており、jqueryでカプセル化されたajaxを使用する方法と、XMLHttpRequestオブジェクトを使用する方法があります。 2 つの検証方法の違いは、JavaScript スクリプトが異なるだけで、フロントページとバックグラウンドサーブレットは同じです。

フロントエンド ajax.html

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

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> >

ajax

>ユーザー名:

;/br>

🎜>
バックグラウンド AJAXServer.java:

コードをコピー

コードは次のとおりです: インポート javax.servlet.http.HttpServlet; インポート javax.servlet.http.HttpServletResponse; インポート javax.servlet.http. io.IOException;

import java.io.PrintWriter;

public class AJAXServer extends HttpServlet { 
public void doGet(HttpServletRequest request, HttpServletResponse) 
throws ServletException, IOException { 
response.setContentType ("text/html;charset=utf-8"); 
PrintWriter out= response.getWriter(); 
//1. パラメータを取得します
String old=request.getParameter("name"); 
//2. 問題があるかどうかを確認します
if(old==null ||old.length()==0){ 
out.println("ユーザー名を空にすることはできません"); 
}else{ 
//3. 検証操作
String name= old; 
if(name.equals("pan")){ 
//4. 従来のアプリケーションとの違い。このステップでは、ユーザーが関心のあるデータを新しいページではなくページに返す必要があります。
out.println("Username[" name "] selected"); 
}else{ 
 out .println("Username[" name "] を使用できます"); 
} 
} 
} 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
this.doGet(request,response); 
} 
} 

 
javascript:verify.js 




コピーコード 

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

 
 
function verify1(){ 
//1.テキストボックス内
//document.getElementById("username"); 
var jqueryObj= $("#username"); 
//ノードの値を取得します
var userName=jqueryObj . val(); 
//2. テキスト ボックス内のデータをサーバーのサーブレットに送信します 
$.get("AJAXServer?name=" username,null,callback); function callback(data){ 
//3. サーバーから返されたデータを受信します 
//4. サーバーから返されたデータをページに動的に表示します 
// 情報を保存するノードを見つけます
var resultObj=$("#result"); 
resultObj.html(data); 
} 
//検証方法 1 をメソッド内に記述することです。同じ、両方 jquery によってカプセル化された ajax 動的検証フォーム データです 
function verify2(){ 
$.get("AJAXServer?name=" $("#username").val(),null,function( data) { 
$("#result").html(data); 
} 
 
var xmlhttp;//グローバル変数を定義します 
function verify3(){ 
//1。 dom を使用してテキスト ボックス内の属性の値を取得します 
var username=document.getElementById("username").value; 
//2. XMLHttpRequest オブジェクトを作成します
//このオブジェクトを作成するには、IE と他の IE の違いに基づいて、異なるコードを記述する必要があります。ブラウザの種類
 if (window. ブラウザのバグを修正 
if(xmlhttp.overrideMimeType){ 
xmlhttp.overrideMimeType("text/html"); 
} 
} else if (window.ActiveXObject){ 
// IE6、IE5.5、IE5 の場合 
// XMLHttpRequest オブジェクトの作成に使用される 2 つのコントロール名。js 配列に格納されます。前のバージョンの方が新しいです
var activexName= ["MSXML2.XMLHTTP ","Microsoft.XMLHTTP"]; 
for(var i=0;i// コントロール名を取り出して作成します。成功した場合、ループを終了します 
/ /作成が失敗した場合は例外がスローされ、ループを続けて作成を試行し続けることができます 
try{ 
xmlhttp=new ActiveXObject(activexName[ i]); 
break; 
}catch(e) { 
} 
} 
} 
if(!xmlhttp){ 
alert("XMLHttpRequest オブジェクトの作成に失敗しました! ！ "); 
return; 
} 
//3. コールバック関数を登録します。コールバック関数を登録するときは、関数名のみが必要です。括弧は追加しないでください。
//登録する必要があります括弧を追加すると関数の戻り値が登録されますが、これは間違っています 
xmlhttp.onreadystatechange=callback3; 
//4. 接続情報を設定します 
xmlhttp.open(" GET","AJAXServer?name =" username,true); 
//5. データを送信し、サーバーとの対話を開始します 
xmlhttp.send(null);// ユーザー名は GET メソッドの URL にカプセル化されますしたがって、データをリクエストして送信するには、null 
//POST メソッドを 1 つ送信するだけで済みます