我会使用Node.js模拟服务器, 所以请先到官网下载Node.js
这个实例的完整代码及使用请到我的库中获取: AJAX-demo. 本文为了叙述方便利索只介绍核心代码
创建index.html
首先创建一个index.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>AJAX-demo</title>
</head>
<body>
<h1>这是AJAX-demo</h1>
<input id="button" type="button" value="点我后执行定义在main.js中的函数">
<script src="./main.js"></script>
</body>
</html>假设我们要向服务器请求这个index.html页面, 服务器会将此页面发送个浏览器作为响应.
浏览器会解析index.html页面, 当解析到script标签时, 它会再向服务其发送请求, 服务器根据src属性指向的地址返回相应的文件. 注意src指向的是资源的URL, 而不是文件
上面这句话是铺垫.
创建main.js
我们的main.j如下, 在main.js文件中定义函数, 这个函数会进行AJAX通信:
button.addEventListener('click', function(e) {
let xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(e) {
if (xhr.readyState === 4) {
//xhr.readyState为4表示请求完成(并不一定成功)
let string = xhr.responseText;
let object = JSON.parse(string)
console.log(object)
console.log("object: "+object)
console.log("object.people.name: "+object.people.name)
console.log(object.others['two'])
console.log("object.others['two']: "+object.others['two'])
console.log("object.others['two'].parents[0]: "+object.others['two'].parents[0])
}
}
xhr.open('GET', '/xxx', true)
xhr.send()
})监听按钮, 若按钮发生点击事件, 则发生AJAX通信
创建server.js
为了叙述我只介绍重要的部分, 完整的代码请去我的github库-AJAX-demo中获取
我们通常在输入如:www.example.com的网址时浏览器发送请求, 服务器发送index.html页面作为响应, 因此我们需要在后台加入下面的代码:
if(path === '/'){
//通常情况example.com 等同于example.com/
//而且example.com常获取的/目录下的index.html文件
let page = fs.readFileSync('./index.html', 'utf8') //读取index.html
response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(page) //将index.html返回给浏览器
response.end()
}因为index.html页面中含有script标签, 所以我们还要添加处理src地址的代码:
if (path === '/main.js') {
/*
注意if中的./main.js表示的是路径, 它是index.html中script标签的src属性. 而我们通过readFileSync读取的main.js是和index.js同一目录下的文件
*/
//如果我将srcipt标签的src属性设为main, if里的判断条件也改为 (path === 'main'), 结果是一样的, 还是会执行下面的代码
/*
浏览先发送请求, 浏览器接收到服务器返回的index.html并解析,
看到script标签则再次向服务器发送请求, 告诉我服务器我要scr属性指向的文件地址. 服务器在后台处理请求
*/
let js = fs.readFileSync('./main.js', 'utf8') //读取main.js文件
response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(js) //将main.js返回给浏览器
response.end()
}执行上面两段代码后, index.html及其引用的文件就全部加载完了
我们在main.js中监听按钮的点击事件, 若发生点击向服务器发送请求. 服务处理这个请求的代码如下:
if (path === '/xxx') {
response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(`
{
"people": {
"name": "helloyong",
"age": 20,
"sex": "man",
"isGay": false
},
"others": {
"one": {
"name": "bugyong",
"age": 21,
"sex": "woman",
"children": null
},
"two": {
"name": "stackyong",
"age": 22,
"parents": ["father", "mother"]
}
}
}
`) .
response.end()
}至此, 我们的server.js文件的核心代码编写完了. 剩下的都是一些边边角角落.
运行
再次提醒, 我们需要使用Node.js作为服务器.
在命令行下, 输入node server.js 8888的命令, 会出现如下字符:
监听 8888 成功
请在浏览器打开 http://localhost:8888这个字符是我们在server.js文件中设置. 为啥要使用node server.js 8888? 因为这个也是在server.js中设置的. 这个不是核心, 核心是理解AJAX通信.
此时不要关闭命令行窗口, 在浏览器中输入http://localhost:8888地址, 会看到如下页面:
打开控制台, 点击按钮, 我们可以在控制台中看见获取的信息:
