先来说说Ajax是什么。官方解释：Ajax，是Asynchronous JavaScript + XML的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。说白了，就是一种和服务端进行数据交互的方式。
一、两个重要部分
- Ajax四部曲
//我们使用函数式编程，先封装一个Ajax
ajax()
var xhr
function ajax(){
//第一步：创建一个Ajax
xhr=new XMLHttpRequest()
//第二步：请求信息，分为请求方式和地址
xhr.open("POST","http:/10.20.159.134:4001")
//第三步：数据完成加载后执行函数
xhr.addEventListener("load",loadHandler)
//第四步：发送信息给服务端，如果使用的是POST的请求方式则需要在这里发送，如果是GET的请求方式，则直接在地址后面携带信息
xhr.send("你要发送的数据")
}
function loadHandler(){
console.log(xhr.response)//打印从服务端接受的数据
}
- 搭建服务器
//创建协议
var http = require("http");
//同样也是固定写法
var querystring = require("querystring");
//分别是：前端传送过来的数据、请求头、响应头
var data, req, res;
//创建服务
var server = http.createServer(creatHandler);
//开启监听，如果服务器成功启动，则会在终端输出"服务开启"
server.listen(4001, "10.20.159.134", console.log("服务开启"));
//获取请求头和响应头，给请求头添加相应事件
function creatHandler(_req, _res) {
req = _req;
res = _res;
req.on("data", dataHandler);
req.on("end", endHandler);
}
//接收前端数据
function dataHandler(_data) {
data = String(_data);
}
//处理数据
function endHandler() {
//写入头部
res.writeHead(200, {
"content-type": "text/html;charset=utf-8",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*"
});
//判断请求类型、转换数据格式
var obj;
if (req.method.toLowerCase() === "get") {
if (req.url.indexOf("?") > -1) {
//获取地址后面携带的数据
obj = querystring.parse(req.url.split("?")[1]);
}
} else if (req.method.toLowerCase() === "post") {
try {
//把数据转换为JSON格式
obj = JSON.parse(data);
} catch (e) {
//把JSON格式转化为字符串
obj = querystring.parse(data);
}
} else {
res.end();
return;
}
//发送数据给前端
res.write(data);
res.end();
}
- 原理及实现
1.我们先使用 xhr.send("数据")，把获取到的数据发送给服务器；
2.在服务器中，req.on("data", dataHandler)，是用来接收前端发送过来的数据的；
3.经过一系列的数据处理，再利用res.write(data)，把数据发送回前端；
4.在前端使用console.log(xhr.response)，可以打印从服务端接受的数据。
二、实际开发中的应用
以电商网站唯品会为例，来看看有哪些功能可以使用这项技术来实现
-
注册和登录页面的数据提交：我们进行账号的注册时，输入的数据会在后台进行提交，并且进行匹配与存储，登录时会取出后台数据反馈给页面，这样就可以进行信息的验证和保存。
表单验证.png
-
动态生成商品列表：大多电商网站的商品列表都非常的长，并且还会实时进行数据刷新，如果写成静态页面则工程量非常巨大，这时候我们就应该考虑以动态生成的方式把数据渲染到页面，其中向服务端请求数据那一环就可以用Ajax完成。
商品列表.png
-
商品详情页：不知道你有没有发现，电商网站中每个商品详情页的格式都是一样的，只是他们的图片和文字，也就是数据不一样，因为这都是提前写好的模板，只要分别对他们进行数据的填充就好，同样，请求数据用的也是Ajax的方式，这样就完成了数据的获取。
-
当你选好商品的款式和数量后，点击加入购物车，你的商品数据也会传送到后台，这样也就完成了数据的传送。
商品详情.png
-
购物车信息：完成上面的步骤后，当你跳转到购物车页面，页面会自动向后台请求你之前加入进来的数据，也就是你选好的商品信息，进行一个数据渲染，这样也是完成了一次数据的获取。
-
当商品被删除、结算、换尺码，或者清空购物车，购物车对应的数据也会被改变，这是利用了Ajax向后台发送信息，服务端接收到相应的信息之后会对数据进行调整，再把调整了的数据发回给前端，前端再次进行页面渲染，这样就形成了你所看到的购物车增删改查功能。
购物车.png
😊你学fei了吗？
网友评论