03_JqueryAjax_异步请求Servlet
【Ajax 简述】
jquery对Ajax提供了更方便的代码:$ajax({ops})来发送异步请求。
首先说一个Ajax的特性,它是永安里发送异步请求,请求的是服务器,但不会刷新页面。
例如在注册功能中,用户在表单输入用户名后,在用户输入框后出现一个对号(或者错号),说明在输入之后页面向服务器发出了异步请求,服务器验证这个名称是否注册过,然后返回结果,页面再通过服务器的返回结果显示对应的信息,整个请求过程中页面并不会刷新。
【$ajax() 方法】
$ajax()方法的参数是一个对象,这个对象的主要属性如下;
* url :请求的url,通常对应一个Servlet,例如:" /ajaxtest/AjaxServlet ";
* data:该属性是一个对象,它是传递给服务器的参数,例如:{email:"zhangSan"}( 例如其中的eamil来自于 邮箱:<input type="text" name="email" id="xxx"> )。Servlet可以通过request.getParameter("email")来获得这个值。
* type:请求方式,通过GET或者POST方式,例如:type:"POST";
* dataType:服务器返回给客户端的数据类型,特长我们选择json,表示JavaScript对象。例如在Servlet中:response.getWriter().print("{\"name\":\"zhangsan\"},\"age\":23");
* async:该属性是boolean类型,true表示异步,false表示同步。如果true,那么客户端不会等待服务器的返回结果,就继续向下执行。
* cache:该属性是boolean类型,表示是否在浏览器缓存中加载信息。
* success:方法类型,当服务器执行成功后,会自动执行这个方法,这个方法通过服务器返回的结果来处理页面。
【工程截图(Servlet案例)】
【AjaxEmailServlet.java】Servlet中的代码
package cn.Higgin.Servlet; import java.io.IOException; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; @WebServlet("/AjaxEmailServlet")
public class AjaxEmailServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost--------"); //打印请求类型
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8"); String email=request.getParameter("email");
System.out.println("eamil------"+email); //打印获取的参数
if(email.equals("Higgin@qq.com")){ //模拟查询数据库判断
response.getWriter().print("true"); //将结果返回到前端页面
}else{
response.getWriter().print("false"); //将结果返回到前端页面
} }
public AjaxEmailServlet() {
super();
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet---------");
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8"); String email=request.getParameter("email");
System.out.println("eamil------"+email);
if(email.equals("Higgin@qq.com")){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
【web.xml】(一般在Eclipse下新建Servlet会自动生成配置文件,这里自己配置)
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>Jquery_Test00</display-name> <welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list> <servlet>
<servlet-name>ServletDemo</servlet-name>
<servlet-class>cn.Higgin.Servlet.AjaxEmailServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServletDemo</servlet-name>
<url-pattern>/servlet/AjaxEmailServlet</url-pattern>
</servlet-mapping> </web-app>
【index2.jsp】(Jquery的Ajax代码)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery Test</title>
<!-- 导入Jquery文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.1.js"></script>
<script type="text/javascript">
//这里的内容会在文档加载完毕时执行
$(function(){
$("#xxx").blur(function(){ //当xxx失去焦点时
var value=$("#xxx").val();
//alert(value);
$.ajax({
url:"/Jquery_Test00/servlet/AjaxEmailServlet",//要请求的服务器url
//这是一个对象,表示请求的参数,两个参数:method=ajax&val=xxx,服务器可以通过request.getParameter()来获取
//data:{method:"ajaxTest",val:value},
data:{email:value}, //这里的email对应表单中的name="email",也是发送url中的email=value(GET方式)
async:true, //是否为异步请求
cache:false, //是否缓存结果
type:"POST", //请求方式为POST
dataType:"json", //服务器返回的数据是什么类型
success:function(result){ //这个方法会在服务器执行成功是被调用 ,参数result就是服务器返回的值(现在是json类型)
if(result){
$("label").text("好人");
}else{
$("label").text("坏人");
}
}
})
}) });
</script>
</head> <body>
email:<input type="text" name="email" id="xxx"/><label></label><br/>
密码:<input type="text" name="age" /><br/> </body>
</html>
【运行结果】
在email中输入Higgin@qq.com,实处焦点时,可以发现输出为"好人"
控制台输出:
查看抓包工具中的结果,请求的url为:localhost:8080/jquery_Test00/servlet/AjaxEmailServlet
和 ajax请求的url 以及 web.xml中配置的<url-pattern> 一致,,请求方式为POST
在email中随便输入一串字符
控制台输出
【将index2.jsp中ajax请求方式改成type=“GET”的方式】
【运行结果】
运行效果相同(因为在Servlet的doGet方法中谢了类似代码)
主要看下抓包工具的结果
在email中输入"Higgin@qq.com"
03_JqueryAjax_异步请求Servlet的更多相关文章
- java编程(2)——servlet和Ajax异步请求的接口编程(有调用数据库的数据)
第一步: 1.为项目配置 Tomcat 为 server: 2.导入 mysql的jar包 到项目目录中: 第二步:编码 1.数据库连接类ConnectMysql.java代码: package co ...
- java编程(1)——servlet和Ajax异步请求的接口编程(没有调用数据库的数据)
编程应用背景: 使用HttpServlet接口来编写一个动态登录的接口(需要在Tomcat容器发布) 登录的 LoginSample 类代码: package com.zhang.java; publ ...
- Filter 快速开始 异步Servlet 异步请求 AsyncContext 异步线程 异步派发 过滤器拦截
[web.xml] <filter> <filter-name>normalFilter</filter-name> <filter-class>net ...
- Servlet 3.0 规范(二)注解驱动和异步请求
Servlet 3.0 规范(二)注解驱动和异步请求 在 Servlet 3.0 时支持注解启动,不再需要 web.xml 配制文件. 一.Servlet 3.0 组件 Servlet 容器的组件大致 ...
- JQuery中使用Ajax实现诸如登录名检测等异步请求Demo
上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册 ...
- Springmvc中 同步/异步请求参数的传递以及数据的返回
转载:http://blog.csdn.net/qh_java/article/details/44802287 注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方 ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- 移动App,AJAX异步请求,实现简单的增、删、改、查
用ajax发异步请求时,要注意url."AppServer"为后台项目名,"LoginServlet.action"为web.xml中的<url-patt ...
- maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...
随机推荐
- HW4.36
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 中局域网LAN中建立局域网可访问的类GitHub的服务器
There are several ways to do this Host internal repositories like Gitlab (free software) or Stash. T ...
- 巧用MySQL之Explain进行数据库优化
前记:很多东西看似简单,那是因为你并未真正了解它. Explain命令用于查看执行效果.虽然这个命令只能搭配select类型语句使用,如果你想查看update,delete类型语句中的索引效果,也不是 ...
- javascript原型和原型继承
每一个javascript对象(null除外)都和原型对象相关联,每一个对象都从原型对象继承属性. 所有通过对象直接量创建的对象都具有同一个原型对象,并可以通过javascript代码Object.p ...
- 通过Response.Flush()实现IE下载失败的问题
通过Response.Flush()实现对服务端文件的下载时,会失败,不能正常弹出IE下载框,经过测试发现需要进行如下设置后即可解决. 进入 [工具]--->[Internet选项]---> ...
- TDD中的迭代
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:TDD中的迭代.
- uedit富文本编辑器
问题: 1: An error occurred at line: 6 in the generated java fileOnly a type can be imported. com.baidu ...
- 淘宝HSF服务的原理以及简单的实现
淘宝HSF服务具体来说分三个应用:api接口,service服务,本地应用. 最基本的Api服务应该是十分干净的,不含方法,只有接口.它是要被打包(jar包的形式)到中央仓库去的. service服务 ...
- int& a = b 的思考
在PCL显示点云部分程序中,涉及到了如下程序 // 定义相关变量 pcl::PointCloud<pcl::PointXYZ>::Ptr cloud_ptr (new pcl::Point ...
- 百度之星资格赛——Disk Schedule(双调旅行商问题)
Disk Schedule Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...