03_JqueryAjax_异步请求Servlet

时间 2019-11-30

标签 jqueryajax 异步请求 servlet 栏目 JQuery 繁體版

原文原文链接

【Ajax 简述】javascript

　　jquery对Ajax提供了更方便的代码：$ajax({ops})来发送异步请求。html

　　首先说一个Ajax的特性，它是永安里发送异步请求，请求的是服务器，但不会刷新页面。前端

　　例如在注册功能中，用户在表单输入用户名后，在用户输入框后出现一个对号（或者错号），说明在输入以后页面向服务器发出了异步请求，服务器验证这个名称是否注册过，而后返回结果，页面再经过服务器的返回结果显示对应的信息，整个请求过程当中页面并不会刷新。java

【$ajax() 方法】jquery

$ajax()方法的参数是一个对象，这个对象的主要属性以下;web

* url ：请求的url，一般对应一个Servlet，例如：" /ajaxtest/AjaxServlet ";ajax

* data：该属性是一个对象，它是传递给服务器的参数，例如：{email:"zhangSan"}( 例如其中的eamil来自于邮箱:<input type="text" name="email" id="xxx"> )。Servlet能够经过request.getParameter("email")来得到这个值。数据库

* type：请求方式，经过GET或者POST方式，例如：type:"POST";json

* 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"