node Web编程

须臾不敢忘

已于 2022-11-23 20:35:33 修改

阅读量186

点赞数

文章标签：前端服务器 ajax

于 2022-11-23 20:35:22 首次发布

本文链接：https://blog.csdn.net/m0_74331160/article/details/128007031

版权

一、node的http模块

1、http服务器的创建

（1）客户端只向服务器请求数据，而不用向服务器传递参数 — 默认用get方式

//客户端代码：
    <script>
        $(function(){
            $.ajax({
                url:'http://127.0.0.1:9000', //请求地址
                type: 'get', //请求方式
                dataType:'json',//服务器响应的数据格式
                success:function(result){ //回调函数，当前请求-响应成功后调用该函数
                    for(let s of result){
                        $('#tbody').append(`<tr align=center>
                             <td>${ s.id}</td> 
                             <td>${ s.name}</td> 
                             <td>${ s.html}</td> 
                             <td>${ s.css}</td> 
                             <td>${ s.nodeJs}</td> 
                             </tr>`)
                    }
                }
            })
        })
    </script>

/*
    需求：服务器端存放5个Student(id,name,html,css,nodeJs)
        前端通过jQuery的ajax获取数据并显示在页面上
    思路：
       (1)创建Student类，使用node的模块化导出
       (2)创建http服务器:遵循http协议，所有的请求都必须以http:// 开头
       (3)在页面使用jQuery的ajax请求服务器端的数据并显示出来
*/
const http = require('http')
const url = require('url')
const Student = require('./student.js')
//1.创建http服务器
const httpServer = http.createServer((req,res)=>{
    //2.设置跨域
    //设置允许来自哪里的跨域访问:'*'表示所有的跨域
    res.setHeader("Access-Control-Allow-Origin", "*");
    //设置允许跨域访问的方式：服务器接收哪些方式的跨域访问
    res.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS")
     //设置请求头中允许携带的参数
    res.setHeader("Access-Control-Allow-Headers", "Content-Type,request-origin");
    //3.定义数组：保存学生信息
    let arr = [
        new Student(101,'张三',78,85,65),
        new Student(102,'李四',75,95,80),
        new Student(103,'王五',85,80,85),
        new Student(104,'赵六',65,82,78),
        new Student(105,'孙七',90,72,69),
    ]
    //4.设置响应头信息：响应信息的格式(text/html)、字符集(utf8)
    res.setHeader('Content-Type','text/html;charset=utf8')
    //5、将数组转换成json格式，发送给前端
    let stuInfo = JSON.stringify(arr)
    res.end(stuInfo)
})
//6.启动服务器监听
httpServer.listen(9000,'127.0.0.1',()=>{
    console.log('服务器已启动，运行在9000端口上......')
})

2、客户端想服务器发送请求数据

（1）以get方式发送：请求参数会和url地址绑定在一起，一次性发送给服务器，格式是：

http://主机名:端口号?参数名1=参数值1&参数名2=参数值2….

例如：“http://127.0.0.1:9000?userName=abc&userPwd=12345”

服务器端获取get方式提交的数据：使用url模块将客户端的发送过来的url地址字符串转换成url对象

通过req.url来获取客户端的发送过来的url地址

req.url = “/?userName=abc&userPwd=12345”

let url_obj = url.parse(req.url)

hostname：127.0.0.1:9000

port：9000

query：{ ‘userName’:‘abc’，‘userPwd’：‘12345’}

（2）以post方式发送：先发送请求地址，再将请求参数和body绑定在一起发送给服务器（采用数据流方式发送）。在浏览器的地址栏看不到请求参数，在服务器端接收post发送的数据时，需要使用querystring模块对body数据进行解析

客户端代码：

<form action="http://127.0.0.1:8079" method="post">
        <label>
            用户名：
            <input type="text" name="userName">
        </label>
        <br><br>
        <label>
            密&nbsp;&nbsp;码：
            <input type="password" name="userPwd">
        </label>
        <br><br>
        <button type="submit">提交</button>
    </form>

服务器端代码：

const http = require('http')
const querystring = require('node:querystring')
const postServer = http.createServer((req,res)=>{
    //1.给请求对象req绑定'data'事件：当该事件被触发时，表示缓存(数据流)中已经有数据了，即可以开始读
    let str = ''
    req.on('data',function(value){ //参数value中放的是从数据流中读取的数据
        str += value
    })
    //2.get请求对象req绑定'end'事件：当该事件被触发时，表示缓存(数据流)中的数据已经读完了，即数据已经全部获取了
    req.on('end',function(){
        let post_info = querystring.parse(str) //将str进行转换
        console.log('客户端的请求数据：',post_info)
        res.end('服务器的响应数据')
    })
})
postServer.listen(8079,'127.0.0.1',()=>{
    console.log('服务器已启动...')
})

二、同步和异步

1、同步：

客户端程序在运行时需要等到服务器端的响应数据后才执行下一步的操作。体现是客户端的页面会整体刷新

页面整体刷新：浏览器重新加载页面，页面中原有的数据被清空

2、异步：

客户端程序在运行时不需要等到服务器的响应数据，程序的主流程不停止，当服务器的响应数据过来后，只需要调用回调函数即可。体现是客户端的页面只进行局部刷新

页面局部刷新：只是改变页面中部分标签的内容

三、异步操作的实现：ajax

1、同源策略：协议、域名、端口号都相同的称为同源

2、跨域：

（1）原因：因为javascript的同源策略，javascript只能访问自己域下的资源，不能访问其他域下的资源

（2）实现方式：

a、cors：在服务器端配置。

//设置允许来自哪里的跨域访问:'*'表示所有的跨域
res.setHeader("Access-Control-Allow-Origin", "*");
//设置允许跨域访问的方式：服务器接收哪些方式的跨域访问
res.setHeader("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE,OPTIONS")
//设置请求头中允许携带的参数
res.setHeader("Access-Control-Allow-Headers", "Content-Type,request-origin");

b、jsonp：利用了script标签本身所具有的跨域功能实现

c、反向代理：