一. 使用JQuery的$.get()方法实现异步请求
1. 编写JSP
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 7 ????<script type="text/javascript" src="js/verify_jquery_get.js"></script> 8 </head> 9 <body>10 ????<input type="text" id="inputVal"/><br/>11 ????????<input type="button" value="获取xml数据" onclick="verifyJqueryGet()"/>12 ????<div id="result"></div>13 </body>14 </html>
2. 编写verify_jquery_get.js
1 function verifyJqueryGet() {2 ????$.get("AjaxServer?value="+$(‘#inputVal‘).val(),3 ????????null,4 ????????function (data) {5 ????????????$(‘#result‘).html("<p>"+data+"</p>");6 ????????});7 }$.get()方法参数说明:
$.get(url, param, callback(data));
url 请求资源的路径
param 请求参数, 注意将请求参数写在url后, 这里填null
callback(data) 回调函数, 服务器响应数据后, Ajax引擎(xhr)会自动调用该回调函数,数据还没回来时, 页面不会等待, 而是继续执行, 中断...
3. 编写Servlet
1 /** 2 ?* Created by IntelliJ IDEA. 3 ?* 4 ?* @Auther: ShaoHsiung 5 ?* @Date: 2018/8/20 15:12 6 ?* @Title: Ajax后台程序 7 ?* @Description: 获取异步请求参数, 若参数满足条件, 则使用输出对象向浏览器输出数据 8 ?*/ 9 public class AjaxServer extends HttpServlet {10 ????@Override11 ????protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {12 ????????// 设置响应内容类型13 ????????resp.setContentType("text/html;charset=utf-8");14 ????????// 获取输出对象15 ????????PrintWriter out = resp.getWriter();16 ????????// 获取异步请求参数17 ????????String value = req.getParameter("value");18 ????????// 设置参数编码为UTF-819 ????????String valueUtf8 = URLDecoder.decode(value, "UTF-8");20 ????????// 检验参数21 ????????if (valueUtf8==null || valueUtf8.equals("")) {22 ????????????out.println("用户名不能为空!");23 ????????} else {24 ????????????// 判断参数是否满足条件25 ????????????if(valueUtf8.equals("young")) {26 ????????????????out.println("用户名可以使用!");27 ????????????} else {28 ????????????????out.println("用户名无法使用!");29 ????????????}30 ????????}31 ????}32 33 ????@Override34 ????protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {35 ????????doGet(req, resp);36 ????}37 }4. 程序演示
二. 使用JQuery的$.ajax()方法实现异步请求
1. 编写JSP
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 7 ????<script type="text/javascript" src="js/verify_jquery_ajax.js"></script> 8 </head> 9 <body>10 ????<input type="text" id="inputVal"/><br/>11 ????????<input type="button" value="获取xml数据" onclick="verifyJqueryAjax()"/>12 ????<div id="result"></div>13 </body>14 </html>
2. 编写verify_jquery_ajax.js
1 function verifyJqueryAjax() { 2 ????$.ajax({ 3 ????????type: "get", ?// 请求方式 4 ????????url: "AjaxXmlServer", ?// 目标资源 5 ????????data: "value="+$(‘#inputVal‘).val(), // 请求参数 6 ????????dataType: "xml", ?// 服务器响应的数据类型 7 ????????success : function (data) { ?// readystate == 4 && status == 200 8 ????????????$(‘#result‘).html("<p>"+$(data).children().text()+"</p>"); ?// data是一个dom对象, 先将其转化为jquery对象 9 ????????}10 ????});11 }小结:
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
1 /** 2 ?* Created by IntelliJ IDEA. 3 ?* 4 ?* @Auther: ShaoHsiung 5 ?* @Date: 2018-8-21 12:41:06 6 ?* @Title: Ajax后台程序, 返回xml数据 7 ?* @Description: 获取异步请求参数, 若参数满足条件, 则使用输出对象向浏览器输出xml数据 8 ?*/ 9 public class AjaxXmlServer extends HttpServlet {10 ????@Override11 ????protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {12 13 ????????// 设置响应内容类型为xml14 ????????resp.setContentType("text/xml;charset=utf-8");15 ????????// 获取输出对象16 ????????PrintWriter out = resp.getWriter();17 ????????// 获取异步请求参数18 ????????String value = req.getParameter("value");19 ????????//System.out.println("1" + value);20 ????????//System.out.println("2" + new String(value.getBytes("ISO8859-1"), "UTF-8"));21 ????????// 设置参数编码为UTF-822 ????????String valueUtf8 = URLDecoder.decode(value, "UTF-8");23 ????????// 准备响应的数据24 ????????StringBuffer buffer = new StringBuffer();25 ????????buffer.append("<message>");26 ????????// 检验参数27 ????????if (valueUtf8==null || valueUtf8.equals("")) {28 ????????????buffer.append("用户名不能为空!").append("</message>");29 ????????} else {30 ????????????// 判断参数是否满足条件31 ????????????if(valueUtf8.equals("young")) {32 ????????????????buffer.append("用户名可以使用!").append("</message>");33 ????????????} else {34 ????????????????buffer.append("用户名无法使用!").append("</message>");35 ????????????}36 ????????}37 ????????// 响应数据38 ????????out.print(buffer.toString());39 ????}40 41 ????@Override42 ????protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {43 ????????doGet(req, resp);44 ????}45 }备注:
1) 务必设置设置响应内容类型为xml, 否则js代码无法处理响应的数据
4. 程序演示
$.ajax()方法和$.get()方法使用小结
原文地址：https://www.cnblogs.com/shaohsiung/p/9538890.html