一. 使用JQuery的$.get()方法实现异步请求

1. 编写JSP

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

     <script type="text/javascript" src="js/verify_jquery_get.js"></script>

 </head>

 <body>

     <input type="text" id="inputVal"/><br/>

         <input type="button" value="获取xml数据" onclick="verifyJqueryGet()"/>

     <div id="result"></div>

 </body>

 </html>

2. 编写verify_jquery_get.js

 function verifyJqueryGet() {

     $.get("AjaxServer?value="+$('#inputVal').val(),

         null,

         function (data) {

             $('#result').html("<p>"+data+"</p>");

         });

 }

$.get()方法参数说明:

$.get(url, param, callback(data));

url 请求资源的路径

param 请求参数, 注意将请求参数写在url后, 这里填null

callback(data) 回调函数, 服务器响应数据后, Ajax引擎(xhr)会自动调用该回调函数,数据还没回来时, 页面不会等待, 而是继续执行, 中断...

3. 编写Servlet

 /**

  * Created by IntelliJ IDEA.

  *

  * @Auther: ShaoHsiung

  * @Date: 2018/8/20 15:12

  * @Title: Ajax后台程序

  * @Description: 获取异步请求参数, 若参数满足条件, 则使用输出对象向浏览器输出数据

  */

 public class AjaxServer extends HttpServlet {

     @Override

     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

         // 设置响应内容类型

         resp.setContentType("text/html;charset=utf-8");

         // 获取输出对象

         PrintWriter out = resp.getWriter();

         // 获取异步请求参数

         String value = req.getParameter("value");

         // 设置参数编码为UTF-8

         String valueUtf8 = URLDecoder.decode(value, "UTF-8");

         // 检验参数

         if (valueUtf8==null || valueUtf8.equals("")) {

             out.println("用户名不能为空!");

         } else {

             // 判断参数是否满足条件

             if(valueUtf8.equals("young")) {

                 out.println("用户名可以使用!");

             } else {

                 out.println("用户名无法使用!");

             }

         }

     }

     @Override

     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

         doGet(req, resp);

     }

 }

4. 程序演示

二. 使用JQuery的$.ajax()方法实现异步请求

1. 编写JSP

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

     <script type="text/javascript" src="js/verify_jquery_ajax.js"></script>

 </head>

 <body>

     <input type="text" id="inputVal"/><br/>

         <input type="button" value="获取xml数据" onclick="verifyJqueryAjax()"/>

     <div id="result"></div>

 </body>

 </html>

2. 编写verify_jquery_ajax.js

 function verifyJqueryAjax() {

     $.ajax({

         type: "get",  // 请求方式

         url: "AjaxXmlServer",  // 目标资源

         data: "value="+$('#inputVal').val(), // 请求参数

         dataType: "xml",  // 服务器响应的数据类型

         success : function (data) {  // readystate == 4 && status == 200

             $('#result').html("<p>"+$(data).children().text()+"</p>");  // data是一个dom对象, 先将其转化为jquery对象

         }

     });

 }

小结:

1) js中定义一个对象方式:
var obj1 = {};
var obj2 = {name: "zhang", age: 18};

2) dom->jquery
var $data = $(data)

3) 需要注意jquery对象的children方法的使用

$.ajax()方法参数说明:

type 请求方式 get/post

url 请求资源路径

data 请求参数, 注意格式

dataType 服务器响应的数据类型

success(data) 回调函数, data是一个dom对象

