Ajax入门

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就完成啦

Ajax入门

XHR对象

推荐阅读更多精彩内容