使用原生js通过ajax实现服务器渲染的简单代码和个人改进

文章目录

前文提要
代码实现
- 主要参考
- 服务器渲染实现逻辑
- 网页呈现效果
代码分段讲解
- 提要
- html的body部分
- css部分
- js部分
- xhr.open函数
- AJAX-onreadystatechange事件
- function函数简写方法
- 附件功能：选中行高亮
代码全文

前文提要

本文仅做个人学习记录，如有错误，请包涵。

ES6是什么

function简写方法：笔记：ES6新特性-函数的简写（箭头函数）

代码实现

主要参考

主要参考视频：零基础入门前端｜经典案例之原生js获取服务器数据并渲染到页面中｜JavaScript教程
本文的主要代码也是来自这个主要参考视频。
次要学习视频：Ajax 是什么? 如何创建一个 Ajax？ - JavaScript前端Web工程师
可以通过第二个视频尝试一些新的改进方法。

服务器渲染实现逻辑

使用按钮触发点击事件，使用原生js通过ajax访问服务器，通过返回的状态码判断数据是否在服务器端全部具备，而后直接在服务器端渲染好html文件返回到浏览器端。

网页呈现效果

点击“获取数据”按钮之前：
在这里插入图片描述

点击“获取数据”按钮之后：
在这里插入图片描述

代码分段讲解

提要

ps：本文提供的代码没有html、css、js分离，如果能将代码分离成三部分，即做到结构、样式、脚本的分离，则更有利于项目的维护和代码的重用。

html的body部分

创建按钮提供“数据获取”事件的触发，创建表格提供表头，留下<tbody><\tbody>标签给js做数据补充。

  <button>
    获取数据
  </button>
  
  <table>
    <tr>
      <td>编号</td>
      <td>Login</td>
      <td>头像</td>
      <td>备注</td>
    </tr>
    <tbody id="myTbody">

    </tbody>
  </table>

css部分

css部分的代码都已经写好了注释，不再做讲解。

    /* 先选择所有元素，将margin和padding 置零*/
    * {
      margin: 0;
      padding: 0;
    }

    /* 设置table元素中的宽度，填充和，相邻单元格边框合并 */
    table {
      width: 700px;
      margin: 50px auto;
      border-collapse: collapse;
    }

    /* 设置每行的高度限制 */
    tr {
      height: 30px;
    }

    /* 设置单元格框线颜色-黑色、文本字体大小-20像素、文本格式-居中 */
    td {
      border: 1px solid #000;
      font-size: 20px;
      text-align: center;
    }

    /* 限制每张图片的高度，从而约束每行的大小 */
    img {
      height: 100px;
    }

js部分

下面做js部分的代码记录：

var btn = document.querySelector('button');
var myTbody = document.getElementById("myTbody");

分别通过选择器和id操作DOM获取元素
接着通过，浏览器内置的函数来和服务器进行网络通讯

var xhr = new XMLHttpRequest();//new 是小写

大体框架需要先写成这样，若是只写了open，但是缺少send函数，则获取不到数据，在console中不会看见返回的数据，也无法获取返回的状态码。

var xhr = new XMLHttpRequest();//new 是小写      
xhr.open('GET', 'https://api.github.com/users',true);//true是选择异步，false是同步
      //open 可以写成本地文件 'text.txt'代替'https://api.github.com/users'即可
xhr.send();//缺失该代码会导致获取不到数据

xhr.open函数

open函数是生成一个准备发送的请求，第一个参数是选择’get’方式还是’post’，第二个参数是请求面向的地址，第三个参数是选择异步还是同步方式
关于xhr.open的理解链接：AJAX - 向服务器发送请求
异步不需要等待响应就可以发送下一条请求，填表时填完一行出现这行的数据符不符合标准也是使用的异步方式，否则要全填完才能检查是否出错，出错后全部都得重填。
同步、异步方式：什么是同步请求和异步请求？
当状态码发生改变的时候会触发事件，我们需要为这一事件附加函数，也就是下面的function。4代表数据完全接收，200这个状态码代表

 xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);//拿到了数据，是字符串数据类型
          }
}

AJAX-onreadystatechange事件

概念解析图片，上文的xhr.readyState == 4 && xhr.status == 200这么写也是如此
在这里插入图片描述
学习链接：AJAX - onreadystatechange 事件

