初学ajax------ajax判定検証コードを使用

10492 ワード

1、ajaxって何?
asynchronous javascript and xml:非同期javascriptとxml.ブラウザに内蔵された特殊なオブジェクト(XMLHttpRequest)非同期を利用して、ユーザー体験を改善するための技術です.
(すなわち、要求を送信する場合、ブラウザは現在のページを破棄せず、ユーザは現在のページで他の操作を継続することができる)のサーバへの要求を送信し、サーバから返されたデータ(完全なページではなく、一部のデータであり、一般的にはテキストまたはxmlで返される)を利用して現在のページを部分的に更新する.ajaxテクノロジーを使用すると、ページはリフレッシュされず、ユーザーの操作を中断しません.
2、ajaxオブジェクト
(1)ajaxオブジェクトの入手方法XMLHttpRequestは標準化されていません.ブラウザを区別するには:

function getXhr(){
var xhr;
if(window.XMLHttpRequest){
// ie   
xhr = new XMLHttpRequest();
}else{
//ie
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
}

(2)ajaxオブジェクトのプロパティ
a,onreadystatechange:イベント処理関数(登録リスナー)をバインドし、ajaxオブジェクトのreadystatechange値が変更されると(たとえば0->1)、readystatechangeイベントが発生します.
b,responseText:サーバから返されるテキストを取得する
c,responseXML:サーバから返されるxmlデータを取得する
d,status:ステータスコードを取得
e,readyState:ajaxオブジェクトがサーバと通信する場合、
readyStateプロパティ値により、オブジェクトの通信状態を取得できます.プロパティは5つ(0,1,2,3,4)あり、プロパティ値が4の場合、ajaxオブジェクトがサーバから返されたすべてのデータを取得したことを示します.
(3)ajaxプログラミングの基本手順
Step 1,ajaxオブジェクトを先に取得する
var xhr = getXhr();
Step 2,送信要求
xhr.open(リクエスト方式、リクエストアドレス、非同期か同期か);
リクエスト方式:get/post
リクエストアドレス:getリクエストの場合、リクエストパラメータをリクエストアドレスの後ろに追加します.trueは、非同期リクエストを表します.ajaxオブジェクトがリクエストを送信すると同時に、ユーザーは現在のページに対して他の操作を行うことができます.falseは同期要求を表します:ajaxオブジェクトが要求を出すと同時に、ブラウザは現在のページをロックし、ユーザーは処理が完了してから次の操作を行う必要があります.
方法1:getリクエスト

xhr.open('get',
'check_username.do?username=zs',true);
xhr.onreadystatechange=f1;
xhr.send(null);

方式2:postリクエスト
xhr.open('post');
Step 3は、サーバ側のコードを記述し、サーバ側は一般的に完全なページを返す必要はなく、簡単な文字列などの一部のデータを返すだけです.
Step 4、リスナーの作成

function f1(){
if(xhr.readyState == 4){
//          
var txt = xhr.responseText;
//dom  
}
}

3,Ajaxにおけるsendメソッドの使用Ajaxにおけるsendメソッドパラメータの使用について重点的に説明する
一般的に、Ajaxを使用してコミットされるパラメータの多くは簡単な文字列であり、GETメソッドを直接使用してopenメソッドのurlパラメータにコミットするパラメータを書き込むことができ、sendメソッドのパラメータはnullである.例:

    var url = "login.jsp?user=XXX&pwd=XXX";
      xmlHttpRequest.open("GET",url,true);
      xmlHttpRequset.send(null);

さらに、sendメソッドを使用してパラメータを渡すこともできる.sendメソッドを使用してパラメータを渡すにはPOSTメソッドを使用し、Content-Typeヘッダ情報を設定し、HTTP POSTメソッドをシミュレートしてフォームを送信する必要があります.これにより、サーバはアップロードされたコンテンツをどのように処理するかを知ることができます.パラメータの提出形式はGETメソッドのurlの書き方と同じです.ヘッダ情報を設定する前にopenメソッドを呼び出す必要があります.
例:

   xmlHttpRequest.open("POST","login.jsp",true);
     xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
     xmlHttpRequest.send("user="+username+"&pwd="+password);

コミット方式によっては、バックグラウンドのdoGetメソッドとdoPostメソッドの2つのコミット方式がそれぞれ呼び出されることに注意してください.
4、以下は私が書いたユーザーの合法性を検証するajaxです.
Step 1,検証コードピクチャのservletを生成する

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

public class CheckcodeServlet extends HttpServlet {
   public void service(HttpServletRequest request,
		   HttpServletResponse response)throws ServletException,
		   IOException{
	   System.out.println("service...");
	   /*             jpg     
	    *      text/html text/xml
	    * */
	   response.setContentType("image/jpeg");
	   /*  */
	   //BufferedImage      
	   BufferedImage image=new BufferedImage(60,20,BufferedImage.TYPE_INT_RGB);
	   Random r=new Random();
	   //    
	   Graphics g=image.getGraphics();
	   //      
	   g.setColor(new Color(r.nextInt(255),r.nextInt(255),r.nextInt(255)));
	   //      
	   g.fillRect(0,0,60,20);
	   //      
	   g.setColor(new Color(0,0,0));
	   //  ，         
	   g.drawLine(r.nextInt(60), r.nextInt(20), 
			   r.nextInt(60), r.nextInt(20));
	   g.drawLine(r.nextInt(60), r.nextInt(20), 
			   r.nextInt(60), r.nextInt(20));
	   g.drawLine(r.nextInt(60), r.nextInt(20), 
			   r.nextInt(60), r.nextInt(20));
	   
	   //     
	   String number=String.valueOf(r.nextInt(99999));
	   //  ，        +    ，  Session         
	   HttpSession session=request.getSession();
	   session.setAttribute("number", number);	  
	   System.out.println(number);
	   //     
	   g.drawString(number, 5, 15);
	   /*       
	    *        ，                  ，     PrintWriter*/
	   
       OutputStream os=response.getOutputStream();
       //       
       JPEGImageEncoder encoder=JPEGCodec.createJPEGEncoder(os);
       encoder.encode(image);
   }
}

step 2、ActionServiceletを書く

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class ActionServlet extends HttpServlet {
    @SuppressWarnings("unused")
	public void service(HttpServletRequest request,HttpServletResponse 
    		response)throws ServletException,IOException{
    	String uri=request.getRequestURI();
    	String path=uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
    	response.setContentType("text/html;charset=utf-8");
    	//     ，    request.setCharacterEncoding("utf-8")   
    	request.setCharacterEncoding("utf-8");
    	PrintWriter out=response.getWriter();
    	if(path.equals("/check_username")){
    		if(1==2){
    			throw new ServletException("some error");
    		}
    		//      
    		try{
    			Thread.sleep(5000);
    		}catch(InterruptedException e){
    			e.printStackTrace();
    		}
    		String username=request.getParameter("username");
    		System.out.println("username:"+username);
    		if(username.equals(" ")){
    			out.println("      ");
    		}
    		else{
    			out.println("    ");
    		}
    	}
    	else if(path.equals("/check")){
    		String number1 = request.getParameter("number");
			// session       
			HttpSession session = request.getSession();
			String number2 = (String) session.getAttribute("number");
			//     
			System.out.println("number1:" + number1);
			System.out.println("number2:" + number2);
			//      cookie，session   number2 null
			if (number2 != null && number2.equals(number1)) {
				out.println("     ");
			}
			else{
				out.println("     ，     ");
			}
    	}
    	out.close();
    }
}

step 3、jspページを書きます:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
	function getXmlHttpRequest() {
		var xhr = null;
		if ((typeof XMLHttpRequest) != 'undefined') {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject('Microsoft.XMLHttp');
		}
		return xhr;
	}
	function check_username() {
		//step1   XmlHttpRequest  
		var xhr = getXmlHttpRequest();
		//step2     
		xhr.open('get', 'check_username.do?username=' + $F('username'), true);
		xhr.onreadystatechange = function() {
			//step4          ，    
			if (xhr.readyState == 4) {
				var txt = xhr.responseText;
				$('username_msg').innerHTML = txt;
			} else {
				$('username_msg').innerHTML = '    。。。';
			}
		};
		xhr.send(null);
	}
	function check_username2() {
		//  XmlHttpRequest  
		var xhr = getXmlHttpRequest();
		//    
		var uri = 'check_username.do?username=' + $F('username');
		xhr.open('get', encodeURI(uri), true);
		//xhr.open('post', 'check_username.do', true);
		xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xhr.onreadystatechange = function() {
			//          ，    
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					var txt = xhr.responseText;
					$('username_msg').innerHTML = txt;
				} else {
					$('username_msg').innerHTML = '    ';
				}
			} else {
				$('username_msg').innerHTML = '    。。。';
			}
		};
		xhr.send('username=' + $F('username'));
	}
	function check_number(){
	   //  XmlHttpRequest  
		var xhr = getXmlHttpRequest();
		//    
		var uri = 'check.do?number=' + $F('number');
		xhr.open('get', encodeURI(uri), true);
		//xhr.open('post', 'check_username.do', true);
		xhr.setRequestHeader("Content-Type",
				"application/x-www-form-urlencoded");
		xhr.onreadystatechange = function() {
			//          ，    
			if (xhr.readyState == 4) {
				if (xhr.status == 200) {
					var txt = xhr.responseText;
					$('number_msg').innerHTML = txt;
				} else {
					$('number_msg').innerHTML = '    ';
				}
			} else {
				$('number_msg').innerHTML = '    。。。';
			}
		};
		xhr.send('number=' + $F('number'));
		}
</script>
</head>
<body>
	<form action="check.do" method="post">
		<fieldset>
			<legend>  </legend>
			   :<input id="username" name="username" onblur="check_username2();" />
			<span style="color:red;" id="username_msg"></span> <br />   :<input
				type="password" name="pwd" /><br />    :<input name="number"
				id="number" onblur="check_number();" /> <span style="color:red;"
				id="number_msg"></span> <br /> <img src="checkcode" id="img1" /> <a
				href="javascript:;"
				onclick="$('img1').src='checkcode?' + Math.random();">   ，   </a><br />
			<input type="submit" value="  " />
		</fieldset>
	</form>
</body>
</html>

Step 4,web.xml構成

awk学習ノート(8)-簡単な正則マッチング

バイナリログフィルタ