Ajax入门
2017-08-19 本文已影响73人
baiying
Ajax(Asynchronous Javascript +XML)这一项技术能够向服务器请求额外的数据而无需卸载页面.
Ajax的核心是XMLHttpRequest,简称XHR,XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,能够以异步的方式从服务器获得更多信息.
XHR对象
- 初始化实例;
var xhr = new XMLHttpRequest(); - 启动一个请求
open():
这是xhr第一个要调用的方法,接受三个参数,请求方法,请求路径,是否异步发送的布尔值,open不会真正发送请求,只是启动一个请求以备发送
xhr.open('get','example.php',true) - 发送请求:
send():
接受一个参数,即作为请求主体发送的数据,不需要发送数据则传入null
xhr.send(null);
服务器响应后,xhr对象中会自动填充相关属性 -
responseText:作为响应主体被返回的文本 -
responseXML:如果响应数据的内容类型是text/xml或者application/xml,这个属性将会保存响应的XML DOM 文档 -
status:响应的http状态 -
statusText:http状态的说明
对于同步请求只检查状态码即可,但对于异步请求,我们需要检测XHR的readyState属性,该属性表示了请求响应过程中的活动阶段,取值如下 -
0:未初始化,尚未调用open()方法 -
1:启动,已经调用open()方法,尚未调用send()方法 -
2:发送,已经调用send()方法,但未收到响应 -
3:接收,已经接收到部分响应数据 -
4:完成,已经接收到所有的响应数据,可以在客户端使用了
readyState的值每变化一次就会触发readystatechange事件
写个小demo练习练习吧
//index.html
<script src="compare.js" type="text/javascript"></script>
<body>
<button id="btn1">获取数据</button>
<div id="progess"></div>
<div id="eles">
</div>
</body>
//compare.js
window.onload = function () {
var btn = document.getElementById('btn1');
btn.onclick = getData;
};
function getData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
document.getElementById('eles').innerHTML = xhr.responseText;
}
};
xhr.open('get', 'http://localhost:3000/', true);
xhr.send(null);
}
//server.js
var http = require('http');
var fs = require('fs');
http.createServer(function (req, res) {
if (req.url == '/' && req.method == 'GET') {
res.writeHead(200, {
"Content-Type": "text/plain",
"Access-Control-Allow-Origin": "http://localhost:63342"
});
fs.readFile('info.txt', function (err, data) {
res.write(data);
res.end();
});
}
}).listen(3000);
//info.txt
hello ,i am baiying . It is a nice day.
打开html文件
Paste_Image.png
点击按钮
Paste_Image.png
一个简单的ajax请求文件内容显示到页面上的demo就完成啦