function函数简写方法

上述代码，在ES6中还可以改写为

 xhr.onreadystatechange =  ()=>{
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);//拿到了数据，是字符串数据类型
          }
}

但不推荐使用这种写法，因为SE6还没有被大规模应用（说不定就有一些老古董用不了）

var data = xhr.responseText;
data = JSON.parse(data);
// console.log(data);//变成了字符串数组
var html = '';//不写空串则是，undefined数据类型，会输出undefined
for (var i = 0; i < data.length; i++) {
  var result = data[i];
  html += "<tr>";
  //此处可以使用es6的模版字符串的方式进行改写，`${}`
  html += "<td>" + result.id + "</td><td>" + result.login + "</td><td><img src=' " + result.avatar_url + "'/></td><td>" + result.site_admin + "</td>"
  html += "</tr>";
}
myTbody.innerHTML = html;

将服务器返回的字符串数据转换成json对象，然后再塞入html文件中

附件功能：选中行高亮

下述代码则是附加功能，当鼠标悬浮在改行的时候显示高亮，离开的时候恢复到原来的颜色：

var trs = document.querySelectorAll('tr');
  for (var i = 0; i < trs.length; i++) {
  trs[i].onmouseover = function () {
    //逐行清除背景颜色
    for (var i = 0; i < trs.length; i++) {
      trs[i].style.backgroundColor = "";
    }
    //给当前行的元素添加高亮的背景颜色
    this.style.backgroundColor = "#eee";
  }
}

代码全文

代码（无实现图片渲染）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>原生js服务器渲染</title>
  <style type="text/css">
    /* 先选择所有元素，将margin和padding 置零*/
    * {
      margin: 0;
      padding: 0;
    }

    /* 设置table元素中的宽度，填充和，相邻单元格边框合并 */
    table {
      width: 700px;
      margin: 50px auto;
      border-collapse: collapse;
    }

    /* 设置每行的高度限制 */
    tr {
      height: 30px;
    }

    /* 设置单元格框线颜色-黑色、文本字体大小-20像素、文本格式-居中 */
    td {
      border: 1px solid #000;
      font-size: 20px;
      text-align: center;
    }

    /* 限制每张图片的高度，从而约束每行的大小 */
    img {
      height: 100px;
    }
  </style>
</head>

<body>
  <button>
    获取数据
  </button>
  <table>
    <tr>
      <td>编号</td>
      <td>Login</td>
      <td>头像</td>
      <td>备注</td>
    </tr>
    <tbody id="myTbody">

    </tbody>
  </table>
  <script type="text/javascript">
    var btn = document.querySelector('button');
    var myTbody = document.getElementById("myTbody");
    btn.onclick = function () {
      // alert('ok')//测试
      // 发送ajax
      var xhr = new XMLHttpRequest();//new 是小写
      xhr.open('GET', 'https://api.github.com/users',true);//true是选择异步，false是同步
      //open 可以写成本地文件 'text.txt'代替'https://api.github.com/users'即可
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log(xhr.responseText);//拿到了数据，是字符串数据类型
          //需要将字符串转为js对象
          var data = xhr.responseText;
          data = JSON.parse(data);
          // console.log(data);//变成了字符串数组
          var html = '';//不写空串则是，undefined数据类型，会输出undefined
          for (var i = 0; i < data.length; i++) {
            var result = data[i];
            html += "<tr>";
            //此处可以使用es6的模版字符串的方式进行改写，`${}`
            html += "<td>" + result.id + "</td><td>" + result.login + "</td><td><img src=' " + result.avatar_url + "'/></td><td>" + result.site_admin + "</td>"
            html += "</tr>";
          }
          myTbody.innerHTML = html;
          var trs = document.querySelectorAll('tr');
          for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {
              //逐行清除背景颜色
              for (var i = 0; i < trs.length; i++) {
                trs[i].style.backgroundColor = "";
              }
              //给当前行的元素添加高亮的背景颜色
              this.style.backgroundColor = "#eee";
            }
          }
        }
        /*
        可以将 function(a,b)改为(a,b)=>
        */
      }//readystatement发生改变的时候触发事件，激活函数
      xhr.send();//缺失该代码会导致获取不到数据
    }
  </script>

</body>

</html>