先发布任务~
一、 搭建服务
二、请求与响应
三、http客户端请求
四、同源策略及JSONP
一、搭建服务、二、请求与响应
在nodeJS搭建http服务端或者http客户端离不开http模块，
第一步，引入http模块(包)
const http = require('http');
第二步： 创建服务
http.createServer返回一个服务的实例，其参数为一个回调函数，当客户端每请求一次的时候都会触发一次该回调函数，其中回调函数接收两个参数： request及response
request: 请求对象，其挂载了请求的信息
request.url: 请求路径
request.method: 请求方式
....
response: 响应对象，
response.writeHead(status, opt); 设置响应头信息，
响应状态码的配置： 200， 404等
响应头的设置：
Content-Type: 'text/plain;charset=uft-8'等
response.end(): 结束响应，
如果不结束响应，客户端会认为一直没有得到服务器的响应，则浏览器一直会处于被挂起的状态，浏览器的超时机制，一旦超时，则会报告错误
// 返回服务对象
const app = http.createServer((request, response) => {
// request: 请求对象的相关信息
// response： 响应对象的相关信息
// 设置响应头
response.writeHead(200, {
'Content-Type': 'text/html;charset=utf-8'
});
// 结束响应
response.end(`<h1>success</h1> <p>请求方式：${request.method}</p>`);
});
第三步：监听端口
// 监听特定的端口
app.listen(3000, '127.0.0.1', (err) => {
if (err) {
throw err;
} else {
console.log('listen 3000 success');
}
});
第四步：启动服务
在当前工作目录中 指向app.js
node .\app.js
image.png
第五步：客户端打开： http://127.0.0.1:3000/
image.png
三、http的客户端请求
http模块不仅能搭建服务端，还能通过http.request方法，向其他服务端发送请求
http.request(option，callback(response))
options: 请求的配置
callback: 响应的回调函数
const http = require('http');
let req = http.request({
host: '127.0.0.1', // 请求发送至的服务器的域名或 IP 地址。默认值: 'localhost'
port: 3000, // 服务器的端口。默认值: 80
method: 'GET', // 请求的方法。默认值: 'GET'
path: '/', // 请求的路径
headers: { // 请求头的对象
'Content-Type': 'application/x-www-form-urlencoded'
}
}, (response) => {
// 回调函数被添加到 'response' 事件
// 接收数据
response.on('data', (chunk) => {
console.log(chunk.toString());
});
// 响应结束
response.on('end', () => {
console.log('响应结束，已无数据接收');
});
});
// 监听请求错误
req.on('error', (err) => {
console.error(`请求错误: ${err.message}`);
});
// 请求发送的数据
req.write('');
// 结束请求
req.end();
image.png
四、同源策略及jsonp
同源策略： 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源,
同源：同协议、同域名、同端口
JSONP：即跨域读取数据
原理：
script：js脚本标签，可以将字符串解析为js代码执行， 类似eval函数功能
src: 请求资源路径，只支持GET请求
回调函数: 参数为数据，里面是对数据的处理或者渲染数据
第一步： 必须有回调函数
function nb(data) {
console.log(data);
// ... 逻辑操作
}
第二步：添加script标签并设置src发送请求
function nb(data) {
console.log(data);
// ... 逻辑操作
}
let script = document.createElement('script');
// GET的search传参方式，将函数名传给后端，
script.src = 'http://127.0.0.1:3000/?callback=nb';
document.body.appendChild(script);
第三步： 搭建服务端
const http = require('http');
const reg = /(\w+)=(\w+)/g;
const app = http.createServer((request, response) => {
//
let search = {};
// request.url // 请求的路径，其中会包含查询字符串 /?callback=nb
// 查询字符串的参数提取到对象中，考虑到这章没涉及url模块，所以凑合一下
decodeURIComponent(request.url).replace(reg, (str, $1, $2) => {
search[$1] = $2;
});
// 响应的字符串为 nb(数据)
response.end(`${search.callback}(${JSON.stringify(
{
name: '张三',
age: 3
}
)})`);
});
// 监听特定的端口
app.listen(3000, '127.0.0.1', (err) => {
if (err) {
throw err;
} else {
console.log('listen 3000 success');
}
});
第五步： 启动服务
node .\xxx.js
第四步打开页面，发送请求
image.png
image.png
总结
http模块方法
1. http.createServer(callback(request, response));
接收一个回调函数：每一次请求都会执行一次回调函数
request
| key | 描述 | 例子 |
|---|---|---|
| url | 请求的路径 | / |
| method | 请求的方式 | GET/POST... |
| headers | 消息头的名称和值的键值对。 消息头的名称都是小写的 |
response
| key | 描述 |
|---|---|
| response.write | 发送一块响应主体。 可以多次调用该方法以提供连续的响应主体片段 |
| response.setHeader | 为隐式响应头设置单个响应头的值 |
| response.writeHead | 向请求发送响应头；此方法只能在消息上调用一次，并且必须在调用 [response.end()]之前调用 |
| response.end | 表明已发送所有响应头和主体，该服务器应该视为此消息已完成 |
2. http.request(options, callback(response));
返回一个 请求对象
注意：使用 http.request() 时，必须始终调用 req.end() 来表示请求的结束，即使没有数据被写入(req.write())请求主体
options：
| key | 描述 | 默认值 |
|---|---|---|
| host | 请求发送至的服务器的域名或 IP 地址 | localhost |
| port | 服务器的端口 | 80 |
| method | 指定 HTTP 请求的方法 | GET |
| path | 请求的路径。应包括查询字符串（如果有） | / |
| headers | 请求头的对象 |
callback：响应的回调函数，接收参数 response响应对象
网友评论