AJAX基本用法-基础代码解析（1）- 数据传送过程

最新推荐文章于 2024-10-01 21:18:10 发布

弓长张帆

最新推荐文章于 2024-10-01 21:18:10 发布

阅读量901

点赞数

文章标签： AJAX

本文链接：https://blog.csdn.net/builder_fan/article/details/80267129

版权

首先讲一下路由文件dome1.js和页面文件dome1.html如何联系起来的，先上代码（一般注释都在代码中）：

public文件下dome1.html代码：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a href="/d1?name=leo">leo</a>
    <a href="/d1?name=zeng">zeng</a>
    <a href="/d1?name=yu">yu</a>
    <ul>
      <script type="text/javascript">
        const ul = document.querySelector('ul');
        const alist = document.querySelectorAll('a');
        alist.forEach(a=>a.addEventListener('click',function (event) {
          //终止默认，这里的默认是a标签的跳转
          event.preventDefault();
          const href = event.target.getAttribute('href');          
          // console.log(typeof(href));//string类型
          var xhr = new XMLHttpRequest();
          //新开一个线程
          xhr.open('get',href);
          //这里是为了让浏览器前端知道
          //调用句柄，监听状态改变时，内部调用句柄函数，同时为了得到最后li和ul的返回值
          xhr.onreadystatechange = function () {
            //http请求相应的结果码,200表示正常成功，500表示失败有问题
            // console.log(xhr.status);
            //当结果为4的时候表示返回成功，
            // console.log(xhr.readyState);
            // console.log('--------------');

            //由上得
            if (xhr.status == 200 && xhr.readyState == 4) {
              const li = document.createElement('li');
              // console.log(typeof(xmlh.response));//string类型
              //所以  li.innerText = xhr.responseText; 也可以             
              li.innerText = xhr.response;
              ul.appendChild(li);
            }
          }
          //发送给服务器
          xhr.send();
        }))
      </script>
    </ul>
  </body>
</html>

routes文件夹下dome1.js代码：

const router = require('express').Router();

//?name=xxx通过req.query.name拿到xxx
router.get('/',function (req,res) {
  res.send(req.query.name + '这里是测试语句');
})

module.exports = router;

两个文件的联系重点是html文件中的xhr.open()

//新开一个线程
          xhr.open('get',href);

open()里面两个属性，第一个是路由方法，要与js文件中router.get(...)这里的get一致，一般都为get；第二个属性是路径，这里的路径href是由

const href = event.target.getAttribute('href');

这里得到的a标签的路径（字符串类型），把得到的路径字符串传入js文件中，req.query.name会解析路径然后得到相应的值，req.query.name 得到路径字符串中 "?name=" 这后面的值，得到值以后再通过 router.get('/',function(...))中的 '/'(表示根文件) ，作为xhr.open('get',href)的返回值返回，然后继续往下运行。

PS: xhr.open('get',href,true)，里面还有一个true/false属性，表示异步或同步操作

第二讲一下数据的传输过程和运行顺序，下面代码进行简化，基础按上面代码：

js部分：

        //新开一个线程,得到js路由文件中的res返回值
        xhr.open('get',href);
        console.log('1');//-----------得1
        console.log(xhr.response+'2');//-----------得2
        xhr.onreadystatechange = function () {
          if (xhr.status == 200 && xhr.readyState == 4) {
            const li = document.createElement('li');
            //最后进入xhr.onreadystatechange中xhr.response得到值，
            //xhr.onreadystatechange外无xhr.response
            console.log(xhr.response + '3');//-------------得xhr.response值+3
            li.innerText = xhr.response;
            ul.appendChild(li);
          }
        }
        //运行xhr.send()发送open()中的get请求给服务器
        console.log('4');//-------------得4
        xhr.send();

页面显示结果：

结合代码部分，顺序是xhr.open('get',href);—>(console.log(xhr.response+'2');//得2,表示xhr.onreadystatechange外部无xhr.response)—>xhr.send();—>xhr.onreadystatechange.

文字解析顺序是：xhr.open('get',href);//新开一个线程,得到js路由文件中的res返回值——>xhr.send();//运行xhr.send()发送http请求给服务器——>最后运行xhr.onreadystatechange，xhr.response得到值，xhr.onreadystatechange外无xhr.response.

PS: XMLHttpRequest.send():发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。更多关于send()的使用，参考：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/send