JAVA WEB Ajax技术作业

桂林作者：工大学

实验作者：告

班级软件16-1 班学号3162052051116 姓名张识虔同组实验者

名称实验日期2018 年10 月20 日

一，实验目的：

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

二，实验环境：

三，实验内容：

form.html 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>表单验证</title>	
   <link rel="stylesheet" type="text/css" href="./CSS/denglu.css">
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="js/ajax.js"></script>
   <script type="text/javascript">
      function formcheck(){        
		var url="formcheck";
		var userid=document.getElementById("userid").value;
		var userpwd=document.getElementById("userpwd").value;
		var params="userid="+userid+"&userpwd="+userpwd;
		sendRequest(url,params,'POST',showresult);	
    }
    function showresult(){
        if (httpRequest.readyState == 4) { 
			if (httpRequest.status == 200) {
				var info=httpRequest.responseText;
				document.getElementById("result").innerHTML=info;
			}
		}
}

function checkage(){
				var uage = document.getElementById("age").value;
				
				var span = document.getElementById("span_age");
				if(!(uage>0&&uage<100)){
					span.innerHTML = "<font color='red' size='2'>请输入0~100的数字</font>";
					return false;
				}
				else{
				   span.innerHTML = "<font color='red' size='2'>恭喜您,年龄可用！</font>";
					return true;
				}
			}
</script>
  </head>
  <body>
	<div class="middle">
		<div class="shuru">
		<div class="title">
			<span class="left"><a href="Form.html">账号登陆</a></span>
			</div>
		<div class="i">
		<div class="ID">
			<input type="text" name="userid" id="userid" placeholder="用户名" onblur="formcheck()"/>
			</div>
			<div id="result"></div>
		<div class="pw">
			<input type="password" name="userpwd" id="userpwd" placeholder="密码">
			</div>
				<div class="nianling">
			<input type="text" name="age" id="age" placeholder="年龄" style="margin-top: 26px;" onblur="checkage()" ><p id="span_age"></p>
			</div>
		</div>
		<div class="jimi">
			<p><input type="checkbox">记住登录状态</p>
			</div>
		<div class="denglubobutton">
			<span onclick="formcheck()">登录</span>
			</div>
		<div class="zhuce">
			<a href="" class="left">注册</a>
			<a href="" class="right">忘记密码?</a>
			</div>	
		</div>
	</div>
</body>
</html>

<!--<SCRIPT Language=VBScript>

</SCRIPT>//-->

denglu.css

@charset "utf-8";
/* CSS Document */

.top{
	width:100%;
	height: 100px;
	background: #fff;
	
}
.top a{
	font-family: "Microsoft Yahei",Arial,Helvetica,sans-serif;
	font-style: italic;
	text-decoration: none;
    padding-top:30px;
	margin-left: 130px;
	font-size: 30px;
	color: #00B6FF;
	display: block;
}
.middle{
	background-image: url(../IMG/timg.jpg);
	width: 1520px;
	height: 800px;
	position:relative;
}
.middle .shuru{
	padding: 35px;
	width: 335px;
	height: 490px;
	background-color: #fff;
	position: absolute;
	margin-top: 100px;
	margin-left: 750px;
}
.middle .shuru .title{
	width: 300px;
	height: 23px;
	margin-top: 35px;
	text-align: center;
	font-size: 18px;
	margin-bottom: 60px;
	color: #7f7f7f;
}
.middle .shuru .title .left{
	margin:0 auto;
	cursor: pointer;
}

.middle .shuru .title a{
	text-decoration: none;
	color: #7f7f7f;
}
.middle .shuru .title .right a:hover{
	color: #000000;
}
.middle .shuru .title .left a:hover{
	color: #000000;
}
.middle .shuru .title .left a:visited{
	color:#00B6FF;
}
.middle .shuru .title .right a:visited{
	color: #00B6FF;
}
.i input{
	width: 276px;
	height: 46px;
	border: 1px solid #dadada;
	padding: 0px 10px;
	line-height: 22px;
	font-size: 14px;
	color: #474747;
}
.yanzheng{
	width: 299px;
	height: 40px;
	background-color:  antiquewhite;
	margin-bottom: 26px;
}
.jimi p {
	color: #7f7f7f;
	cursor: pointer;
}
.denglubobutton{
	width: 300px;
	height: 46px;
	margin-top: 26px;
	margin-bottom: 30px;
	background: #32a5e7;
	cursor: pointer;
	border-radius: 2px;
	position: relative;
}
.denglubobutton span{
	padding-top: 16px;
	padding-left: 135px;
	color: #fff;
	font-size: 14px;
	position: absolute;
}
.zhuce{
	width: 300px;
	height: 19px;
}
.zhuce a{
	color: #32A5E7;
	text-decoration: none;
}
.zhuce .left {
	float: left;
}
.zhuce .right{
	float: right;
}
#result{
	width: 300;
	height: 26px;
	font-size: 16px;
	color: #FF0004;
}

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); 
	}	
}

fromcheck.java

package servlers;

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 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)){
				if("3162052051116".equals(userpwd))
					out.print("欢迎您");
				else 
					out.print("密码错误");
			}
			
		}
		String userpwd=request.getParameter("userpwd");
		if(("张识虔".equals(userid))&&("3162052051116".equals(userpwd))){
			  out.print(" 登陆成功");
		}
	}
}

实验截图

四、心得体会：

Ajax的技术 这个作业不好弄啊 就算拿了 书上的例题 敲一遍 还是有很多问题 js技术不怎么熟练 知识比较少 但是对于html的编程 还是可以的 这个html是我以前做的练习 稍微修改一点就拿来当作业的表面工程了 对于js ajax的骨干技术 还得需要加强

JAVA WEB Ajax技术作业

猜你喜欢