本帖最后由 逆风TO 于 2020-3-11 11:41 编辑
什么是 AJAX
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
实例用法
AJAX异步请求细分的话可以分为四种：
load()方法
$.get()方法
$.post()方法
$.ajax()方法
其实这四种方法，原理和实现都相差无几。具体实现请往下看吧。
1、AJAX load() 方法
load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
使用语法
[JavaScript] 纯文本查看 复制代码 $(selector).load(URL, data, callback);
【注意】
URL 必填项，请求加载的URL地址。
data 选填项，参数，请求时需要携带的参数，格式键 / 值对集合。
callback 选填项，load()方法执行完后回调方法。
使用案例（需要引入Jquery）
页面给出了一个按钮和一个div标签，点击按钮load数据内容显示到div中。代码如下：
[JavaScript] 纯文本查看 复制代码 <button class = "btn btn-success">AJAX load方法</button>
<div id = "loadText" ></div>
js代码
[JavaScript] 纯文本查看 复制代码 <script type="text/javascript">
function loadFun(){
//loadText显示返回数据的标签DOM
$("#loadText").load("loadText", {data: "请求携带的参数"}, function(responseTxt, statusTxt, xhr){
console.log(responseTxt);
console.log(statusTxt);
console.log(xhr);
})
}
</script>
【注】 load方法中第一个参数loadText是请求地址，第二{data: “请求携带的参数”}是携带的参数，第三个为请求完成后回调方法。请求地址必填，其他两个可以根据项目需求是否添加。
回调方法中三个参数分别为：
responseTxt - 请求返回的内容
statusTXT - 请求返回的状态
xhr - XMLHttpRequest 对象
loadText请求后台代码：
[JavaScript] 纯文本查看 复制代码 @RequestMapping(value = "/loadText")
public String loadText(String data) {
System.out.println("前台传递的参数" + data);
return "loadText";
}
返回的为loadText页面，代码如下(只需要body中的内容也可以)：[JavaScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
这是load过去的页面
</body>
</html>
点击按钮后效果（点击按钮后，请求的到的内容将显示在div中）：
浏览器控制台输出（请求结束后，回调方法的参数）
编辑器控制台输出（后台方法接收到的参数输出）
2、$.get() 方法[color=rgb(153, 153, 153) !important]$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
GET 基本上用于从服务器获得（取回）数据。GET 方法可能返回缓存数据。 [color=rgb(153, 153, 153) !important]使用语法[JavaScript] 纯文本查看 复制代码 $.get(URL, callback);[/font][/backcolor][/p]
【注意】
URL 必填项，请求加载的URL地址。
callback 选填项，$.get()方法执行完后回调方法。 使用实例
这里偷个懒 O(∩_∩)O哈哈~，页面代码还是用上面的load方法的，把点击按钮的方法改成$.get()方法了。代码如下： [JavaScript] 纯文本查看 复制代码 <script type="text/javascript">
function loadFun(){
$.get("loadText", function(data, status){
console.log(data);
console.log(status);
})
}
</script>
【注】 $.get()方法只能获取到请求后台返回的数据，不能直接显示在页面上，如果需要显示在页面上还是使用load方法吧（不嫌麻烦可以在回调函数中用JS处理）。其中loadText为请求地址，必填项，第二回调方法，选填。
回调方法中的参数：
data为请求返回的数据
status为请求状态
请求的后台代码和上面load方法的一样，点击按钮后，浏览器控制台输出如下：
3、$.post() 方法$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。 使用语法 [JavaScript] 纯文本查看 复制代码 $.post(URL, data, callback);
注意】
URL 必填项，请求加载的URL地址。
data 选填项，参数，请求时需要携带的参数，格式键 / 值对集合。
callback 选填项，$.post()方法执行完后回调方法。
使用实例
这里页面只改了点击按钮的方法，发送请求方法改成$.post()方法了。代码如下：
[JavaScript] 纯文本查看 复制代码 <script type="text/javascript">
function loadFun(){
$.post("loadText", {data: "请求携带的参数"}, function(data,status){
console.log(data);
console.log(status);
})
}
</script>
不难发现， $.post()方法在参数上和load()方法一样，但回调方法的参数又和 $.get()方法一样，这里就不用在解释了吧！直接来看一下效果吧（左边为浏览器控制台输出，右边为编辑器控制台输出）。
4、ajax() 方法
ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。上面的 $.post()和 $.get()方法底层都是ajax()方法。大多数情况直接使用 $.post()和 $.get()方法简单一些，如果需要操作不常用的选项，使用ajax()方法更灵活，属性设置多一些。
【注】 这里说一下 $.get()和 $.post()方法除了参数外的区别， $.get()方法请求携带的参数一般只能拼接在请求地址后面，安全性不是很高。 $.post()方法请求携带的参数不会显示在地址后面，所以安全性要高一点，一般推荐使用 post方法。
ajax()的简单使用案例
这里页面只改了点击按钮的方法，发送请求方法改成$.ajax()方法了。代码如下：
[JavaScript] 纯文本查看 复制代码 <script type="text/javascript">
function loadFun(){
$.ajax({
url: "loadText", //请求地址
type: "post", //请求方式，post/get
data: {data: "请求携带的参数"}, //请求携带参数
async: false, //设置请求是同步还是异步，默认为true异步
// 设置返回的数据类型，一般最多的设置为json，这里因为返回的是一个HTML文件，所以设置的为text文本。详细讲解请往下看
dataType:"text",
success: function(data){ //请求成功后的回调函数，data为返回的数据
console.log(data);
}
});
}
</script>
其中请求地址还是上面的请求地址，使用对应的后台方法也就一样了。其中属性这里只设置了部分，下方有ajax方法的全部属性，可以根据项目需求自行添加。下面是控制台输出的效果（左边为浏览器控制台输出，右边为编辑器控制台输出）。
| 
收藏
淘帖
踩
