使用Ajax与服务端进行数据的交互（附案例）

先来说说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了吗？