Ajaxとその下位実装とは

1、Ajaxって何?
総じて、Ajaxは「Asynchronous Javascript And XML」(非同期JavaScriptとXML)であり、インタラクティブなWebアプリケーションを作成するWeb開発技術であり、現在のページ内で異なるリクエスト内容に応答するための非同期リフレッシュ技術である.(Ajaxは新しい技術ではなく、いくつかの従来技術の結合体である(css、html、js、xmlHttpRequest...).
専門用語:

 - Ajax =    JavaScript   XML。
 - Ajax                 。
 -                  ，Ajax            。                    ，           

2、なぜAjaxが必要なのか
需要:今回の応答構造と前の応答結果の内容を同じページでユーザーに示す必要がある場合があります.
解決:1、元:バックグラウンドサーバ側で複数回応答したコンテンツをjspページに再結合し、応答するが、これにより多くの応答コンテンツが重複応答され、リソースが浪費される.2、Ajax技術を使用して、ローカルコンテンツへの応答(非同期リフレッシュ技術)を実現する.
3、Ajax下層実現
1、Ajaxアクセス原理Ajaxの原理簡単に言えばXmlHttpRequestオブジェクトによってサーバに非同期要求を行い、サーバからデータを取得し、javascriptでDOMを操作してページを更新する.
2、Ajaxの基本使用フロー(以下の下位コードに詳細がある)

Ajaxエンジンオブジェクト(XmlHttpRequest、ActiveObject)

を作成する

複写onreadystatement関数(状態コード、応答状態コードの使用、動作Domオブジェクト)

送信要求(get/post,パラメータ伝達)

3、Ajaxの状態コード(readyState)と応答状態コード(status)Ajaxの状態コード:Ajaxを実行して経験したいくつかの状態は、アクセスが成功するかどうかにかかわらず応答するステップであり、Ajaxの実行ステップと理解できる.例えば、送信中、応答中等、Ajaxオブジェクトがサーバと対話するときに得られるajax.readyState:0,1,2,3,4 0-(初期化されていない)send()1-(ロード)send()メソッドが呼び出されていません.リクエストを送信中です.2-(ロード完了)send()メソッド実行完了3-(インタラクティブ)応答内容を解析中です.4-(完了)応答内容の解析が完了します.クライアントで上記の状態について呼び出すことができます.ここで、「0」状態は定義後に自動的に持つ状態コード値であり、アクセスが成功した状態(情報が得られる)については「4」で判断することが多い.これが,Ajaxを用いた場合に,得られた情報が正しいか否かを次のように判断する理由である.　　 if(ajax.readyState == 4 && ajax.status == 200) { console.log('sucess');}
Ajax応答ステータスコード:Ajaxアクセスが成功するかどうかにかかわらず、httpプロトコルによってコミットされた情報に基づいて、サーバが返すhttpヘッダ情報コード.この情報は「ajax.status」を使用して得られる(一般的には200成功、404ページが見つからない)総じて言えば、status体はサーバの要求に対するフィードバックである.readystateは、クライアントとクライアントのインタラクティブなステータスプロセスを示します.4、Ajaxの非同期と同期同期とは、jsコードが現在のAjaxにロードされたときにページ内のすべてのコードがロードを停止し、ページに仮死状態(Ajaxの実行を待つ)が発生し、このAjaxが実行された後に他のコードページの仮死状態解除を実行し続けることを意味する.非同期の場合、このAjaxコードが実行中の場合、他のコードと同様に実行できます.jqueryのasync:false/true、このプロパティのデフォルトはtrue:非同期です.false:同期.一般的にはデフォルトの非同期が使用されます.
5、Ajaxの要求get:getは最も一般的な要求タイプであり、urlが要求リソースを完全に指定し、要求がサーバに副作用がなく、サーバの応答がキャッシュ可能である場合に適用される情報をサーバに照会するのに最もよく使われる.get方式でリクエストを送信する場合、open()方式におけるurlの末尾ajax.open(type,url,async) type:リクエスト方式、url:リクエストアドレス、async:非同期/同期ajax.open("get","AjaxServlet?username=zhangsan&password=333") post:getに次ぐ使用頻度のpostリクエストにデータが追加され、通常はサーバが保存すべきデータを送信するために使用される.“post「メソッドはhtmlフォームでよく使用されます.リクエスト・ボディに追加のデータが含まれ、これらのデータはサーバ上のデータベースに格納されます.同じurlの重複postリクエストがサーバから得た応答は異なる場合があります.また、このメソッドを使用したリクエストpostをキャッシュするべきではありません.データをリクエストのボディとしてコミットすべきで、GETリクエストは従来はそうではありません.post求めた主体は非常に多くのデータを含むことができ、フォーマットは限定されない.Open()メソッドの最初のパラメータの位置でpostを入力すると、postリクエストajax.open("post","AjaxServlet");を初期化できます.postの方法でデータを送信するにはリクエストヘッダを設定する必要があります.多くの人が最下位のAjaxを書くと、この行のコードajax.setRequestHeader("content-type","application/x-www-form-urlencoded");が漏れてしまいます.次に、適切なフォーマットで文字列を作成し、send()を使用します.方法ajax.send("username=zhangsan&password=333"); 6、Ajaxの下位実装コードを送信する
テストページajax.jsp:

ajax   get  
ajax   post  

　AjaxServlet:

package com.demo.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 *   ：ajax    
 *   ：2018-12-9
 * @author
 *
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//      
		request.setCharacterEncoding("utf-8");
		//        
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//      
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		//      
		//      
		response.getWriter().write("username:"+username+",password:"+password);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

　ajax.js:

$(function() {
	//get    
	$('#ajaxGet').on("click",function() {
		console.log('get');
		//  ajax    
		var ajax;
		if (window.XMLHttpRequest) {
			ajax = new XMLHttpRequest();
		} else {//ie    
			ajax = new ActiveObject("Msxm12.XMLHTTP");
		}
		//  onreadyStatement    ajax                  onreadystatechange 
		ajax.onreadystatechange = function() {
			//  ajax   
			if (ajax.readyState == 4) {
				//  ajax   
				if (ajax.status == 200) {
					//      （       ）
					var result = ajax.responseText;
					//      、      （js  dom）
					console.log(result);
					$('#span').text(result);
				}
			}
		}
		//  get  
		ajax.open("get","AjaxServlet?username=zhangsan&password=333");
		ajax.send(null);
	});
	//post     
	$('#ajaxPost').on("click",function() {
		console.log('post');
		//  ajax    
		var ajax;
		if (window.XMLHttpRequest) {
			ajax = new XMLHttpRequest();
		} else {//ie    
			ajax = new ActiveObject("Msxm12.XMLHTTP");
		}
		//  onreadyStatement  
		ajax.onreadystatechange = function() {
			//  ajax   
			if (ajax.readyState == 4) {
				//  ajax   
				if (ajax.status == 200) {
					//      （      ）
					var result = ajax.responseText;
					//      、      （js  dom）
					console.log(result);
					$('#span').text(result);
				}
			}
		}
		//  post  
		ajax.open("post","AjaxServlet");
		//     
		ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
		//    
		ajax.send("username=zhangsan&password=333");
	});
})

4、 のAjaxをカプセル する
テストページmyAjax.jsp:

ajax   get  
ajax   post  

パッケージされたmyAjax.js:

/**
 * method:    ，  get/post
 * url:    
 * data:    ，       null,          ，   "a=1&b=2"
 * deal200:           js    ，        ajax    
 * deal404:           js    (    500  )
 * 
 */
function myAjax(method, url, data, deal200, deal404, async) {
	console.log("  success");
	//  ajax    
	var ajax = getAjax();
	//  onreadyStatement  
	ajax.onreadystatechange = function() {
		//  ajax   
		if (ajax.readyState == 4) {
			//  ajax   
			if (ajax.status == 200) {
				if (deal200) {
					deal200(ajax);
				}
			} else if (ajax.status == 404) {
				if (deal404) {
					deal404(ajax);
				}
			}
		}
	}
	//    
	if("get" == method) {
		ajax.open("get",url+(data == null ? "" : "?")+data,async);
		ajax.send(null);
	} else if ("post" == method) {
		//    
		ajax.open("post",url,async);
		//     
		ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
		//    
		ajax.send(data);
	}
};

//  ajax      
function getAjax() {
	var ajax;
	if (window.XMLHttpRequest) {
		ajax = new XMLHttpRequest();
	} else {//ie    
		ajax = new ActiveObject("Msxm12.XMLHTTP");
	}
	return ajax;
};

js myAjaxをテストします.js:

$(function() {
	//get    
	$('#ajaxGet').on("click",function() {
		//      (        ，          )
		var data = "username=zhangsan&password=333";
		myAjax("get","AjaxServlet",data,function(ajax) {
			//      
			var result = ajax.responseText;
			//      
			$('#span').text(result);
		});
	});
	//post    
	$('#ajaxPost').on("click",function() {
		//      (        ，          )
		var data = "username=zhangsan&password=333";
		myAjax("post","AjaxServlet",data,function(ajax){
			//      
			var result = ajax.responseText;
			//      
			$('#span').text(result);
		});
	});
})

Jqueryでカプセル されたjsを する は、$(function(){})ドキュメントをロードしないでください. のjsファイルで するメソッドを び すと、$(function(){})が され、カプセル されたjsが きされるので、 してください.
: の 、 を します!これからもっと に つ を ってきます、come on boy!