Ajax
Ajax 是Asynchronous Javascript + XML的简写,这一技术可以向服务器请求额外数据而无需卸载页面。而Ajax的核心就是XMLHttpRequest对象
XMLHttpRequest 工作原理
传统的web前端与后端的交互中,浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。
当我们使用AJAX之后,浏览器是先把请求发送到XMLHttpRequest异步对象之中,异步对象对请求进行封装,然后再与发送给服务器。服务器并不是以转发的方式响应,而是以流的方式把数据返回给浏览器
XMLHttpRequest异步对象会不停监听服务器状态的变化,得到服务器返回的数据,就写到浏览器上【因为不是转发的方式,所以是无刷新就能够获取服务器端的数据】
XHR 用法
var xhr =new XMLHttpRequest(); //这个对低版本的浏览器不支持
xhr.open('get', 'data', true);
// 第一个参数是,请求类型 ,
//第二参数是url,这里是相对路径,相对当前页面,也可以是绝对路径
//第三个参数是说明是否异步
// open方法不会真正的发送请求,只是准备发送
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log('xhr status == 4: response = '+xhr.response);
p1.innerHTML = JSON.parse(xhr.response)['time'];
}
}
// onreadystatechange 方法是当readState属性发生改变时触发, response属性是存放响应的内容
// readyState 属性
// 0 ----- 尚未初始化,未调用open()
// 1 ----- 启动,已经调用open(), 但未调用send()
// 2 ----- 发送,已经调用send()
// 3 ----- 接受,已经接受到部分相应数据
// 4 ----- 完成,表示已经全部接受完毕
xhr.send(null);
// send中的参数是请求主题要发送的数据,这里是get 因此设为null
代码
服务器
先在本地跑一个服务器
sever.js
var http = require('http');
var fs = require('fs');
var url = require('url');
//创建服务器
http.createServer(function (request, response) {
//解析请求,包括文件名
var pathname = url.parse(request.url).pathname;
//输出请求的文件名
console.log("Request for " + pathname + " received.");
//从文件系统中都去请求的文件内容
fs.readFile(pathname.substr(1), function (err, data) {
if (err) {
// 当找不到文件时返回一个当前的时间。
let data = new Date();
response.writeHead(200, { 'Content-Type': 'application/json' });
response.write(JSON.stringify({'time':data.toLocaleDateString()}))
}
else {
//HTTP 状态码 200 : OK
//Content Type:text/plain
response.writeHead(200, { 'Content-Type': 'text/html' });
//写会相应内容
response.write(data.toString());
}
//发送响应数据
response.end();
});
}).listen(8081);
console.log('Server running at http://127.0.0.1:8081/');
html 页面
在同一个文件夹下新建一个html 文件,用于发送请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8081</title>
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<p>这个是http://127.0.0.1:8081/index.html</p>
<input type="button" id='btn' value = "获取时间"">
<p id ='p1'></p>
</body>
<script>
var btn = document.getElementById('btn');
var p1 = document.querySelector('#p1');
function getTime(){
var xhr =new XMLHttpRequest();
xhr.open('get', 'data', true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
console.log('xhr status == 4: response = '+xhr.response);
p1.innerHTML = JSON.parse(xhr.response)['time'];
}
}
xhr.send(null);
console.log('async');
}
btn.onclick =getTime;
</script>
</html>
效果
点击之后