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的骨干技术 还得需要加强