Node的web编程（2）

Sakura蜗牛

已于 2022-11-23 20:57:55 修改

阅读量357

点赞数

文章标签：服务器 json ajax node.js

于 2022-11-21 21:02:41 首次发布

本文链接：https://blog.csdn.net/m0_73849466/article/details/127970972

版权

Node的Web编程

（1）url模块：对url地址进行转换的。可以将字符串转换成url对象，也可以将url对象转换成字符串

（2）url对象的属性：

hostname：包含了主机名称和端口号

port：端口号。（在0~65535之间，其中0~1023系统占用。1024~65535之间都可以使用。有些特殊的端口号不能使用）

80：浏览网页

3306：MySQL数据库

27017：MongoDB数据库

query：url地址中的参数。（通常是客户端采用get方式发送请求时，在请求地址中带的参数）

search：包含地址和参数

（3）url对象的方法：

parse(字符串,[false/true])：

参数字符串：表示的要转换的对象

第二个参数：默认值是false。若为true,表示将url对象的query属性转换成对象格式

Node Web编程示例 —— 采用B/S结构（浏览器/服务器模式）

（1）创建html页面 —- login.html

（2）创建Node的服务器端

（3）在服务器对响应信息进行编码（字符集）处理

二、JSON数据

1、什么是JSON：JavaScript Object Notation，是一种轻量级的前后端数据交换的格式（数据格式）。JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言，易于解析与生成。

2、特点

（1）容易阅读和编写

（2）语言无关性：和任何的开发没有关系

（3）便于编译、解析

3、语法要求

（1）是key-value：一个键对应一个值

（2）每个数据项之间用逗号分隔

（3）用花括号（{ }）保存对象

（4）用中括号（[ ]）保存数组

4、常用方法：

JSON.stringify（参数）：将参数里面的数据转换为json格式的字符串

5、使用场景：在前后端交互时，凡是需要将结构化的数据转换为文本时，都可以使用JSON格式

三、Node的http模块：使用node创建http服务器（重点）

1、Web服务器：网站服务器，主要提供网上信息的浏览服务

2、web资源

（1）静态资源：服务器没有修改的，客户端每次请求的结果都是一样的资源。（CSS、image等）

（2）动态资源：经过服务器处理的资源信息。

3、HTTP协议：HyperText Transfer Protocol，超文本传输协议。规范了客户端和服务器之间进行交互的数据格式。是基于’请求’ ——‘响应’的协议

（1）请求（request）：客户端(浏览器)向服务器发送信息（发送请求）—- http请求

（2）响应（response）：服务器接收到客户端的请求后做的响应 —- http响应

（3）内容：

基本信息：请求地址（url）、请求方式（get/post）、请求-响应是否完成、路由地址（ip地址）

响应头信息：http协议的版本号、200是状态码（表示请求-响应已经完成）、响应文本的格式

请求头信息：User-Agent（客户端浏览器的内核）、Host（请求的服务器的地址和端口号）、Accept发送请求的文本格式

（4）状态码：不同的状态码反应了请求—响应过程的完成情况

200：请求-响应的过程已经成功完成

204：请求-响应已经完成，但是没有响应数据

以3开头的状态码表示页面重定向了

404：客户端请求的资源不存在

403：服务器拒绝请求

400：请求的语法错误

500：服务器错误，无法响应请求

503：服务器无法使用

（5）响应信息的格式：采用‘大类型/具体类型’的方式定义

text/plain：普通文本格式

text/html：html文件

text/css：css文件

application/javascript：js文件

4、node中http模块的应用：

（1）导入：require(‘http’)

（2）创建服务器：http.createServer(function(){ })，返回一个http的服务器对象

（3）启动服务器监听：listen(端口号，服务器地址、callback)

5、在服务器端获取客户端请求数据的方式：是通过请求对象request来完成的

（1）req.method：获取客户端的请求方式

（2）req.url：获取客户端的请求地址

（3）req.url.query：获取的是客户端采用get方式向服务器发送的请求数据

get方式发送的请求数据：是拼接在url地址之后的

http://127.0.0.1:9000?userName=张三&age=25

‘?’：是url和请求参数（query）之间的分隔符

‘&’：是参数之间的分隔符

（4）req.body：获取的是客户端采用post方式向服务器发送的请求数据

