一、node的http模块
1. http服务器的创建
（1）客户端只向服务器请求数据，而不用向服务器传递参数 — 默认用get方式
重要练习
需求：服务器端存放5名学生的信息，在客户端用jQuery的ajax技术获取这5名学生的信息并用表格在页面中显示出来。学生信息如下：
Student(id,name,html,css,nodejs)
思路：
（1）创建Student类，使用node的模块化导出
（2）创建http服务器：遵循http协议，所有的请求都必须以http”//开头
（3）在页面使用jQuery的ajax请求服务器端的数据并显示出来
前端：
<script src="./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>
<tbody id="tbody">
</tbody>
</thead>
<script>
$(function(){
$.ajax({
url:'http:127.0.0.1:9002',//请求地址
type:'get',//请求方式
dataType:'json',//服务器响应的数据格式
success:function(result){//回调函数，请求响应成功后调用该函数
for(let sad of result){
$('#tbody').append(`<tr align="center">
<td>${sad.id}</td>
<td>${sad.name}</td>
<td>${sad.html}</td>
<td>${sad.css}</td>
<td>${sad.nodeJs}</td>
</tr>`)
}
}
})
})
</script>
</table>
</body>后台：
const http = require('http')
const url = require('url')
const Student = require('./student1.js')//导入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,83,98),
new Student(102,'二娃',58,73,95),
new Student(103,'三娃',73,63,68),
new Student(104,'四娃',78,93,92),
new Student(105,'五娃',68,23,78),
]
//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(9002,'127.0.0.1',()=>{//回调函数起提示作用，可以不定义
console.log('服务器已启动，运行在9002端口上.......');
})导出：
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('学号',this.id)
console.log('姓名',this.name)
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….
例如：“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>
密 码：
<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、反向代理：
3. Ajax：异步的javascript和Xml
（1）ajax的核心对象：XMLHttpRequest对象。在IE5.0时提出，异步访问的对象
（2）XMLHttpRequest对象的属性：
a、onreadystatechange：本质是一个事件，当请求-响应的状态发生改变时触发
b、status：服务器响应给客户端的状态码（200、4开头的、5开头的）
c、readyState：请求-响应的状态（4表示请求-响应的过程已经完成了）
d、responseText：服务器响应的文本
（3）XMLHttpRequest对象的方法：
a、open(method,url)：建立和服务器之间的连接
b、send(null)：发起请求
4. Ajax的实现过程
（1）创建XMLHttpRequest对象：
let xhr = new XMLHttpRequest()
（2）调用open函数建立和服务器的连接
xhr.open(‘get’,’http://…’)
（3）调用send函数发送请求
xhr.send(null)
（4）监听状态的变化，执行对应回调函数
xhr.onreadystatechange = function(){ 处理代码 }
四、jQuery中对ajax封装
1. 底层封装：封装了XMLHttpRequest对象，既可以发送get请求，也可以发送post请求
$.ajax({
url：’服务器地址’，
type：’请求方式’，
data：{ //客户端向服务器发送的请求数据
参数名1：参数值1，
参数名2：参数值2
}，
dataType：’服务器响应的数据的格式’ // json、html、xml、text等
success：function(result){ //请求-响应成功后的回调函数。参数result保存的服务器给客户端响应的数据
}，
error：function(err){ // 请求-响应失败后的回调函数。参数err中存放的是错误的信息
}
})
2. 高层的封装：
（1） $.get(url, [data], [callback], [type]) // 发送的是get方式的请求
- 参数url：服务器地址
- 参数data：发送给服务器的请求数据
- 参数callback：请求成功后的回调函数
- 参数type：服务器发送给客户端的数据类型
（2） $.post(url, [data], [callback], [type]) // 发送的是post方式的请求
- 参数url：服务器地址
- 参数data：发送给服务器的请求数据
- 参数callback：请求成功后的回调函数
- 参数type：服务器发送给客户端的数据类
