Web客户端编程

一、实验目的：

使用 HTML 超文本标记语言制作简单页面，要求通过实验能够掌握 HTML 文件的基本结构和文档的创建、编辑及保存。验证并掌握 HTML 超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。通过实验掌握层叠样式表 CSS 的创建及应用，掌握在网页中插入层叠样式表 CSS 的常用方法，掌握层叠样式表 CSS 的主要基本属性的使用。通过实验了解 JavaScript 的编程规范及基本语法，能够分析 JavaScript 程序的功能，可以在网页制作中使用 JavaScript 程序。通过实验了解 Ajax 的编程方法，掌握 Ajax 编程技巧。

二、实验环境：

MyEclipse10+Tomcat 7.0+Java EE 6.0

三、实验内容：

1）开发一个用户注册界面，要求：用户名基于 Ajax 检测是否重复，年龄需用 JavaScript 检查格式是否正确。

1.首先New Web Project

2.新建register.html文件，HTML代码如下：

<!DOCTYPE html>

<html>

  <head>

    <title>注册页面</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   <script type="text/javascript" src="js/ajax.js"></script>

    <script>

              function check() {

                     var username=document.getElementById("username");

                     var userpwd=document.getElementById("userpwd");

                     var reuserpwd=document.getElementById("reuserpwd");

                     var age=document.getElementById("age");

                     if(username.value=="")

                     {

                            alert("用户名不能为空，请输入用户名！");

                         username.focus();

                         return false;

                     }

                     if(userpwd.value=="")

                     {

                            alert("密码不能为空，请输入密码！");

                            userpwd.focus();

                            return false;

                     }

                     if(reuserpwd.value=="")

                     {

                            alert("确认密码不能为空，请确认密码！");

                            reuserpwd.focus();

                            return false;

                     }

                     if(userpwd.value!=reuserpwd.value)

                     {

                            alert("两次输入的密码不同，请重新输入！");

                            reuserpwd.focus();

                            return false;

                     }

                     if(age.value!="" && (age.value<=0 || age.value>100))

                     {

                            alert("年龄格式错误，请重新输入！");

                            age.focus();

                            return false;

                  }

              }

              function usernamecheck() {

                     var url="formcheck";

                  var params="userid="+document.getElementById("username").value+"&userpwd="+document.getElementById("userpwd").value;

                  sendRequest(url,params,'POST',showresult);

              }

              function showresult() {

                     if (httpRequest.readyState == 4)

                     {

                            if (httpRequest.status == 200)

                            {

                                   var info=httpRequest.responseText;

                                   document.getElementById("result").innerHTML=info;

                            }

                     }

              }

       </script>

  </head>



  <body>

    <p>用户名：<input type="text" name="username" id="username" placeholder="请输入用户名" onblur="usernamecheck()"></p>

    <p>密码：<input type="password" name="userpwd" id="userpwd" placeholder="请输入密码"></p>

    <p>确认密码：<input type="password" name="reuserpwd" id="reuserpwd" placeholder="请确认密码"></p>

    <p>年龄：<input type="text" name="age" id="age" placeholder="请输入年龄"></p>

    <input type="button" name="register" value="注册" onclick="check();usernamecheck()">

    <div id="result"></div>

  </body>

</html>

3.在WebRoot目录下新建文件夹，文件夹命名为js；在js文件夹下新建ajax.js文件，ajax.js文件代码如下：

var httpRequest=null;

function createXHR(){   

   if(window.XMLHttpRequest){ //Mozilla,Safari,Opera,IE7等

      httpRequest = new XMLHttpRequest();

   }else if(window.ActiveXObject){

      try{

        httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); //IE较新版本

      }catch(e){

        try {

           httpRequest = new ActiveXObject("Microsoft.XMLHTTP");//IE较老版本

        }catch(e){

           httpRequest = null;

        }

      }    

   } 

   if(!httpRequest){

      alert("fail to create httpRequest");    

   }

}



function sendRequest(url,params,method,handler){

  

   createXHR(); 

   if(!httpRequest) return false;  

   httpRequest.onreadystatechange = handler;

  

   if(method == "GET"){ 

       httpRequest.open(method,url+ '?' + params,true);

      httpRequest.send(null);

   }

   if(method == "POST"){

       httpRequest.open(method,url,true);

      httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

      httpRequest.send(params);

   } 

}

4.在src文件目录下新建Servlet,命名为FormCheck （或者新建FormChek.java文件），注意打包，包名为servlets。FormChek.java文件代码如下：

package servlets;

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;



public class FormCheck extends HttpServlet {

   public FormCheck() {

      super();

   }

   public void destroy() {

      super.destroy();

   }

   public void doGet(HttpServletRequest request, HttpServletResponse response)

        throws ServletException, IOException {

      doPost(request, response);

   }

   public void doPost(HttpServletRequest request, HttpServletResponse response)

        throws ServletException, IOException {

      response.setContentType("text/html;charset=UTF-8");

      PrintWriter out = response.getWriter();

      request.setCharacterEncoding("UTF-8");

      String userid=request.getParameter("userid");

      if("李四".equals(userid)){

        out.print("很抱歉，该用户名已存在！");

      }

      else{

        String userpwd=request.getParameter("userpwd");

        if(!"".equals(userpwd)){

           out.print("恭喜您，用户"+userid+"注册成功！");

        }

      }

   }

   public void init() throws ServletException {

      // Put your code here

   }

}

5.在MyEclipse10中部署并运行Tomcat服务器，在浏览器地址栏中输入http://localhost:8080/ch2/register.html 其中ch2为Web工程的名字。

Web客户端编程

全站热榜