Ajax+Ajax下位原理+オリジナルJavaScriptまたはJQueryを使用してAjaxリクエストを送信する方法

1、Ajaxって何?
Ajax(Asynchronous JavaScript and XML)は新しい技術ではなく、JavaScript、XML、CSSなどいくつかの既存技術が統合されています.クライアントとサーバの間で非同期でデータを転送し、ローカル・リフレッシュ・テクノロジーでもあります.
2、オリジナルJavaScript実現Ajax要求
1、XMLHttpRequestオブジェクトを認識する
メソッド名
説明
open(String method,String url,boolean async,String user,String password)
新しいHTTPリクエストパラメータmethodを作成するには、HTTPのリクエストメソッドを設定し、大文字と小文字に敏感ではないurl:リクエストのURLアドレスasync:オプション、リクエストが非同期メソッドであるかどうかを指定し、デフォルトはtrueuser:オプション、サーバが検証する必要がある場合は、ここでユーザー名を指定する必要があります.それ以外の場合、検証ウィンドウpasswordがポップアップされます:オプション、検証情報のパスワード、ユーザー名が空の場合、ここでは無視されます.
send(String data)
サーバ側パラメータdataへの送信要求:この要求によって送信されたデータを表す文字列タイプ.このパラメータはopenメソッドのmethodパラメータに依存します.methodパラメータが「POST」の場合、このパラメータを指定できます.「GET」の場合、このパラメータはnullです.
abort()
現在のリクエストのキャンセル
setRequestHander(String hander,String value)
要求されたHTTPヘッダ情報パラメータhanderを個別に設定する:指定するヘッダ名value:指定するヘッダ名の値
getResponseHander(String hander)
応答から指定したHTTPヘッダ情報パラメータhanderを取得する:取得する指定したHTTPヘッダ
getAllResponseHander()
応答のすべてのHTTPヘッダ情報の取得
属性名
説明
onreadystatechange
コールバック関数の設定
readyState
要求の現在の状態を返し、共通値:0:初期化なし1:送信要求開始2:要求送信完了3:読み出し応答開始4:読み出し応答終了
status
現在要求されているHTTPステータスコードを返します.共通値:200:正しく404を返します.アクセスオブジェクトが見つかりません.
statusText
現在のリクエストのレスポンス・ラインのステータスを返します.
responseText
テキスト形式でのレスポンス値の取得
responseXML
応答値をXML形式で取得し、DOMオブジェクトが返すように解析する
2、Ajax GET要求を送信し、応答を処理する
たとえば、テキストボックスonBlurイベントインプリメンテーションを使用して、テキストボックスがフォーカスを失ったときにAjax非同期要求を送信し、インプリメンテーションステップ1がユーザー名に存在するかどうかを確認し、XMLHttpRequestオブジェクトを作成します.Windowsを通ることができます.XMLHttpRequestの戻り値は、XMLHttpRequestオブジェクトの作成方法(つまりブラウザの互換性の問題を解決する)2を判断し、コールバック関数を設定します.コールバック関数は3を自分で定義し、XMLHttpRequestオブジェクトを初期化する必要があります.Open()メソッドによるリクエストパスの設定とリクエスト方式4、リクエストの送信

//  XMLHttpRequest  
if(window.XMLHttpRequest){
	xmlHttpRequest = new XMLHttpRequest();
}else{
	xmlHttpRequest = new ActiveXObjec("Microsoft.XMLHTTP");
}

//      
xmlHttpRequest.onreadystatechange=callBack;

//   XMLHttpRequest  。  open()             
var url = "userServlet?name="+name;//    URL  。name        
xmlHttpRequest.open("GET",url,true);

//    
xmlHttpRequest.send(null);//  send()        ，                
function callBack(){
	if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
		var data = xmlHttpRequest.responseText;
		if(data=="true"){
			$("#nameDiv").html("       ！");
		}else{
			$("nameDiv").html("       ！")；
		}
	}
}

チェック機能を実行するservletコードは次のとおりです.

