ajax异步请求
原生ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
XMLHttpRequest 是 AJAX 的基础，XMLHttpRequest 对象用于在后台与服务器交换数据
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
向服务器发送请求使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用
然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST比 GET 更稳定也更可靠
<html>
<head>
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
};
}
xmlhttp.open("GET", "text.txt", true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
text.txt是我建立在同一文件下的文本，文本里是一句话“This is ajax test!!!”
POST 请求
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
url - 服务器上的文件
xmlhttp.open("GET","ajax_test.asp",true);
文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
xmlhttp.open("GET","ajax_test.asp",true);
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
即无需线程等待，可以继续执行其他脚本
Async = true
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
Async = false
不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
服务器响应
为了获取服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
- responseText //获得字符串形式的响应数据
- responseXML //获得获得 XML 形式的响应数据
responseText 属性返回字符串形式的响应：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
举例
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
AJAX - onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务
每当 readyState 改变时，就会触发 onreadystatechange 事件
readyState 属性存有 XMLHttpRequest 的状态信息
下面是 XMLHttpRequest 对象的三个重要的属性：
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//function
}
}
onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化
使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数
如果网站上存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数
该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
jQuery ajax
jQuery load() 方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合
可选的 callback 参数是 load() 方法完成后所执行的函数名称
<!DOCTYPE html>
<html>
<head>
<script src="js.js/jquery-3.2.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('text.txt');
})
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
</html>
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数，回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含XMLHttpRequest 对象
举个例子，当load()方法成功，则弹出外部内容加载成功，否则弹出错误，当点击确定后完成内容更换
<!DOCTYPE html>
<html>
<head>
<script src="js.js/jquery-3.2.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("text.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div>
<button>获得外部内容</button>
</body>
</html>
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL
可选的 callback 参数是请求成功后所执行的函数名
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
<!DOCTYPE html>
<html>
<head>
<script src="js.js/jquery-3.2.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("demo.asp",function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>
</body>
</html>
demo.asp文件里有一句话：
<%
response.write("This is some text from an external ASP file.")
%>
$.get() 的第一个参数是我们希望请求的 URL（“demo.asp”）
第二个参数是回调函数，第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL
可选的 data 参数规定连同请求发送的数据
可选的 callback 参数是请求成功后所执行的函数名
<!DOCTYPE html>
<html>
<head>
<script src="js.js/jquery-3.2.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("demo.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body>
<button>向页面发送 HTTP POST 请求，并获得返回的结果</button>
</body>
</html>
$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.asp”)
“demo_test_post.asp” 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
jQuery ajax - ajax() 方法
ajax() 方法通过 HTTP 请求加载远程数据
$.ajax() 返回其创建的 XMLHttpRequest 对象
jQuery.ajax([settings])
async
类型：Boolean
默认值: true，默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行
beforeSend(XHR)
类型：Function
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头
XMLHttpRequest 对象是唯一的参数
这是一个 Ajax 事件，如果返回 false 可以取消本次 ajax 请求
cache
类型：Boolean
默认值: true，dataType 为 script 和 jsonp 时默认为 false
设置为 false 将不缓存此页面
complete(XHR, TS)
类型：Function
请求完成后回调函数 (请求成功或失败之后均调用)
参数： XMLHttpRequest 对象和一个描述请求类型的字符串
这是一个 Ajax 事件
contentType
类型：String
默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）
context
类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）
比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
意思就是制定了context后，$(this)里的this就是context里制定的，也就是success回调函数要作用的上下文
data
类型：String
发送到服务器的数据，将自动转换为请求字符串格式
GET 请求中将附加在 URL 后，查看 processData 选项说明以禁止此自动转换
必须为 Key/Value 格式，如果为数组，jQuery 将自动为不同值对应同一个名称，如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'
dataType
类型：String
预期服务器返回的数据类型，如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数
可用值:
- xml： 返回 XML 文档，可用 jQuery 处理
- html： 返回纯文本 HTML 信息，包含的 script标签会在插入 dom 时执行
- script：返回纯文本 JavaScript 代码，不会自动缓存结果，除非设置了 "cache"参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
- jso： 返回 JSON 数据
- json：JSONP 格式，使用 JSONP 形式调用函数时，如
"myurl?callback=?"jQuery 将自动替换 ? 为正确的函数名，以执行回调函数 - text： 返回纯文本字符串
error
类型：Function
默认值： 自动判断 (xml 或 html)，请求失败时调用此函数
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”,，“error”,，“notmodified” 和 “parsererror”
举例：
<html>
<head>
<title>JQuery AJAX</title>
</head>
<body>
<div id="result">before ajax</div>
<button>Click me</button>
</body>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').on('click', function() {
$.ajax({
url: 'http://api.joind.in/v2.1/talks/10889',
data: {
format: 'json'
},
error: function() {
},
dataType: 'jsonp',
success: function(data) {
console.log('a');
},
async: false,
type: 'GET'
});
console.log('b');
});
});
</script>
</html>
a延迟于b输出
540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
