目录

一.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对象：

（2）调用open函数建立和服务器的连接

（3）调用send函数发送请求

（4）监听状态的变化，执行对应回调函数

四.jQuery中对ajax封装

1.底层封装：

2.高层的封装：

（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方式

前端：

学号
姓名
HTML
CSS
nodejs

后台：

/* 
需求：服务器端存放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 = idthis.name = namethis.html = htmlthis.css = cssthis.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数据进行解析

客户端：

    
用户名：
密码：
提交

后台：

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){str += value})// 2.给请求对象req绑定end事件：当该事件被触发时，表示缓存（数据流）中的数据已经读完了，即数据已经全部获取了req.on('end',function(){let post_info = querystring.parse(str)//将str进行转换console.log('客户端的请求数据：',post_info)res.setHeader('Content-Type','text/html;charset=utf8')res.end('服务器的响应数据')})
})
postServer.listen(8889,'127.0.0.1',()=>{console.log('端口号8889正在运行')
})

二.同步和异步

1.同步：客户端程序在运行时需要等到服务器的响应数据后才执行下一步的操作。体现是客户端的页面会整体刷新
        页面整体刷新：浏览器重新加载页面，页面中原有的数据被清空
2.异步：客户端程序在运行时不需要等到服务器的响应数据，程序的主流程不停止，当服务器的响应数据过来后，只需要调用回调函数即可。体现是客户端的页面只进行局部刷新
        页面局部刷新：只是改变页面中部分标签的内容

三.异步操作的实现：ajax

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

2.跨域：

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

（2）实现方式：

a.cors：在服务器端配置。
    // 设置跨域
    // 设置允许来自哪里的跨域请求：'*'表示所有的跨域
    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")

b.json：利用了