Javaweb方向第二次培训

最新推荐文章于 2022-05-26 19:43:42 发布

原创最新推荐文章于 2022-05-26 19:43:42 发布 · 403 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何使用HTML和CSS构建登录界面，并利用Aajx技术实现实时的前后台数据交互，详细解释了Aajx的工作原理及其实现步骤。

本次培训将为大家介绍如何用实现 html+css实现登陆页面，通过 ajax进行前端和后台的数据传输以及后台通过 servlet接收数据。

html+css实现登录界面

html添加页面元素

在同一目录下建立css文件夹、js文件夹等和html文件，方便后面在页面中引入css和js文件。文件结构示例如下：
在body 元素定义文档的主体。其包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

body元素中代码如下：

<body>
    <h1>简单登录页面</h1>
     	<div class="main-content">
			<div class="agile-tb">
					<form action="#" method="post">				
						<input placeholder="姓名" name="name" type="text" id="name">
						<input placeholder="邮箱地址"name="email" type="text" id="email">					
						<input placeholder="密码" name="password" type="password" id="password">	
						<input placeholder="确认密码" name="password" type="password" id="newpassword">
						<input type="submit" value="注册" "check()">
					</form>
			</div>	
	    </div>	        					            	     
</body>

css设置页面样式

在css文件夹下创建.css文件，CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
属性与属性值
①元素的不同属性，有其对应的值。
选择器：
①类（class）选择器以标志符（句点）开头，用于指示后面是哪种类型的选择器。
②类型选择器，可以向这种元素类型的每个实例上应用声明。
③ID选择器：ID属性的操作类似于CLASS属性，ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。需要注意的是，ID选择器的标志符是#。标志符用来提醒浏览器接下来出现的是ID值。
④组合选择器类型：可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。
简单盒子模型应用定位元素
①定义：CSS css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素，如下图所示。通过设置margin和padding属性值可确定元素在页面的位置。

css代码如下：

body{
	background:url('../images/banner.jpg') no-repeat -83px 0px;
	text-align: center;
	background-attachment: fixed;
    background-position: center;
    background-size: cover;
	font-family: ;
	background-size:cover;
}

.main-content {
    width: 32%;
    margin: 60px auto;
}

h1 {
    padding-top: 60px;
    color: white;
    font-size: 50px;
    font-family: 'Ropa Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.agile-tb {
    border: 2px solid rgba(255, 255, 255, 0.21);
    padding: 40px 40px;
}

