不刷新的请求方式

• SRJ 无刷新局部更新页面 server render javascript
• 大名鼎鼎的AJAX
• iframe 在iframe里刷新 不影响当前页面
• image也可以发请求 只能发get请求 不需要刻意将image appendChild到body中
• script可以发请求 只能发get请求 一定要 appendChild到body中

黑科技 iframe|script|image发请求 https://xiedaimala.com/tasks/d282131e-2ef0-4789-88d7-bba63496876b/video_tutorials/ca0b38c7-41fd-46a9-9780-be6067272e6e

发请求

form发请求 会刷新或新开页面

a发get请求 会刷新或新开页面

img发get请求 只能以图片形式展示

link发get请求 只能以css、favicon形式展示

script发get请求 只能以脚本形式运行

iframe代码示例

> <form action="/pay" method="post" target="result">
>     <input type="submit" value="付款">
> </form>
> <iframe src="about:blank" name="result" frameborder="0" height="100"></iframe>
>

这时是在iframe中刷新，不会影响原页面体验

image发请求

> let image = document.createElement('img')
> image.src = '/pay'
> image.onload = function(){//请求成功}
> image.onerror=function(){//请求失败}
>

//请求用状态码 response.statusCode来判断 2开头成功 4开头失败

//浏览器比较聪明 只是设置200状态码还不认为成功

必须response.write(fs.readFileSync（‘./真图.jpg’))

Content-Type设为image/jpg 才可以onload成功

script发请求

> let script = document.createElement('script')
> script.src = '/pay'
> script.onload = function(e){e.currentTarget.remove()//请求成功}
> script.onerror=function(e){e.currentTarget.remove()//请求失败}
> //清除标签以免每次请求都多生成一个 浪费性能
>

服务器端写

response.setHeader(‘Content-Type’,‘application/javascript’)

response.statusCode=200

response.write(‘amount.innerText-=1’)//直接写js代码传回给前端加载

这个技术SRJ 无刷新局部更新页面 server render javascript

queryString

查询字符串

url问号❓后的数据为queryString 查询参数

queryString内容是key=value形式组成的数据,多个key=value使用&拼接

queryString传输的内容是有限制的,会把内容转成urlencode编码进行传输

queryString和http的请求方式没有任何关系，他只是url中的一部分！

所以get和post都可以用queryString，post使用queryString后端也可以读到！ctx.query可以读到

任何请求都可以带queryString 查询参数

get也可以提交 不过语义化最好只是用来查询

form表单

form action填服务器请求地址

表单会根据action、method、enctype属性拼接请求的url，同时会自动根据表单内容拼接queryString部分

queryString传输的内容有限制，会把内容转成urlencode编码格式进行传输

urlencode

url长度有限制，大的数据不推荐使用queryString来传输，较大的数据(比如几千个字符)推荐使用http正文进行传输

Koa的ctx.query可以查出queryString

请求方式

get | post | put | delete | patch | head 等

不同的请求方法有不同的传输方式和响应规则

MDN资料:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods

精华笔记:/Users/superman285/Programmer/饥人谷前端/前端学前基础/HTTP相关姿势.md

请求：请求行 请求头 请求体

响应：状态行 响应头 响应体

head只有响应头，没有响应体

get方法:不支持正文数据传输(没有主体)，应该只被用于获取数据

这个方法对服务器来说是安全的，因为不会修改服务器的数据和状态，一般为读，

但对用户来说可能不安全，查询参数可能会明文暴露密码。

get方法通过koa-router的get方法中ctx.query可以查queryString

post方法:应该被用于提交数据

提交的数据会放在正文中，正文中的数据格式依赖

post方法通过koa-router的post方法中ctx.request.body(ctx.body)可以查

需要解析正文的话要安装 koa-body-parser

FormData

多媒体 图片音乐视频等文件的上传 使用二进制格式 使用FormData

如果有formData对象 不需要手动设置请求头的content-type

let fd = new FormData();

//fd.append(‘username’,30); 普通数据

重要💡 input.value值并不是文件二进制数据，只是路径和文件名

//fd.append(‘file1’,input.files[0]) //提交文件数据

//input为取到的input元素 当input加上行内属性multiple时 可以多选文件上传

input.files 为类数组 数字索引对应相应文件

input.files[0]才是真正要提交的文件数据

content-type: multipart/form-data

xhr的upload对象 有事件 可以监听上传相关事件 例如进度