Node.js学习请求发送

本文介绍: AJAX = 异步 Jav aSc rip t 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。…

AJAX = 异步 Ja v aSc rip t 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

学习Aja x对于前端页面的逻辑优化与用户体验感的提高有很大的影响，学习Ajax我们一般会基于简单的框架 express在node.js 技术里使用，去node.js 官方网站下载合适的node.js包之后，在D盘自己创建一个文件夹（最好别用中文创建），之后进到文件夹的最底层执行 cmd 命令：npm init –yes 对node.js进行初始化，之后安装 express 框架用npm i express 。这样我们进行Ajax测试的基本环境就搭建好了。

Ja v aSc rip t中可以 通过以下方式 绑定某个HTML标签：

绑定按钮标签：

  const button =  document.getElementsByTagName('button')[0];

绑定 div 标签：

&lt;div id="result"&gt;&lt;/div&gt;
<script&gt;
    const result = document.getElementById("result"); 
</script&gt;

ajax 核心 对象 xmlHttpReque st的请求 发送与收取响应 结果四部曲：

                // 1.创建ajax测试对象
                const xhr = new XMLHttpRequest();
                // 2.初始化，设置请求方法与url
                xhr.open('GET','http://192.168.100.216:8080/server');
                // 3.发送
                xhr.send();
                // 4.事件绑定 处理服务端返回的结果
                // on 在...时 
                // readystate 状态 0（检测请求）,1（open）,2(send),3(返回部分结果),4（返回所有结果）
                // change 改变时触发
                xhr.onreadystatechange = function(){
                    // 应该在readyState是4时进行处理
                    if(xhr.readyState == 4){
                        // 判断响应的状态码 200 403 404 401 500
                        // 响应状态码中以2开头的都是成功
                        if(xhr.status-200 < 300){
                            // 处理服务端响应的结果
                            // 返回的结果是http协议封装的报文结构：行 头 空行 体

                            // 获取响应状态码
                            console.log(xhr.status);
                            // 获取响应状态字符串
                            console.log(xhr.statusText);
                            // 获取所有的响应头
                            console.log(xhr.getAllResponseHeaders());
                            // 获取响应体
                            console.log(xhr.response);

                            // 设置result的文本 为我们的响应体
                            // 然后在一块div里显示文本
                            result.innerHTML = xhr.response; 
                        }
                    }
                }

js 脚本

// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则: http://+本地ip地址+:端口号+路由
// request是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('hello ajax ');
});
// 监听端口，启动服务
app.listen(8080,()=>{
    console.log("服务已经启动,8080端口监听中");
})

测试01：采用Ajax向本地端口8080发请求并将响应内容 渲染在页面上。

html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" >
        <title>ajax-test01</title>
        <style>
            #result{
                width: 200px;
                height: 100px;
                border: solid 3px #90d
            }
        </style>
    </head>
    <body>
        <button>点击发送请求</button>
        <div id="result"></div>
        <script>
            // 通过dom的方式绑定这个按钮对象
            const button =  document.getElementsByTagName('button')[0];
            const result = document.getElementById("result"); 
            // 设置对象的鼠标点击事件
            button.onclick = function(){
                // console.log('测试这个按钮');

                // 1.创建ajax测试对象
                const xhr = new XMLHttpRequest();
                // 2.初始化，设置请求方法与url
                xhr.open('GET','http://192.168.100.216:8080/server');
                // 3.发送
                xhr.send();
                // 4.事件绑定 处理服务端返回的结果
                // on 在...时 
                // readystate 状态 0（检测请求）,1（open）,2(send),3(返回部分结果),4（返回所有结果）
                // change 改变时触发
                xhr.onreadystatechange = function(){
                    // 应该在readyState是4时进行处理
                    if(xhr.readyState == 4){
                        // 判断响应的状态码 200 403 404 401 500
                        // 响应状态码中以2开头的都是成功
                        if(xhr.status-200 < 300){
                            // 处理服务端响应的结果
                            // 返回的结果是http协议封装的报文结构：行 头 空行 体

                            // 获取响应状态码
                            console.log(xhr.status);
                            // 获取响应状态字符串
                            console.log(xhr.statusText);
                            // 获取所有的响应头
                            console.log(xhr.getAllResponseHeaders());
                            // 获取响应体
                            console.log(xhr.response);

                            // 设置result的文本 为我们的响应体
                            // 然后在一块div里显示文本
                            result.innerHTML = xhr.response; 
                        }
                    }
                }
            }
        </script>
    </body>
</html>

// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则: http://+本地ip地址+:端口号+路由
// request是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send('hello ajax ');
});
// 监听端口，启动服务
app.listen(8080,()=>{
    console.log("服务已经启动,8080端口监听中");
})

测试02：采用Ajax实现鼠标放在某块div上时向本地端口8080请求显示 提示 内容，离开时也发一次请求消失提示内容。

html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ajax-test02</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 3px #90d
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 使用dom的方式创建绑定对象
        const result = document.getElementById("result");

        // 鼠标放上就显示
        result.addEventListener("mouseover", function () {
            console.log('鼠标放在这块div了');
            // 创建ajax对象
            const xhr = new XMLHttpRequest();
            // 初始化请求方式与url
            xhr.open('POST', 'http://192.168.100.216:8080/server1');
            // 设置请求头信息xhr.setRequestHeader('name','value');
            // 自定义的头信息需要在js脚本文件中添加新的响应头通过且请求方式为all
            // 发送
            xhr.send();
            // 事件绑定，处理返回结果
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 &amp;&amp; xhr.status < 300 &amp;&amp; xhr.status >= 200) {
                    result.innerHTML = xhr.response;
                }
            }
        });

        // 鼠标离开就隐藏
        result.addEventListener("mouseleave",function(){
            // 创建ajax对象
            const xhr = new XMLHttpRequest();
            // 初始化请求方式与url
            xhr.open('POST','http://192.168.100.216:8080/server1');
            // 发送
            xhr.send();
            // 事件绑定，处理返回结果
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 &amp;&amp; xhr.status<300 && xhr.status>=200){
                    result.innerHTML = null;
                }
            }
        })
    </script>
</body>

</html>

// 引入express
const express = require('express');
// 创建新的app
const app = express();
// 创建路由规则
// 设置端口监听
app.post('/server1',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    // 设置响应体
    response.send("鼠标覆盖这块div");
});
app.listen(8080,()=>{
    console.log("服务已经启动，8080端口正在监听");
});

测试03：采用Ajax实现按下任意键盘时发请求并将特定信息 渲染在页面上。

html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax-tes03</title>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 3px solid #904;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result");
        var message = "success";

        // 设置键盘按下事件
        window.onkeydown = function () {
            // 创建Ajax对象
            const xhr = new XMLHttpRequest();
            // 初始化请求方式与URL
            xhr.open('POST', 'http://192.168.100.216:8080/server3')
            // 发送
            xhr.send();
            // 事件绑定，处理返回结果
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status >= 200 && xhr.status < 300) {
                    result.innerHTML = message;
                    window.alert('你按下了键盘');
                }
            }
        }
    </script>
</body>

</html>

// 引入express
const express = require('express');
// 创建新的app
const app = express();
// 创建路由规则
app.post('/server3',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*');
    response.send('sucess');
});
app.listen(8080,()=>{
    console.log("正在监听8080端口");
})