post方式发送请求时：先将请求地址单独发送出去，然后将请求参数和页面的body绑定在一起进行发送

在node的http服务器端需要使用querystring模块对客户端发送的body信息进行转换后才能得到请求参数

四、ajax（难点）

1、同源和跨域

（1）a.同源（Origin）：协议、域名、端口号相同就是同源。

b.跨域:只有协议、域名、端口号有一个不同就是跨域

js有同源策略，http没有

例如

检测 http://www.a.com:8080/test/index.html 地址的同源

http://www.a.com/dir/path.html ——>成功，协议是http、域名是www.a.com、端口号8080

http://www.child.a.com/dir/page.html ——> 失败，非同源，域名不同

https://www.a.com/dir/page.html —>失败，非同源，协议不同

http://www.a.com:8089/test/index.htmo —->失败，端口号不同

（2）引入同源策略的原因：

（1）是浏览器的一种安全机制，即客户端的脚步(javascript程序)在没有明确授权的情况下时不能访问对方（服

务器端）的资源。不受同源策略限制的操作：页面中的连接（超链接）、页面的重定向、表单提交。

（2）如果不会操作的来源进行验证，那么不同源的数据和资源（如HTTP头、Cookie、DOM、localStorage等）就能相互随意访问，根本没有隐私和安全可言。

（3）同源策略是为了保证用户信息的安全，防止恶意的网站窃取数据。

（3）跨域：

只有协议、域名、端口号有一个不同就是跨域。产生跨域的原因：因为javascript的同源策略（JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源）。

跨域的解决方案：

a、cors：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。限制是若在服务器端不做配置就无法跨域，

严重依赖服务器端

b、jsonp：利用script标签具有跨域的特征，在本地的回调函数中实现跨域。

c、反向代理（Reverse Proxy）：在客户端独立的解决跨域问题

2、什么是Ajax：Asynchronous JavaScript And XML，异步的JavaScript的XML支持

（1）xml：是一种前后端交互时使用的文件格式。用户可以自定义标签

（2）异步：客户端向服务器发起请求后不会等待服务器的响应(处理结果)，继续执行自己的流程；当服务器的响应信息到了后，调用客户端的回调函数，对响应信息进行处理即可。

（3）异步的优点：

a、减轻服务器的负担：

b、节省带宽

c、用户的体验感很好

（4）Ajax技术：不是新技术，只是对html、javascript、xml这些技术的整合，整合后可以实现页面的局部刷新。

3、Ajax的实现过程

（1）创建ajax的核心对象：XMLHttpRequest，使用该对象向服务器发起请求，是一个异步请求，实现页面的局部刷新

w3c标准的浏览器创建XMLHttpRequest对象的方法：

let xhr = new XMLHttpRequest()

非w3c标准的浏览器创建时：

let xhr = new ActivexObject()

（2）XMLHttpRequest对象的属性：

a、 onreadystatechange：本质是一个事件，当请求响应的状态发生改变时触发。

b、readyState：请求响应的状态值。

        0 = 未初始化（uninitialized）
        1 = 正在加载（loading）
         2 = 加载完毕（loaded）
        3 = 交互（interactive）
        4 = 完成（complete）

c、responseText：服务器给客户端响应的字符串

d、status：服务器响应的http状态码（200 表示请求响应成功）

（3）XMLHttpRequest对象的方法：

a、open(”method”,”URL”)：建立和服务器之间的连接。

参数”method”：表示发起请求的方式

参数”url”：表示服务器地址

b、send(content)：发生请求，参数通常为null

Ajax实现过程的步骤

（1）创建XMLHttpRequest对象：

let xhr = new XMLHttpRequest()

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

xhr.open(‘get’,’http://…’)

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

xhr.send(null)

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

xhr.onreadystatechange = function(){ 处理代码 }

示例：通过XMLHttpRequest对象向服务器发起异步请求

客户端

服务器端

练习：验证表单

客户端

服务区端

五、jQuery中对ajax的封装

1、$.ajax(url,[setting])。例如：

客户端

服务器端

高层的封装：

（1） $.get(url, [data], [callback], [type]) // 发送的是get方式的请求

参数url：服务器地址

参数data：发送给服务器的请求数据

参数callback：请求成功后的回调函数

参数type：服务器发送给客户端的数据类型

（2） $.post(url, [data], [callback], [type]) // 发送的是post方式的请求