Node

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

详情:http模块传送门

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值