一.node的http模块；二.同步和异步；三.异步操作的实现：ajax；四.jQuery中对ajax封装；五.Node的Web框架

m-TT

已于 2022-11-23 09:26:29 修改

阅读量1k

点赞数

分类专栏： js 文章标签： javascript 前端开发语言 node.js

于 2022-11-22 18:53:35 首次发布

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127987314

版权

本文详细介绍了Node.js的http模块，包括创建服务器和发送请求数据的get、post方式。深入讨论了同步与异步概念，以及异步操作的关键——Ajax，包括同源策略、跨域解决方案和实现过程。此外，还探讨了jQuery对Ajax的封装，如$.get和$.post。最后，讲解了Node.js的Web框架Express，强调其作为半成品的优势，如创建中间件、自定义路由和动态渲染页面，并介绍了WebStorm中创建Express项目的基本结构。

摘要由CSDN通过智能技术生成

一.node的http模块

1.http服务器的创建

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

2.客户端向服务器发送请求数据

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

（2）以post方式发送：先发送请求地址，再将请求参数和body绑定在一起发送给服务器。在浏览器的地址栏看不到请求参数

二.同步和异步

三.异步操作的实现：ajax

1.同源策略：协议、域名、端口号都相同的就叫同源

2.跨域：

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

（2）实现方式：

3.Ajax：异步的JavaScript和Xml

（1）ajax的核心对象：XMLHttpRequest对象。在IE5.0时提出，异步访问的对象

（2）XMLHttpRequest对象的方法：

4.Ajax的实现过程

（1）创建XMLHttpRequest对象：

（1）$.get(url,[data],[callback],[type])//发送的是get方式的请求

（2）$.post(url,[data],[callback],[type])//发送的是post方式的请求

五.Node的Web框架

1.web框架：是一个半成品，开发者只需要按要求传递数据，就可以生成一个web服务器

2.Express框架：是node开发web服务器的框架。小巧、灵活，可以帮助开发者快速的创建node web服务器。作用是：

（1）允许用户创建中间件响应http请求

（2）用户可以自己创建路由表执行http的方法

（3）允许在服务器端动态渲染参数传递给html页面

3.前后端分离：

4.WebStorm创建Express项目

（1）bin/www文件：项目的启动文件，可以秀给默认的端口号。在该文件中创建了http的服务器

（2）node_modules文件夹：保存的支撑项目运行的模块

（3）public文件夹：存放的项目运行所用的静态文件（image、css、js）

（4）routes文件夹：存放的路由中间文件（路由文件）

（5）views文件夹：存放的页面文件

（6）app.js文件：

一.node的http模块

1.http服务器的创建

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

前端：

<script src="../11-21/httpDemo/jquery-3.4.1.js"></script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th width="100">学号</th>
                <th width="100">姓名</th>
                <th width="100">HTML</th>
                <th width="100">CSS</th>
                <th width="100">nodejs</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
    <script>
        $(function(){
            $.ajax({
                url:'http://127.0.0.1:8999',//请求地址
                type:'get',//请求方式
                dataType:'JSON',//服务器响应的数据格式
                success:function(result){//回调函数，当请求-响应成功后调用该函数
                    for (let value of result) {
                        $('#tbody').append(`<tr align='center'>
                            <td>${value.id}</td>
                            <td>${value.name}</td>
                            <td>${value.html}</td>
                            <td>${value.css}</td>
                            <td>${value.nodejs}</td>
                        </tr>`)
                    }

                }

            })
        })
    </script>
</body>

后台：

/* 
需求：服务器端存放5名学生的信息，在客户端用jQuery的ajax技术获取这5名学生的信息并用表格在页面中显示出来。学生信息如下：
Student(id,name,html,css,nodejs)

思路：
            （1）创建Student类，使用node的模块化导出
            （2）创建http服务器：遵循http协议，所有的请求都必须一http”//开头
 */
const http = require('http')
const url = require('url')
const Student = require('./001-student.js')
// 1.创建http服务器
const httpServer = http.createServer((req,res)=>{
    // 2.设置跨域
    // 设置允许来自哪里的跨域请求：'*'表示所有的跨域
    res.setHeader("Access-Control-Allow-Origin","*")
    // 设置允许跨域访问的方式：服务器接收哪些方式的跨域访问
    res.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,DELETE,OPTIONS")
    // 设置请求头中允许携带的参数
    res.setHeader("Access-Control-Allow-Headers","Content-Type,request-origin")

    // 3.定义数组：保存学生信息
    let arr = [
        new Student(1001,'小灰灰',78,89,90),
        new Student(1002,'小小志',88,89,90),
        new Student(1003,'小绵羊',48,79,70),
        new Student(1004,'懒羊羊',56,67,67),
        new Student(1005,'灰太狼',58,77,88)
    ]
    // 4.设置响应头
    res.setHeader('Content-Type','text/html;charset=utf8')
    // 5.将数组转换成json格式，发送给前端
    let info = JSON.stringify(arr)
    res.end(info)
})
// 6.启动监听
httpServer.listen(8999,'127.0.0.1',()=>{
    console.log('程序已经运行。。。')
})

导出

class Student{
    constructor(id,name,html,css,nodejs){
        this.id = id
        this.name = name
        this.html = html
        this.css = css
        this.nodejs = nodejs
    }
    show(){
        console.log('name:',this.name)
        console.log('id:',this.id)
        console.log('html:',this.html)
        console.log('css:',this.css)
        console.log('nodejs:',this.nodejs)
    }
}
module.exports = Student

2.客户端向服务器发送请求数据

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

格式是 http://主机名：端口号？参数名1=参数值1&参数名2=参数值2...
服务器端获取get方式提交的数据：使用url模块将客户端发送过来的url地址字符串转换成url对象
通过req.url来获取客户端发送过来的url地址
req.url = 'http://127.0.0.1:8999/?username=zhang&pwd=123'
let url_obj = url.parse(req.url)
hostname:127.0.0.1:8999
port:8999
query:{'username':'zhang','pwd':'123'}

（2）以post方式发送：先发送请求地址，再将请求参数和body绑定在一起发送给服务器。在浏览器的地址栏看不到请求参数

在服务器端接收post发送的数据时，需要使用querystring模块对body数据进行解析

客户端：

    <form action="http://127.0.0.1:8888" method="get">
        <label for="">
            用户名：
            <input type="text" name="username">
        </label>
        <br>
        <label for="">
            密码：
            <input type="password" name="pwd">
        </label>
        <br>
        <button type="submit">提交</button>
    </form>

后台：