AJAXを使用した最も簡単なユーザー名検証

5313 ワード

JavaScript html jquery Ajax servlet

AJAXさん、最近本当に怒っています.ちょっと勉強しました.
本当にいいものですね.そこで簡単なユーザー検証機能を作り、ajaxの強力な機能を体験しました!
全体的に3つのステップに分かれています
一、servletを設計し、ユーザー名を検証し、データベースに存在するかどうかを検証し、ここでデータベースを使用していないことを検証し、コードを貼り付ける.



package com.hejianjiao.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;

/**
 * Created by IntelliJ IDEA.
 * User: Administrator
 * Date: 2008-9-19
 * Time: 11:23:37
 * To change this template use File | Settings | File Templates.
 */

public class AJAXServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
               try {
            response.setContentType("text/html;charset=gb2312");
            PrintWriter out = response.getWriter();
            //   
            String older = request.getParameter("name");
            //       
            if (older == null || older.length() == 0) {
                out.print("       !");
            } else {
                //    
                String name = new String(older.getBytes("ISO8859-1"));
                if ("anysky".equals(name)) {
                    //  ，        
                    out.println("   :" + name + "     !         !");
                } else {
                    out.println("   :" + name + "     !     !");
                }
            }
        } catch (IOException e) {
            e.printStackTrace();  //To change body of catch statement use File | Settings | File Templates.
        }

    }
}

このservletは普通のservletと同じで、一つだけ違います.普通のservletです.データを検証した後、直接ページのジャンプを行って、結果をクライアントに返します.ここではジャンプをしないで何も処理していません.結果を印刷しただけです.印刷したデータはここに置いておきます.すぐにどこに伝わるか見えます!
二、servletが設計されたら、ページになるはずです.ページは2つの部分に分けて処理します.
1、jspページ自体


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

    <title>ajax    </title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" language="java" src="js/verify.js">

    </script>
</head>
<body>
<center>
    <h1>AJAX    </h1>
</center>
<!--ajax         ，         -->
<input id="name" type="text"/><!--ajax   name   ，     id  ，   button-->
<input type="button" value="  " onclick="verify()"/> <br/>
<!--result             ，    ，id         dom         ，    -->
<div id="result"></div>
</body>
</html>

formフォームのコミットがありません.クライアントで処理する必要があるからです.さらにtextフォームではnameプロパティではなくidプロパティを使用しています.javascriptが受信して転送するのはidプロパティを使用しているからです.
2、jsファイル
ajaxの最も重要なところはjavascriptを使うことです.ここでは、JQueryというツールを使いました.このツールは多くの方法をカプセル化して、ajaxを使うのがとても簡単になりました.ここでは、ページに入力されたデータをservletから返されたデータと処理して、サーバとクライアントの正常なインタラクションを達成するために、jsファイルを自分で書く必要があります.


//         
function verify() {
    //1、        
               //     ：document.getElementById("name") ;
              //     ：JQuery       ，   #  id  ，        。
           //JQuery     jquery  ，         jquery   
    var jqueryobj = $("#name")
    //      
    var name = jqueryobj.val() ;

    //2、           servlet
    //  jquery  get  ，          
    $.get("AJAXServlet?name=" + name, null, callback);

    //    
    function callback(data) {
        //3、       ,     data           
        //4、                  
             //4.1           
        var resultObj = $("#result") ;
            //4.2  data     ,  jquery  html  
        resultObj.html(data);
    }

}

ファイルのステップは、jqueryを使用してデータを受信して返すプロセスです.
JQueryツールのメソッドでは、ajaxを非常に簡単にすることができるAPIをダウンロードして使用することができます.
jsファイルの場合、簡単な書き方は次のように変更できます.


function verify(){
    $.get("AJAXServlet?name="+$("#name").val(),null,function(data){
         $("#result").html(data) ;
    })  ;
}

次のようになります.
1,$("#name").val()は,受信ページからの値である.
2、$.get(url,params,callback)は、servletとインタラクティブであり、urlはサーバアドレスであり、paramsは転送するデータであり、集合{name,password}形式であり、callbackはコールバック関数であり、servletから返されたデータを具体的に受信し、ページに戻る
3,$("#result").html(data)は、戻るdataをページresultに送り、表示する.

Educational Codeforces Round 53

クールドッグ音楽APIデータインタフェース--分析