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>