Ajax cases of practical operation

Demo1

server

router.get('/api/one', function (req, res, next) {
        res.end('hello, itLike!');
});

Client

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    window.onload = function () {
      var btn = document.getElementById('send');
      btn.onclick = function () {
        // 使用ajax技术, 发送一个网络请求
        // 1. 创建一个请求对象 (找到一个电话)
        var xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        }else {
          xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        // 2. 设置请求的目标url (输入电话号码)
        // 参数1: 请求方式
        // 参数2: 请求的url
        // 参数3: 是否是异步
        xhr.open('get', 'http://localhost:3000/api/one', true);

        // 3. 发送请求 (拨出电话)
        xhr.send();

        // 4. 监听服务器响应 (等待电话接通)
        xhr.onreadystatechange = function () {
          // 一旦服务器响应回来之后, 就会执行这个函数;
          // 5. 处理响应数据(对方说话)
          //  console.log(xhr.readyState);
          if (xhr.readyState === 4) {
            // 意味着服务器,已经给了响应
            // 不代表, 服务器响应正确
            console.log(xhr.status);
            // 判断, 服务器给的数据是否正常
            var status = xhr.status;
            if (status === 200) {
              console.log(xhr.response);
            }
          }
        }
      }
    }
  </script>
</head>
<body>
<button id="send">发送一个请求</button>
</body>
</html>

Demo2

server

router.get('/api/two', function (req, res, next) {
   console.log(req.query);
   res.end('ccc');
});

Client

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById('send');
            btn.onclick = function () {
                // 使用ajaxj技术, 发送一个网络请求
                // 1. 创建一个请求对象 (找到一个电话)
                var xhr;
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }

                // 拿到本地需要传送的数据
                var account = document.getElementById('account').value;
                var pwd = document.getElementById('pwd').value;

                // 注意: 浏览器缓存
                // IE
                // 认定, 如果你发送的是get请求, 而且, 连续发送多次,都是同一个url地址(包含了参数拼接), IE, 会直接, 使用本地缓存, 给你返回, 不会再次发送一个新的请求
                // 解决方案: 保证, 每次发送的请求url地址都不一样
                // 额外的再加一个参数, 而且, 这个参数的值, 每次都不一样


                // 2. 设置请求的目标url (输入电话号码)
                // 参数1: 请求方式
                // 参数2: 请求的url
                // 参数3: 是否是异步
                xhr.open('get', 'http://localhost:3000/api/two?account=' + account + '&pwd=' + pwd + '&random=' + getRandomStr(), true);

                // 3. 发送请求 (拨出电话)
                xhr.send();

                // 4. 监听服务器响应 (等待电话接通)
                xhr.onreadystatechange = function () {
                    // 一旦服务器响应回来之后, 就会执行这个函数;
                    // 5. 处理响应数据(对方说话)
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        console.log(xhr.responseText);
                    }
                }
            }
        }

        function getRandomStr() {
            return Math.random() + (new Date()).getTime();
        }
    </script>
</head>
<body>
    <input id="account" type="text" name="account">
    <input id="pwd" type="text" name="pwd">
    <button id="send">发送一个请求</button>
</body>
</html>

Demo3: get request Package

Demo4: optimization. Long setting request URI encoding and

Demo5: Simple Post

Demo6: GET and POST package

Published 227 original articles · won praise 118 · views 10000 +

Guess you like

Origin blog.csdn.net/KaiSarH/article/details/104357313