【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的更多相关文章

  1. java编程(2)——servlet和Ajax异步请求的接口编程(有调用数据库的数据)

    第一步: 1.为项目配置 Tomcat 为 server: 2.导入 mysql的jar包 到项目目录中: 第二步:编码 1.数据库连接类ConnectMysql.java代码: package co ...

  2. java编程(1)——servlet和Ajax异步请求的接口编程(没有调用数据库的数据)

    编程应用背景: 使用HttpServlet接口来编写一个动态登录的接口(需要在Tomcat容器发布) 登录的 LoginSample 类代码: package com.zhang.java; publ ...

  3. Filter 快速开始 异步Servlet 异步请求 AsyncContext 异步线程 异步派发 过滤器拦截

    [web.xml] <filter> <filter-name>normalFilter</filter-name> <filter-class>net ...

  4. Servlet 3.0 规范(二)注解驱动和异步请求

    Servlet 3.0 规范(二)注解驱动和异步请求 在 Servlet 3.0 时支持注解启动,不再需要 web.xml 配制文件. 一.Servlet 3.0 组件 Servlet 容器的组件大致 ...

  5. JQuery中使用Ajax实现诸如登录名检测等异步请求Demo

    上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册 ...

  6. Springmvc中 同步/异步请求参数的传递以及数据的返回

    转载:http://blog.csdn.net/qh_java/article/details/44802287 注意: 这里的返回就是返回到jsp页面 **** controller接收前台数据的方 ...

  7. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  8. 移动App,AJAX异步请求,实现简单的增、删、改、查

    用ajax发异步请求时,要注意url."AppServer"为后台项目名,"LoginServlet.action"为web.xml中的<url-patt ...

  9. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

随机推荐

  1. ios get airplay name

    tarting from iOS7 AudioToolbox API for currentRoute becomes deprecated: Apple instead made currentRo ...

  2. Win8关机 一直重启的问题 解决方案-摘自网络

    win8关机时自动重启的解决方法:关闭快递启动,默认是启动的,到控制面板 – 电源选项 – 选择电源按钮的功能 – 更改当前不可用的设置 – 关机设置 – 把勾去掉 关闭快速启动.这样就不会关机一直重 ...

  3. 浅谈.NET的缓存(依赖和过期)

    Cache 线程安全,相当于static Arraylist. 缓存过期机制 1.设置过期时间 a.可设置过期时间 Cache.Insert());//设置10分钟过期 b.绝对过期时间 Cache. ...

  4. 用Jsoup实现html中img标签地址替换

    做app的时候经常要用webview解析Html,如果是自己写的服务器那么富文本编辑框有可能选择像KindEditor这样的编辑器,在kindEditor添加图片虽然可以实现绝对路径插入,如果说: & ...

  5. 来自奢侈品行业的CEO能给苹果带来什么?

    重回苹果的奢侈品大佬:保罗丹诺威 作为伊夫·圣罗兰(Saint Laurent)时尚集团的前CEO,保罗丹诺威(Paul Deneve)9月将正式加入苹果公司,并负责该公司所谓的“特殊项目”,同时直接 ...

  6. oracle中使用sql查询时字段为空则赋值默认

    转至:http://www.th7.cn/db/Oracle/201501/86125.shtml oracle 通过 nvl( )函数sql 查询时为 空值 赋默认值 oracle 函数介绍之nvl ...

  7. ASP.NET MVC- Model- An Introduction to Entity Framework for Absolute Beginners

    Introduction This article introduces Entity Framework to absolute beginners. The article is meant fo ...

  8. 大数据与可靠性会碰撞出什么样的Spark?

    可靠性工程领域的可靠性评估,可靠性仿真计算,健康检测与预管理(PHM)技术,可靠性试验,都需要大规模数据来进行支撑才能产生好的效果,以往这些数据都是不全并且收集困难,而随着互联网+的大数据时代的来临, ...

  9. Objective-C-使用NSMutableURLRequest发送POST请求,使用NSJSONSerialization解析JSON字符串

    NSString *reqData = @"Data="; NSData *postDatas = nil; NSString *urlPath = @"url" ...

  10. CENTOS运行报错java.lang.OutOfMemoryError

    java.lang.OutOfMemoryError thrown from the UncaughtExceptionHandler in thread "http-bio-8080-ex ...