搭建服务器
第一步:安装
首先我们需要安装node.js,下载地址:https://nodejs.org/en/
安装完成之后我们可以通过cmd命令来检测是否安装成功,如图:
出现上图结果,则表示安装成功,如果出现错误,可能是环境变量没有配置成功,可以通过-我的电脑属性里的高级系统设置来配置。
第二步:搭建
我们可以通过Visual Studio Code来编写一段js代码作为我们的服务器源码,代码如下:
// 返回 hello world
var http=require('http');
var server=http.createServer(function(request,response){
console.log("接收到请求.....");
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader("Content-type","text/html;charset=utf8");
response.end('你好');
});
//端口号 9000
server.listen(9000,function(err){
if(!err){
console.log('server is running on 9000');
}
});
然后在node.js中运行这段代码:
注:在操作过程中运行环境不能关闭。
发送ajax请求
第一步:创建
同样的我们利用Visual Studio Code创建一段html代码用来请求数据:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>请求数据</button>
<script>
var bnt = document.querySelector("button");
bnt.onclick = function () {
// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()
// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', 'http://localhost:9000')
// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)
// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
if (this.readyState === 4&&this.status==200) {
// 通过 xhr 的 responseText 获取到响应的响应体
console.log(xhr.responseText)
}
}
}
</script>
</body>
</html>
第二步:发送ajax请求
我们在网页中运行这段html代码,并点击网页中的按钮:
可以看到控制台成功收到了服务器传来的数据。