关于Ajax技术

AJAX

一、PM2

是Node.js下的第三方模块，用来管理Node.js进程

1.特点

后台运行

自动重新启动

服务信息的查看，例如：内存占用、CPU…

最大内存自动重启

…

2.安装

全局安装，在任何的目录下都可以使用的模块，例如：npm

npm  install  -g  pm2

查看是否安装pm2

pm2  -v

3.pm2命令

• 启动项目

pm2  start  项目的启动文件  --name  自定义名称  --watch

–watch 监听项目中文件的变化，一旦发生变化，会自动重启Node进程

• 查看Node进程列表

pm2  list

• 停止一个Node进程

pm2  stop  [进程名称] | [进程ID]

• 重启进程

pm2  restart  [进程名称] | [进程ID]

• 查看日志

pm2  logs    #查看所有日志
pm2  logs   [进程名称] | [进程ID]    #查看指定进程的日志

• 删除Node进程

pm2  delete  [进程名称] | [进程ID]

面试题：当用户在浏览器中输入一个URL，到显示一张网页中间都经历了什么？

1.通过DNS服务器，找到域名对应的服务器IP地址

2.浏览器和WEB服务器建立连接：三次握手

3.建立连接后，浏览器向服务器发送请求消息

4.服务器端收到请求消息后，处理请求，发送响应消息

5.浏览器和服务器断开连接：四次挥手

6.客户端解析服务器端的响应消息，最后渲染成一张网页

onclick/onfocus/onblur

二、AJAX

Asynchronous Javascript And XML（异步JavaScript和XML）

XML：是一种数据交换形式，特点是自定义标签

当前XML已经完全被JSON格式替换

用于向后端发送请求，不需要整个刷新网页，采用了局部刷新。通过后台向服务器发送请求，用户体验好

<news>
	<item>
    	<title>在全社会弘扬创造精神</title>
        <ctime>1630000000000</ctime>
    </item>
    <item>
    	<title>国泰航空：3名“歧视乘客”空乘被解聘</title>
        <ctime>1630000000000</ctime>
    </item>
    <item>
    	<title>泰格医药选举张炳辉为监事会主席</title>
        <ctime>1630000000000</ctime>
    </item>
</news>

练习：编写02_app.js，使用express创建WEB服务器，设置端口，托管静态资源到public目录，包含用户登录网页login.html，点击登录向服务器发请求(get /mylogin)，如果用户名是admin，并且密码是123456，响应‘登录成功’，否则响应‘登录失败’

练习：编写03_ajax.html，点击登录按钮，获取用户输入的用户名和密码

三、跨域

跨域：浏览器的同源策略

规定要请求的服务器出现协议、域名/IP地址、端口不同，都会产生跨域

跨域后不允许获取外部资源

http://127.0.0.1:8848 前端

http://127.0.0.1:3000 后端

解决跨域：使用第三方中间件，允许跨域

cors模块

1.下载安装

npm  install  cors

2.使用中间件

const cors = require('cors')
// 使用cors中间件解决跨域
app.use(cors())

四、AJAX请求

// 1.创建HTTP请求对象
var xhr = new XMLHttpRequest()
// 2.打开服务器的连接，设置要请求的接口
// 请求方式标准写法为大写
// 是否为异步，默认是异步
xhr.open(请求方式,接口地址,是否为异步)
// 3.发送请求
xhr.send()
// 4.绑定事件，监听服务器端响应
xhr.onload = function() {
    xhr.responseText  // 获取响应的文本
}

五、POST传参

将参数放入到请求体，还需要设置请求头中的参数格式

Content-Type	请求体中的参数格式	用途
application/x-www-form-urlencoded	a=1&b=2	传递多个参数
application/json	{“a”:1,“b”:2}	传递多个参数
application/form-data		文件上传
text/xml		传递XML格式的参数

// 设置请求头中，参数的格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 将指定格式的参数放入到请求体
xhr.send('a=1&b=2')

// 设置请求头，参数的格式
xhr.setRequestHeader('Content-Type','application/json')
// 将JSON格式的参数放入到请求体
xhr.send('{"a":1,"b":2}')

express获取post传递的JSON格式的参数

// 使用内置中间件将JSON格式参数转为对象
app.use(express.json())
// 路由获取
req.body   // {a: '1', b: '2'}

六、JSON

JSON：JS对象表示法，将数据以JS对象的方式来表示。是一种数据交换格式

JSON中的对象属性名必须是双引号，值可以是数字、字符串、布尔型、数组… 如果是字符串必须使用双引号

{
	"a": 1,
    "b": "hello",
    "c": true,
    "data": ["北京","上海","深圳"],
    "person": {
        "name": "新",
        "sex": "男"
    }
}

JSON对象，提供了一组API，可以实现JS和JSON之间的相互转换

JSON.parse()        //将JSON数据转为JS对象
JSON.stringify()    //将JS对象转为JSON数据