先发布任务~
一、 搭建服务
二、请求与响应
三、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

response

2. http.request(options, callback(response));

返回一个 请求对象
注意：使用 http.request() 时，必须始终调用 req.end() 来表示请求的结束，即使没有数据被写入(req.write())请求主体

options：

callback：响应的回调函数，接收参数 response响应对象

详情：http模块传送门