public class UserServlet extends HttpServlet{
	public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		String name = request.getParameter("name");
		boolean used = false;
		if("ajax".equals(name)){
			used=true;
		}else{
			used=false;
		}
		response.setContentType("text/html","utf-8");
		PrintWriter out = response.getWriter();
		out.print(used);
		out.flush();
		out.close();
	}
	public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		request.setCharacterEncoding("utf-8");
		this.doGet(request,response);
	}
}

3.POST Ajax要求を送信し、応答を処理する

//  XMLHttpRequest  
if(window.XMLHttpRequest){
	xmlHttpRequest = new XMLHttpRequest();
}else{
	xmlHttpRequest = new ActiveXObjec("Microsoft.XMLHTTP");
}

//      
xmlHttpRequest.onreadystatechange=callBack;

//   XMLHttpRequest  。  open()             
var url = "userServlet";//    URL  
xmlHttpRequest.open("POST",url,true);
xmlHttpRequest.setRequestHander("Content-type","application/x-www-form-urlencoded");//       

//    
var data = "name"+name;//       &  
xmlHttpRequest.send(data);//  send()        ，                
function callBack(){
	if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
		var data = xmlHttpRequest.responseText;
		if(data=="true"){
			$("#nameDiv").html("       ！");
		}else{
			$("nameDiv").html("       ！");
		}
	}
}

3、jQueryを使用してAjax要求を送信する
パラメータ
を選択します.
説明
url
String
送信要求のアドレス
type
String
データ要求の方式、postあるいはget、デフォルトはgetで、1.9.0バージョンの後でmethodを使ってtypeの代わりに使用することができます
data
PlainObjectまたはStringまたはArray
サーバに送信されたデータは、文字列でなければ自動的に文字列フォーマットに変換され、getリクエスト方式であればurlの後ろに添付されます.
dataType
String
サーバが返すデータ型は,指定されていなければ,jqueryはHTTPパケットのMIMEの情報に基づいて自動的に判断する.サーバが返すデータは自動的に判断した結果に基づいて解析され,コールバック関数に渡される.html:テキストを返すHTML情報であり,含まれるScriptタグはページ挿入時に実行される.script:純テキストを返すjavaScriptコードtext:純テキスト文字列xmlを返す:jQueryで処理可能なxmlドキュメントjsonを返す:json形式のデータを発揮する
beforeSend
Function(jqXHR jqxhr,PlainObject settings)
要求を送信する前に呼び出される関数.要求ヘッダを設定し、falseに戻ると要求パラメータjqxhr:オプション、jqXHRはXMLHttpRequestのスーパーセットパラメータsettings:オプション、現在のajax()メソッドのsettingsオブジェクト
success
Function(任意のオブジェクトresult,String textStatus,jqXHR jqxhr)
要求が成功した後に呼び出されるコールバック関数result:オプション、サーバから返されるデータtextStatusを表す:オプション、要求状態を記述する文字列jqxhrを表す:オプション
error
Function(jqXHR jqxhr, String textStatus, String errorThrown)
要求に失敗して呼び出されたコールバック関数jqxhr:オプションtextStatus:オプション、記述エラー情報errorThrown:オプション、テキストで記述されたHTTP状態を表す
complete
Function(jqXHR jqxhr,String textStatus)
要求完了後に呼び出されるコールバック関数jqxhr:オプションtextStatus:オプション、要求状態を記述する文字列
timeout
Number
要求タイムアウト時間
global
Boolean
グローバルイベントに応答するかどうか、デフォルトはtrue
async
Boolean
非同期リクエストかどうか、デフォルトはtrue
cache
Boolean
ページキャッシュを行うかどうか、デフォルトはtrue

$.ajax({
	"url" : "userServlet",
	"type":"GET",
	"data":"name"+name,
	"dataType":"text",
	"success":callBack,
	"error":function(){
		alert("       ！！！");
	}
});

//          
function callBack(data){  //    data      
	if(data == "true"){
		$("#nameDiv").html("       ！");
	}else{
		$("nameDiv").html("       ！");
	}
}

#{}と${}の違い