【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. 使用Visual Studio 2013编写可维护的本地可视化(natvis)

    在Visual Studio 2012中,我们介绍了创建可视化使用原生类型的能力natvis文件. Visual Studio 2013中包含了一些改进,使其更容易编写可视化的类,在内部利用收集来存储 ...

  2. 中国区Windows Azure 提供的功能以及与国外的差异

    当前中国服务提供的功能 目前,中国服务中包括以下 Azure 功能. 计算 - 虚拟机(用于 IaaS 服务) 计算 - 云服务(用于 PaaS 服务) 计算 - 网站 数据服务 - 存储(用于 Bl ...

  3. Hadoop学习记录（3）|HDFS API 操作|RPC调用

    HDFS的API操作 URL方式访问 package hdfs; import java.io.IOException; import java.io.InputStream; import java ...

  4. 页面置换算法（最佳置换算法、FIFO置换算法、LRU置换算法、LFU置换算法）

    页面置换产生的原因是:分页请求式存储管理(它是实现虚拟存储管理的方法之一,其中一个特性是多次性-->多次将页面换入或换出内存) 效果最好的页面置换算法:最佳置换算法 比较常用的页面置换算法有:F ...

  5. Codeforces13C–Sequence(区间DP)

    题目大意 给定一个含有N个数的序列,要求你对一些数减掉或者加上某个值,使得序列变为非递减的,问你加减的值的总和最少是多少? 题解 一个很显然的结果就是,变化后的每一个值肯定是等于原来序列的某个值,因为 ...

  6. 【开发工具 - Git】之Git常用命令汇总

    本文记录了Git Bash中的常用指令. 1       Git操作 git clone XXXXX:将GitHub项目XXXXX克隆到本地 git remote –v:查看远程连接信息 git ch ...

  7. 获取datagrid中编辑列combobox的value值与text值

    var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'}); var productname = $(ed ...

  8. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  9. linux系统禁止root用户通过ssh登录及ssh的访问控制

    Linux系统默认情况下,是可以通过ssh以root权限登录的.但出于安全考虑,这样的权限是不合适的,因为黑客可能通过暴力破解你的root密码,然后进入你的系统,oh,damn it..... 同样是 ...

  10. Java多线程-工具篇-BlockingQueue(转)

    前言: 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列 类,为我们快速搭建高质量的多线程程序带来极大的 ...