详述Servlet中ajax异步技术

最新推荐文章于 2021-08-06 10:46:03 发布

肥胖的企鹅

最新推荐文章于 2021-08-06 10:46:03 发布

阅读量241

点赞数

分类专栏： jQuery 文章标签： jQuery 异步 Ajax

本文链接：https://blog.csdn.net/weixin_43457668/article/details/103279614

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

介绍：什么是异步

起因：当浏览器向Web服务器发送一个请求时，服务器接收并处理传来的表单，然后返回一个新的网页，这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，所以出现了Ajax技术。

作用：使用Ajax技术可以在不重新加载整个网页的情况下向服务器发送请求并接收来自服务器的响应以实现页面局部刷新。

用处：Ajax技术经常被用在登陆页面，即实现不跳转页面也能实现判断登陆信息是否正确（浏览器在本次response中返回用户输入数据，服务端再判断数据后再在同一个response中返回判断结果给当前页面，期间不跳转，页面仅部分发生改变。）。

实例：异步登陆

一、首先创建Dynamic Web Project工程

二、web端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>

</head>
<body>
	<span id="info" style="color:red"></span>
	<form >
		<input name="user_name" placeholder="请输入用户名" />
		<input name="password" type="password" placeholder="请输入密码" />
		<input type="button" value="登陆" />
	</form>
	<script>
		$("[value='登陆']").bind("click",function(){//配置：需要异步的功能，生成一个配置对象object
			var values =$("form").serialize();//将数据拼接起来
			console.log(values);
			var object={
				url:'./DataServlet?'+values,//指定向哪发送请求
				type:'get',//请求类型
				success:function(data){//获取服务端返回的数据
					if(data=="0"){
						$("#info").html("输入信息错误！");
						return;
					}
					location.href="http://www.baidu.com";//指定跳转位置
				}
			};
			$.ajax(object);//调用jQery的ajax方法，并传入配置好的object对象参数
		});
</script>
</body>
</html>

三、servlet端代码

package com.jd.ajex;

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 DataServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("UTF-8");
		String userName = request.getParameter("user_name");
		String password = request.getParameter("password");
		PrintWriter out =response.getWriter();//获取一个当前“响应”的对象
		if("admin".equals(userName) && "123456".equals(password)) {
			out.write("1");//向当前“响应”对象中返回一个数据
			out.flush();//使用flush方法保证数据完整输出
			out.close();
		}else {
			out.write("0");
			out.flush();
			out.close();
		}
	}
}

参考网站:京东登陆页面

https://passport.jd.com/new/login.aspx

肥胖的企鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详述Servlet中ajax异步技术

介绍：什么是异步起因：当浏览器向Web服务器发送一个请求时，服务器接收并处理传来的表单，然后返回一个新的网页，这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间，所以出现了Ajax技术。作用：使用Ajax技术可以在不重新加载整个网页的情况下向服务器发送请求并接收来自服务器的响应以实现...
复制链接

扫一扫