Ajax
概述
Asynchronous JavaScript And XML 异步的JavaScript 和 XML
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
可以明显地提升用户的体验而不需要去刷新整个页面。
【补充】
异步和同步：客户端和服务器端相互通信的基础上（交互）
同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。
原生 js 实现 Ajax
步骤
1.创建XMLHttpRequest对象
2.将状态触发器绑定到一个函数
3.使用open方法建立与服务器的连接
4.向服务器端发送数据
5.在回调函数中对返回数据进行处理
方法： open()，send()
属性：
onreadystatechange： 状态回调函数
responseText/responseXML： 服务器的响应字符串
status： 服务器返回的HTTP状态码
statusText： 服务器返回的HTTP状态信息
readyState： 对象状态
客户端向服务器提交数据
前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生Ajax测试</title>
</head>
<body>
<input type="button" value="我是按钮" onclick="ajax()">
</body>
<script>
function ajax() {
// 1.创建核心对象
var xmlHttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2.建立连接
xmlHttp.open("GET", "ajax?username=易烊千玺&password=123456");
// 3.发送请求
xmlHttp.send();
// 4.接收并处理服务器发送的响应
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
// 5.获取响应结果
var response = xmlHttp.responseText;
// 弹窗
alert("访问成功" + response);
}
}
}
</script>
</html>
后端业务逻辑
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置编码集
req.setCharacterEncoding("UTF8");
// 获取参数
String username = req.getParameter("username");
String password = req.getParameter("password");
// 展示
System.out.println(username + ":" + password);
// 响应结果
resp.getWriter().write("Hello");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
jQuery 实现 Ajax
通过 HTTP 请求加载远程数据
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, . p o s t 等 。 .post 等。 .post等。.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
最简单的情况下，$.ajax()可以不带任何参数直接使用。
jQuery.ajax(url,[settings])
回调函数
如果要处理$.ajax()得到的数据，则需要使用回调函数。
| 函数名 | 描述 |
|---|---|
| beforeSend | 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。 |
| error | 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话） |
| dataFilter | 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。 |
| success【重点】 | 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。 |
| complete | 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。 |
请求参数
| 参数名 | 描述 |
|---|---|
| url【重点】 | 一个用来包含发送请求的URL字符串。 |
| type【重点】 | (默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| dataType【重点】 | 预期服务器返回的数据类型。常见的有：xml、html、script、json、jsonp、text |
| data【重点】 | 发送到服务器的数据。将自动转换为请求字符串格式。 |
| accepts | 内容类型发送请求头，告诉服务器什么样的响应会接受返回。 |
| async | (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| timeout | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| statusCode | 一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。 |
| headers | 一个额外的"{键:值}"对映射到请求一起发送。此设置被设置之前beforeSend函数被调用;因此，消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。 |
加载并执行一个 JS 文件【了解】
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
保存数据到服务器，成功时显示信息。【重点】
$.ajax({
type: "POST",
url: "url",
data: "name=John&location=Boston",
success: function(data){
alert( "Data Saved: " + data );
}
});
【注意】这个代码粘过来改改直接用就行！！！
装入一个 HTML 网页最新版本【了解】
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
同步加载数据，发送请求时锁住浏览器
需要锁定用户交互操作时使用同步方式。
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
案例代码
package com.fc.ajax.js;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置编码集
req.setCharacterEncoding("UTF8");
// 获取参数
String username = req.getParameter("username");
String password = req.getParameter("password");
// 展示
System.out.println(username + ":" + password);
// 响应结果
resp.getWriter().write("Hello");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
通过远程 HTTP GET 请求载入信息
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax
参数
| 参数名 | 描述 |
|---|---|
| url | 待载入页面的URL地址 |
| data | 待发送 Key/value 参数 |
| callback | 载入成功时回调函数 |
| type | 返回内容格式，xml, html, script, json, text, _default |
请求 url，忽略返回值
$.get("url");
请求 url，并传送参数，忽略返回值
$.get("url", { username: "易烊千玺", password: "123456" } );
显示 url 以及返回值(HTML 或 XML，取决于返回值)
$.get("url", function(data){
alert("Data Loaded: " + data);
});
显示 url 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数【重点】
$.get("url", { name: "易烊千玺", time: "123456" },
function(data){
alert("Data Loaded: " + data);
});
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQueryGetAjax</title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<input type="text" id="input">
<input type="button" value="获取参数" onclick="ajax2()">
</body>
<script>
function ajax2() {
$.get("ajax", {'username':'易烊千玺', 'password':'123456'}, function (data) {
alert(data);
$("#input").val(data);
})
}
</script>
</html>
通过远程 HTTP POST 请求载入信息
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
参数
| 参数名 | 描述 |
|---|---|
| url | 发送请求地址 |
| data | 待发送 Key/value 参数 |
| callback | 发送成功时回调函数 |
| type | 返回内容格式，xml, html, script, json, text, _default |
请求 url，忽略返回值
$.post("test.php");
请求 url，并传送参数，忽略返回值
$.post("url", { username: "易烊千玺", password: "123456" } );
向服务器传递数据数组（同时仍然忽略返回值）
$.post("url", { 'choices[]': ["Jon", "Susan"] });
使用 ajax 请求发送表单数据【重点】
$.post("url", $("#testform").serialize());
显示 url 以及返回值(HTML 或 XML，取决于返回值)
$.post("url", function(data){
alert("Data Loaded: " + data);
});
显示 url 返回值(HTML 或 XML，取决于返回值)，添加一组请求参数【重点】
$.post("url", { name: "易烊千玺", time: "123456" },
function(data){
alert("Data Loaded: " + data);
});
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQueryPostAjax</title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form id="form">
<table>
<tr>
<td>账号 <input type="text" name="username"></td>
</tr>
<tr>
<td>密码 <input type="password" name="password"></td>
</tr>
<tr>
<td>显示 <input type="text" id="input"></td>
</tr>
<tr>
<td><input type="button" value="获取参数" onclick="ajax3()"></td>
</tr>
</table>
</form>
</body>
<script>
function ajax3() {
$.post("ajax", $("#form").serialize(), function (data) {
alert(data);
$("#input").val(data);
})
}
</script>
</html>
使用 Ajax 和 Json 进行数据交互【重点】
前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Json进行Ajax交互</title>
<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form>
<table align="center">
<caption>添加</caption>
<tr>
<td>姓名</td>
<td><input type="text" name="name" id="name"></td>
<td><input type="text" id="name2"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" id="age2"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</td>
<td><input type="text" id="gender2"></td>
</tr>
<tr>
<td>信息</td>
<td><input type="text" name="info" id="info"></td>
<td><input type="text" id="info2"></td>
</tr>
<tr>
<td align="center" colspan="3">
<input type="reset" value="重置">
<input type="button" value="提交" id="submit">
</td>
</tr>
</table>
</form>
</body>
<script>
// 提交按钮点击时触发
$("#submit").click(function () {
// 获取对应元素的值
var name = $("#name").val();
var age = $("#age").val();
var gender = $('input:radio:checked').val();
var info = $("#info").val();
// 存入JSON对象中
var data = {"name" : name, "age" : age, "gender" : gender, "info" : info};
// 发送ajax请求
$.ajax({
// 请求URL
url: "sendParam",
// 将JSON对象转为JSON字符串并存入JSON的键值对中
data : {'data' : JSON.stringify(data)},
// 响应成功
success: function(data){
// 获取JSON字符串
alert(data);
// 将JSON字符串转为JSON对象
var json = JSON.parse(data);
// 获取JSON对象的键对应的值并填充
$("#name2").val(json.name);
$("#age2").val(json.age);
$("#gender2").val(json.gender);
$("#info2").val(json.info);
}
})
})
</script>
</html>
后端代码
@WebServlet("/sendParam")
public class SendParamsServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 设置编码集
req.setCharacterEncoding("UTF8");
resp.setContentType("text/html; charset=UTF-8");
// 获取请求参数
String data = req.getParameter("data");
// 声明JackSon核心mapper对象
ObjectMapper mapper = new ObjectMapper();
// 将获取到的JSON字符串转为实体类对象
Student student = mapper.readValue(data, Student.class);
System.out.println(student);
// 将实体类对象转为JSON字符串
String string = mapper.writeValueAsString(student);
// 发送给前端
resp.getWriter().print(string);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
6404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
