ajax

一、ajax 流程原理

ajax,即在不重新加载整个网页的情况下，对网页的某部分进行更新。

下面演示ajax 的实现原理

配置：

cd ajax

参考：http://www.expressjs.com.cn/starter/generator.html

express --view=ejs myapp
cd myapp
npm install

完整的ajax流程：

1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

2、准备发送

xhr.open('get','./01check.js?username='+uname+'&password='+pw,true);

3、执行发送动作

xhr.send(null);

4、监听response 回调函数

onreadystatechange 事件:每当 readyState 改变时，就会触发 onreadystatechange 事件。

index.js 路由

......
router.get('/apI/One',(req,res,next)=>{
  res.json({
      status:200,result:'this is one.....'
  })
});


/* GET home page. */
router.get('/one',function(req,next) {
  res.render('index1',{ title: 'Express' });
})
...........

index.ejs:

<body>
<button id="send">发送1个请求</button>
<script>
  var btn = document.getElementById('send');
  btn.addEventListener('click',function () {
     // 使用原生的ajax 技术，发送一个网络请求
      // 1.创建XMLHttpRequest对象
      var xhr;
      if(window.XMLHttpRequest){
          xhr = new XMLHttpRequest();
      }else {
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
      }

      // 2.准备发送
      /*
       参数1: 请求方式 (get/post)
       参数2: 请求url
       参数3: 是否异步
    */
      xhr.open('get','http://localhost:3000/apI/One',true);

      // 3. 发送
    xhr.send();

      // 4. 监听服务器的响应
      // 一旦服务器响应回来之后,就会执行这个函数
      xhr.onreadystatechange = function () {
          console.log(xhr.readyState);
          if(xhr.readyState === 4){  // 代表服务器已经给了响应,不代表响应成功
              if(xhr.status === 200){
                  console.log(xhr.response);
              }
          }
      }

  });
</script>
</body>

// 结果：
/*
2
3
4
{"status":200,"result":"this is one....."}
*/

index.js 路由：

router.get('/api/two',next)=>{
    console.log(req.query);
    res.json({
        status:200,result:'this is two.....'
    })
});


router.get('/two',next) {
    res.render('index2',{ title: 'Express' });
});

index2.ejs

<body>
<input id="account" type="text" name="account">
<input id="pwd" type="text" name="pwd">
<button id="send">发送一个请求</button>
<script>
    window.onload=function () {

        var btn = document.getElementById('send');
        btn.onclick = function () {
            // 使用原生的ajax 技术，发送一个网络请求
            // 1.创建XMLHttpRequest对象
            var xhr;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

            // 从页面获取需要传递的数据
            var userName = document.getElementById('account').value;
            var pwd = document.getElementById('pwd').value;

            // 2.准备发送
            /*
             参数1: 请求方式 (get/post)
             参数2: 请求url
             参数3: 是否异步
          */
            // 后面跟一个随机数值，保证每次发送ajax请求，都是真的发然后从响应中获取最新数据，而不是从缓存中取得
            xhr.open('get','http://localhost:3000/api/two?account=' + account + '&pwd=' + pwd + '&random=' + getRandomstr(),true);

            // 3. 发送
            xhr.send();

            // 4. 监听服务器的响应
            // 一旦服务器响应回来之后,就会执行这个函数
            xhr.onreadystatechange = function () {
                // 5. 处理响应的数据 (对方说话)
                console.log(xhr.readyState);
                if(xhr.readyState === 4){  // 代表服务器已经给了响应,不代表响应成功
                    if(xhr.status === 200){
                        console.log(xhr.response);
                    }
                }
            }
        }
    }


    function getRandomstr() {
        return Math.random() + (new Date().getTime())
    }
</script>

</body>

前端打印：

2
3
4
{"status":200,"result":"this is two....."}

服务端打印：

{ account: '[object HTMLInputElement]',pwd: '123456',random: '1547356096169.2708' }
GET /api/two?account=[object%20HTMLInputElement]&pwd=123456&random=1547356096169.2708 200 8.824 ms - 42

一、ajax 流程原理

相关推荐