Ajax-01

XiangChiZhaJi

于 2020-04-05 22:08:07 发布

阅读量144

点赞数

分类专栏： Node.js

本文链接：https://blog.csdn.net/XiangChiZhaJi/article/details/104903506

版权

Node.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

一定要运行在网站环境下

运行原理

在这里插入图片描述

实现步骤

在这里插入图片描述
时间不确定所以用onload，接受完响应后触发事件

在这里插入图片描述
接下来创建/first路由，请求方式和地址要对应

在这里插入图片描述
刷新页面就能看到hello ajax字符串了

服务器端响应的数据格式

在这里插入图片描述

无论是请求参数还是响应内容，如果是对象类型，最终都转换成对象字符串进行传输响应的是字符串格式
转换成json对象

json.parse()

在这里插入图片描述
拼接字符串,使用dom方法

GET请求参数传递

get在地址栏中，post在请求体中
在这里插入图片描述

用req.query获取get请求参数

POST请求参数传递

（不在地址栏，在请求体中，http图解里又说，我又忘了- -，所以把参数放在send中）
在这里插入图片描述
需要设置属性contenttype，

接下来去建立/post的路由

在这里插入图片描述
被post到了奇怪的位置。。。不知道为啥
哦大小写打错了单词也打错了

引入模块

随着express升级，bodyParser从express中被分离了出来，因此，在使用express新版本的时候，需要npm install body-parser 来安装bodyParser。

1、在app.js中要引入bodyParser。

var bodyParser = require('body-parser');

2、其次，需要在app.js中use bodyParser。

app.use(bodyParser());

3、最后，需要给bodyParser提供参数。

'Content-Type': 'application/x-www-form-urlencoded'

对于bodyParser的参数，根据需要解析的文件类型来进行设置，参数类型有很多种，可以查看具体文献。

如何发现3中的有过期的情况，将改为app.use(bodyParser.urlencoded({extended:false}));
在这里插入图片描述
上面写错了，应该调用这个方法，来解析applocation/x-www-form…类型的数据
如果是application/json，要用其他方法来解析

请求参数的格式

客户端向服务端发送请求时，可以用json
是以字符串形式传递的
在这里插入图片描述
一定是以字符串形式传递

之前用的是这个，现在要改成json方法

配置路由，这样请求就没有问题了

客户端到服务端传送json,必须是post,application/json
stringfy转换成字符串放到send中
get是不能提交json格式的，传统网站表单也不支持json，用的是第一种格式

获取服务端响应（了解）

在这里插入图片描述
获取
xhr.readuState
但是状态码可能是不停变化的

注意最后两个的顺序

设置路由响应一段文字，接受完后，代表可以获取到状态码了，

最好还是使用onload（）

错误处理

在这里插入图片描述

网络中断onerror，不会触发onload
吧network offline勾选上

服务端返回一个不存在的东西 500

ajax状态码：表示ajax请求的过程状态，由ajax对象返回
http状态码：表示请求的处理结果是服务器端返回到

低版本IE浏览器的缓存问题

在这里插入图片描述
读取文件然后响应

这是就可以更新后的内容也会响应了

ajax异步编程

在这里插入图片描述
事件处理函数也是回调函数的一种

先输出一，再输出二

ajax封装

在这里插入图片描述

不直接处理，让调用者决定怎么处理函数

注意一下传参过程

对请求参数的分析

1、请求参数位置的问题
将请求参数传递到ajax函数内部，在函数内部根据方式的不同将请求参数放置在不同的位置，
get:放在请求地址后面
post：放在send方法中

2、请求参数格式的问题
application/x-www-form-urlencoded
参数名称 = 参数值&参数名称 = 参数值
name = zhangsan&age = 20
application/json
{name :‘zhangsan’张三，age：20}

传递对象类型对于调用者更加友好，在内部对象数据类型转换成字符串更加方便
在这里插入图片描述

截取掉最后一个and符号
接下来判断请求方式，如果是get，把参数放在地址栏后面
如果是post，参数放在send里面

记得设置格式类型

unload触发，代表请求完成不代表请求成功
在这里插入图片描述
xhr里面包含了更多信息，返回对象方便处理

怎么判断返回的信息是对象还是字符串呢？

虽然看着像对象但是他是字符串类型的

如果转换成功，是一个对象，就单独输出
转换之前：

这是content-type是固定的，如果要传入json,就不好处理了
在这里插入图片描述

这样就直接拿到json对象类型的数据了~

判断http状态码，成功与失败状态
在这里插入图片描述

获取响应头中的数据，判断服务器返回的是字符串还是json对象

判断

上面写的有点乱…………

每次调用ajax都会传送很多参数，用户传了就用用户传的，不然就用默认值
在函数内部定义一个对象，对象里的数据就是参数，在这里插入图片描述

接下来把所有的options改成defaults。覆盖，传参的options不更改，如果没传参就是默认值，传参了就是传入的值

改变ajax函数也可以正常发出请求，默认为get