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输出