纸帆|ZevenFang

我们终其一生寻找的无非是那个甘愿为你停下脚步,为你驻足的人。

0%

使用 XMLHttpRequest 发送 Ajax

XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。 ——from MDN

简单的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
Make a request
</span>
<script type="text/javascript">
(function() {
var httpRequest;
document.getElementById("ajaxButton").onclick = function() { makeRequest('test.html'); };

function makeRequest(url) {
httpRequest = new XMLHttpRequest();

if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', url);
httpRequest.send();
}

function alertContents() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
})();
</script>

简易版本:

1
2
3
4
5
6
7
8
9
10
11
function ajax(url, type, success, error) {
var http = new XMLHttpRequest();
http.onreadystatechange = function () {
if (http.readyState === XMLHttpRequest.DONE) {
if (http.status === 200) success && success(http.responseText);
else error && error();
}
};
http.open(type, url);
http.send();
}