input[type="text"], input[type="password"] {
    width: 92%;
    padding: 15px;
    border: none;
    margin-bottom: 20px;
    font-size: 14px;
    outline: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

input[type="submit"] {
    color: #fff;
    background: #ce224d;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    outline: none;
    margin: 30px auto 0 auto;
	display:block;
	cursor:pointer;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}
input[type="submit"]:hover{
    background: #0068fe;
}

input::-webkit-input-placeholder {
            color: white;
            opacity: 1;
        }

通过Ajax的前后台数据传输

Aajx概念介绍

1.全称：Asynchronous JavaScript and XML（异步的JavaScript和XML）
2.AJAX不是某种编程语言，而是一种在无需加载整个网页的情况之下能够更新部分网页的技术。
3.传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

Web中的同步异步概念介绍

同步请求：
顺序处理，即当我们向服务器发出一个请求时，在服务器没返回结果给客户端之前，我们要一直处于等待状态直至服务器将结果返回到客户端，我们才能执行下一步操作。例如普通的B/S模式就是同步请求（注：Brower/Server模式也即服务器与浏览器通信主要采用HTTP协议,通信方式为“请求—响应”，浏览器发出请求,服务器做出响应。）
异步请求：
并行处理，当我们向服务器发出一个请求时，在服务器没返回结果之前，我们还是可以执行其他操作。例如AJAX技术就是异步请求 .

Ajax XMLHttpRequest对象

XMLHttpRequest 是 AJAX 的基础。所有现代浏览器均支持XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）；
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新；
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象；
创建XMLHTTPRequest对象语法：variable=new XMLHttpRequest();

AJAX的核心是XMLHttpRequest对象，而JQuery也对Ajax异步操作进行了封装，这里看一下几种常用的方式

Ajax()方法

  ajax() 方法通过 HTTP 请求加载远程数据，该方法是 jQuery   底层 AJAX 实现；使用ajax()方法是
  最底层、功能最强大的请求服务器数据的方法，它不仅可以获取服务器返回的数据，还能向服务器发送请
  求并传递数值，它的调用格式如下：$.ajax([settings])或jQuery.ajax([settings]}其中参数
  settings为发送ajax请求时的配置对象，下面来详细介绍这些参数：

参数——async

类型：Boolean
默认值: true
默认设置下，所有请求均为异步请求，客户机将不等待服务器的响应,你的访客可以继续在页面进行操作，而要求的信息也可以在更新页面的同时得到处理。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

url

类型：String
默认值: 当前页地址,发送请求的地址。

参数——data

类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。如果为数组，jQuery 将自动为不同值对应同一个名称。如：{name:[“bar1”, “bar2”]} 转换为 ‘&name=bar1&name=bar2’。

参数——dataType

可用值:
"xml": 返回 XML 文档，可用 jQuery 处理;
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行;
"script": 返回纯文本 JavaScript 代码;
"json": 返回 JSON 数据 ;
"jsonp": JSONP 格式;
"text": 返回纯文本字符串;

参数—— success

类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。

参数——error

类型：Function
默认值: 自动判断 (xml 或 html),请求失败时调用此函数
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象,如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”;
这是一个 Ajax 事件。

Get和Post的区别

使用Get请求时,参数在URL中显示,而使用Post请求,则不会显示出来；
Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约 1024字节;
Get请求请求需注意缓存问题,Post请求不需担心这个问题；
发送请求时,因为Get请求的参数都在url里,所以发送的参数为null,而Post请求在使用send（）方法的时候却需赋予其参数；
GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。

AJAX代码样例

function AjaxSubmit1() {
    $.ajax({
        url:'/postusername',//发送请求的servlet的地址
        type:'post',//请求方式，有post和get两种
        data:{
            userName:document.getElementById("username").value
        },//传送的数据
        dataType:'text',//返回的数据类型
        success : function (arg) {
            console.log(arg)
        }//请求成功后的回调函数
    })
}
function AjaxSubmit2() {
    $.ajax({
        url:'/postusername',
        type:'get',
        data:null,
        async:false,
        dataType:'json',
        success : function (arg) {
           console.log(arg)
           //alert(arg.name)
           document.getElementById('name').innerHTML=arg.name;
       }
   })
}

Servlet后台接收数据

Servlet运行过程

Servlet程序是由WEB服务器调用，web服务器收到客户端的Servlet访问请求后：

Web服务器首先检查是否已经装载并创建了该Servlet的实例对象。如果是，则直接执行第4步，否则，执行第2步。
装载并创建该Servlet的一个实例对象.
调用Servlet实例对象的init()方法。
创建一个用于封装HTTP请求消息的HttpServletRequest对象和一个代表HTTP响应消息的HttpServletResponse对象，然后调用Servlet的service()方法并将请求和响应对象作为参数传递进去。
WEB应用程序被停止或重新启动之前，Servlet引擎将卸载Servlet，并在卸载之前调用Servlet的destroy()方法。

Servlet接口实现类

分别为：GenericServlet、HttpServlet

HttpServlet指能够处理HTTP请求的servlet，它在原有Servlet接口上添加了一些与HTTP协议处理方法，它比Servlet接口的功能更为强大。因此在编写Servlet时，通常应继承这个类
HttpServlet在实现Servlet接口时，覆写了service方法，该方法体内的代码会自动判断用户的请求方式，如为GET请求，则调用 HttpServlet的doGet方法，如为Post请求，则调用doPost方法。因此，在编写Servlet时，通常只需要覆写doGet或doPost方法，而不要去覆写service方法。

Servlet访问URL映射配置

由于客户端是通过URL地址访问web服务器中的资源，所以Servlet程序若想被外界访问，必须映射到一个URL地址上，这个工作在web.xml文件中使用 < servlet > 元素和 < servlet-mapping > 元素完成。< servlet > 元素用于注册Servlet，它包含有两个主要的子元素：< servlet-name > 和 < servlet-class>，分别用于设置Servlet的注册名称和Servlet的完整类名; 一个 < servlet-mapping > 元素用于映射一个已注册的Servlet的一个对外访问路径，它包含有两个子元素:< servlet-name > 和 < url-pattern >，分别用于指定Servlet的注册名称和Servlet的对外访问路径。

Servlet及其URL映射配置

servlet:

public class postName extends HttpServlet {

        JSONObject jsonObject = new JSONObject();
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //doGet方法对应前端的Get请求
            response.setContentType("text/javascript;charset=utf-8");
            PrintWriter writer = response.getWriter();
            writer.write(jsonObject.toString());
        }

        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            request.setCharacterEncoding("UTF-8");
            //获取传过来的表单数据,根据表单中的userName获取所填写的值
            String userName = request.getParameter("userName");
            jsonObject.put("name",userName);
            System.out.println(jsonObject.toString());

        }

    }

web.xml配置

    <servlet>
        <servlet-name>postusername</servlet-name>
        <servlet-class>com.first.postName</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>postusername</servlet-name>
        <url-pattern>/postusername</url-pattern>
    </servlet-mapping>