3. 编写Servlet

 /**

  * Created by IntelliJ IDEA.

  *

  * @Auther: ShaoHsiung

  * @Date: 2018-8-21 12:41:06

  * @Title: Ajax后台程序, 返回xml数据

  * @Description: 获取异步请求参数, 若参数满足条件, 则使用输出对象向浏览器输出xml数据

  */

 public class AjaxXmlServer extends HttpServlet {

     @Override

     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

         // 设置响应内容类型为xml

         resp.setContentType("text/xml;charset=utf-8");

         // 获取输出对象

         PrintWriter out = resp.getWriter();

         // 获取异步请求参数

         String value = req.getParameter("value");

         //System.out.println("1" + value);

         //System.out.println("2" + new String(value.getBytes("ISO8859-1"), "UTF-8"));

         // 设置参数编码为UTF-8

         String valueUtf8 = URLDecoder.decode(value, "UTF-8");

         // 准备响应的数据

         StringBuffer buffer = new StringBuffer();

         buffer.append("<message>");

         // 检验参数

         if (valueUtf8==null || valueUtf8.equals("")) {

             buffer.append("用户名不能为空!").append("</message>");

         } else {

             // 判断参数是否满足条件

             if(valueUtf8.equals("young")) {

                 buffer.append("用户名可以使用!").append("</message>");

             } else {

                 buffer.append("用户名无法使用!").append("</message>");

             }

         }

         // 响应数据

         out.print(buffer.toString());

     }

     @Override

     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

         doGet(req, resp);

     }

 }

备注:

1) 务必设置设置响应内容类型为xml, 否则js代码无法处理响应的数据

4. 程序演示

随机推荐

  1. LeetCode 175. Combine Two Tables (组合两个表)

    题目标签: 题目给了我们两个table,让我们合并,根据Person为主. 因为题目说了 提供person 信息,不管这个人有没有地址.所以这里用Left Join. Java Solution: R ...

  2. spring-boot-configuration-processor

    spring默认使用yml中的配置,但有时候要用传统的xml或properties配置,就需要使用spring-boot-configuration-processor了 引入pom依赖 <de ...

  3. Python中字典的详细用法

    #字典 #字典是Python中唯一内建的映射类型.字典中没有特殊的顺序,但都是存储在一个特定的键(key)下面,键可以是数字,字符串,甚至是元组 #一.字典的使用 #在某些情况下,字典比列表更加适用: ...

  4. Git的故事

    目录 Git Git的概念 Git的安装 Git的配置 Git的指令 Git Git的概念 首先我们要知道git是什么,最根本的概念是版本控制,顾名思义,就是git可以帮助我们控制自己写的代码或者文档 ...

  5. 使用CSS3开启GPU硬件加速提升网站动画渲染性能

    遇到的问题: 网站本身设计初衷就没有打算支持IE8及以下版本浏览器,并不是因为代码兼容性问题,而是真的不想迁就那些懒得更新自己操作系统和浏览器的用户,毕竟是我自己的网站,所以我说了算!哈哈~ 没有了低 ...

  6. iOS开发系列-支付宝支付

    概述 开发中支付通常都会集成支付宝支付,下面讲解支付宝的整体流程. 集成支付宝支付的流程 签约 与支付签约,得到获取商户的ID(partner).账户ID(seller).私钥privateKey. ...

  7. exe4j 打包（多个jar打包）

    一,自行下载exe4j 注册码: 用户名和公司名可随便填A-XVK258563F-1p4lv7mg7savA-XVK209982F-1y0i3h4ywx2h1A-XVK267351F-dpurrhny ...

  8. Django项目基础配置和基本使用

    博文配置内容包括: django项目的创建 django项目下应用的创建及配置 数据库的配置 templates模板的配置 命令行创建项目: 在需要的目录下创建Django项目输入命令:django- ...

  9. Matplotlib---柱状图、直方图(高斯分布)

    # _*_ coding: gbk _*_ # @Author: Wonde # bar 直方图 import matplotlib.pyplot as plt # 绘图 from matplotli ...

  10. CSIC_716_20191126【面向对象编程--继承】

    继承 什么是继承:继承是新建类的一种方式,通过此方式生成的类称为子类.或者 派生类,被继承的类称为父类.基类或超类.在python中,一个子类可以继承多个父类. 继承的作用:减少代码的冗余,提高开发效 ...