jQuery AJAX
欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）
jQuery load() 方法
- load()方法通常用来从Web服务器上获取静态的数据文件
- load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
如果只需要加载test.html页面内的某些元素：
$("#resText").load("test.html .para");
注意，URL和选择器之间有一个空格
jQuery get() 和 post() 方法
1. $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(url,[data],[callback],[type])
url String 请求的HTML页的URL地址
data(可选) Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback(可选) Function 载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选) String 服务器端返回内容的样式，包括xml、html、script、json、text和_default
$(function(){
$("#send").click(function(){
$.get("url",
{
username : $("#username").val() ,
content : $("#content").val()
},
function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
});
});
2. $.post() 方法通过 HTTP POST 请求从服务器上请求数据。
$.post(url,[data],[callback],[type]);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
$.get()和$.post()方法是jQuery中的全局函数，而在此之前讲的load()是对jQuery对象进行操作的。
ajax() 方法
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post
$.ajax() 返回其创建的 XMLHttpRequest 对象
1.数据参数：
url： 请求的页面地址，默认值为当前页面地址
type: http请求类型 GET/POST
data: 键值对，来传递请求参数
async: 默认为true，异步请求，false为同步请求
timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为”application/x-www-form-urlencoded”。
该默认值适合大多数应用场合。
processData：要求为Boolean类型的参数，默认为true。
默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型”application/x-www-form-urlencoded”。
如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。
注：上面两个用在上传文件时，需要设置成false,并用（var formData = new FormData();）封装文件与内容。
cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
dataType: 服务器返回数据的数据类型。如果不指定，jQuery 自动根据HTTP 包MIME信息来智能判断
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。
注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
2.回调函数:
beforeSend: 发送请求之前调用，XMLHttpRequest对象为唯一参数，一般可在发送请求之前修改XMLHttpRequest对象，如添加自定义HTTP头。
function(XMLHttpRequest)
error: 请求失败时调用 参数有三个：XMLHttpRequset对象，错误信息，（可选）捕获的异常对象。
function(XMLHttpRequest, textStatus, errorThrown)
dataFilter: 在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。传递给 success 回调函数。
function(data, type){
//返回处理后的数据
return data;
}
success: 请求成功后的回调函数，参数有3个：根据 dataType 参数进行处理后的数据，描述状态的字符串，XMLHttpRequest对象。
function(data, textStatus)
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
complete: 请求完成后回调函数 (请求成功或失败之后均调用)。参数为XMLHttpRequest 对象和一个描述请求类型的字符串。
function(XMLHttpRequest, textStatus)
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), content:$("#content").val()},
dataType: "json",
beforeSend:function(){
//请求前的处理
},
success: function(data){
$('#resText').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<div class="comment"><h6>' + comment['username']
+ ':</h6><p class="para"' + comment['content']
+ '</p></div>';
});
$('#resText').html(html);
}，
complete:function(){
//请求完成的处理
},
error:function(){
//请求出错处理
}
});
});
});
