前言
本章讲解有关JQuery的AJAX技术
方法
1.什么是AJAX技术
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
我个人的理解就是通过servlet加载页面的话需要整个servlet执行完毕才能够完全加载页面,万一servlet发生错误,会使得整个页面无法正确的加载。我们利用AJAX技术主要是在不影响页面加载的状态下向服务器发送请求获取数据!
如果没有JQuery,进行AJAX编程还是很难的,还要考虑浏览器的兼容性。基础的AJAX实现我这里就不多说了,因为我们也不可能去用到,在实际的项目中都是在用JQuery集成的AJAX方法来进行AJAX编程。
特别的:学习本章需要学习servlet的相关知识
2.使用JQuery操作AJAX
1)$.load()方法
语法:$(selector).load(URL,data,callback);
作用:load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
实例:使用load()方法请求JSP页面加载指定元素中
login.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户登录</title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#test").load("first.jsp");
});
</script>
</head>
<body>
<div id="test"></div>
<form id="ff" action="/login.do" method="post">
用户名:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
first.jsp:
<%@ page pageEncoding="utf-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
我是加载的页面
</body>
</html>
让我们访问login.jsp看一下效果:
2)$.ajax()方法
该方法比较重要,使用频率最高,必须掌握!
语法:$.ajax({参数json串});
作用:ajax() 方法通过 HTTP 请求加载远程数据。
常见参数:
async
类型:Boolean
默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
data
类型:String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
dataType
类型:String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
- "xml": 返回 XML 文档,可用 jQuery 处理。
- "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
- "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
- "json": 返回 JSON 数据 。
- "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
- "text": 返回纯文本字符串
error
类型:Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。
如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
这是一个 Ajax 事件。
success
类型:Function
请求成功后的回调函数。
参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。
这是一个 Ajax 事件。
type
类型:String
默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
url
类型:String
默认值: 当前页地址。发送请求的地址。
实例:使用ajax()方法向servlet请求数据并使用alert()方法显示
login.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户登录</title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"/test.ajax",
success:function(data){
alert(data);
}
});
});
</script>
</head>
<body>
<div id="test"></div>
<form id="ff" action="/login.do" method="post">
用户名:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
AJAXServlet.java:
package com.jwang.student.servlet;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/test.ajax")
public class AJAXServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) {
try {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.getWriter().write("我是AJAX请求!");
} catch (Exception e) {
e.printStackTrace();
}
}
}
让我们访问login.jsp看一下效果!
我们可以看到,我们使用ajax()方法成功的请求到了数据!
3)$.get()方法
语法:$.get(URL,callback);
作用:$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
换句话说,我们之前的ajax()方法中的参数type为“GET”和它是等价的
实例:使用$.get()方法向后台发送数据并返回对应结果
login.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户登录</title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$.get("/test.ajax?username=admin", function(data){
alert(data);
});
});
</script>
</head>
<body>
<div id="test"></div>
<form id="ff" action="/login.do" method="post">
用户名:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
AJAXServlet.java
package com.jwang.student.servlet;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/test.ajax")
public class AJAXServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) {
try {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
if("admin".equals(username)){
response.getWriter().write("登录成功");
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
我们访问一下login.jsp看一下效果:
4)$.post()方法
语法:$.post(URL,data,callback);
作用:$.post() 方法通过 HTTP POST 请求向服务器提交数据。
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
换句话说,我们之前的ajax()方法中的参数type为“POST”和它是等价的
实例:使用$.post()方法向后台发送数据并返回对应结果
login.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户登录</title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$.post("/test.ajax",{"username":"admin"}, function(data){
alert(data);
});
});
</script>
</head>
<body>
<div id="test"></div>
<form id="ff" action="/login.do" method="post">
用户名:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
AJAXServlet.java:
package com.jwang.student.servlet;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/test.ajax")
public class AJAXServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) {
try {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
if("admin".equals(username)){
response.getWriter().write("登录成功");
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
总结
我们重点掌握$.ajax()方法,因为它完全可以替代其他方法!!!