一. 使用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. Openstack Nova 源码分析 — 使用 VCDriver 创建 VMware Instance

    目录 目录 前言 流程图 nova-compute vCenter 前言 在上一篇Openstack Nova 源码分析 - Create instances (nova-conductor阶段)中, ...

  2. 1、linux常用命令的英文单词缩写

    1.linux常用命令的英文单词缩写 命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户 rpm:redhat pa ...

  3. 20140312 Excel表格画折现图次坐标轴

    1.struct 是8字节对齐 2.char * a, sizeof(a)=4; char a[]="abcdefg";sizeof(a)=8; 3.内存对其齐

  4. FIR和IIR设计指标

  5. Spring Boot + kkFileView-2.1.2 实现文档在线预览

    1. 下载kkFileview:https://gitee.com/kekingcn/file-online-preview/releases 2. 启动服务 进入 bin 目录,双击 startup ...

  6. 3.4_springboot2.x整合spring Data Elasticsearch

    Spring Data Elasticsearch 是spring data对elasticsearch进行的封装. 这里有两种方式操作elasticsearch: 1.使用Elasticsearch ...

  7. jmeter接口测试（基础）

    一.jmeter创建请求 1.运行jmeter:jmeter.bat 2.右键测试计划,添加一个:线程组 3.右键前面添加的线程组,添加一个:http请求 4.填写请求信息:     5.右键线程组, ...

  8. C#枚举转化示例大全，数字或字符串转枚举

    本文重点举例说明C#枚举的用法,数字转化为枚举.枚举转化为数字及其枚举数值的判断,以下是具体的示例: 先举两个简单的例子,然后再详细的举例说明: 字符串转换成枚举:DayOfWeek week=(Da ...

  9. Django ORM 之F、Q查询与事务

    返回ORM目录 Django ORM 内容目录 一.F.Q查询 二.事务 三.only与defer 一.F.Q查询 """ Product表中的数据: 1 橡皮 2 20 ...

  10. windows使用cmd查看、杀死进程

    查看某个进程: netstat -ano | findstr  端口号 杀死某个进程: taskkill /f  /pid  进程号