2018-01-29 自己实现一个AJAX

JS可以设置任意请求header吗?
可以:用setRequestHeader
放在.open和.send之间


2018-01-29 自己实现一个AJAX_第1张图片
image.png

2018-01-29 自己实现一个AJAX_第2张图片
image.png

请求头显示出来了

那第4部分能不能设置?(要用POST请求)
搜 js set request body
.send()


image.png

2018-01-29 自己实现一个AJAX_第3张图片
image.png

getAllResponseHeaders()
getResponseHeader


image.png

所有的响应的头——字符串

request.statusText就是获取OK啊什么的

requset.responseText

2018-01-29 自己实现一个AJAX_第4张图片
image.png

AJAX的请求和响应

服务端需要端口号


2018-01-29 自己实现一个AJAX_第5张图片
image.png

jquery.ajax

window.jQuery.ajax的内存图


2018-01-29 自己实现一个AJAX_第6张图片
image.png

写jquery.ajax的目的是把4行代码变成一行


2018-01-29 自己实现一个AJAX_第7张图片
image.png
2018-01-29 自己实现一个AJAX_第8张图片
image.png

问题:时间长了,无法确定下面的参数是什么意思


2018-01-29 自己实现一个AJAX_第9张图片
image.png

问题:当使用GET方法,第三个参数其实不需要的,那怎么办?只能写undefined或者null,代码看起来丑
比如某个API xxx(null,null,null,null,1)完全不知道每个参数的意思

办法:用有结构的参数

箭头函数是没有arguments的

2018-01-29 自己实现一个AJAX_第10张图片
image.png

使用方用到了successFn,而里面的参数x是被调用方的第一个参数request.responseText,即x <-request.responseText,这就叫做callback

如果请求失败了,有没有可能依然存在第4部分?
答案:是的

模拟下:


2018-01-29 自己实现一个AJAX_第11张图片
image.png
2018-01-29 自己实现一个AJAX_第12张图片
image.png

2018-01-29 自己实现一个AJAX_第13张图片
image.png
2018-01-29 自己实现一个AJAX_第14张图片
image.png

2018-01-29 自己实现一个AJAX_第15张图片
image.png

一个函数如何接受两种形式的参数?


2018-01-29 自己实现一个AJAX_第16张图片
image.png
2018-01-29 自己实现一个AJAX_第17张图片
image.png
2018-01-29 自己实现一个AJAX_第18张图片
image.png

2018-01-29 自己实现一个AJAX_第19张图片
image.png

ES5和ES6

如果成功了,会打印出responsText和成功


2018-01-29 自己实现一个AJAX_第20张图片
image.png

'成功'是作为第二个then的参数传进去的
第一个then里的return的值会传递给下一个then的输入参数
问题:为什么成功之后打印出来的结果是个对象?(responsText)


image.png

因为jQuery发现你的返回值的content-type是text/json,json这4个字母,会自动把字符串转换成对象

2018-01-29 自己实现一个AJAX_第21张图片
image.png

代码变更

window的promise是怎么的?


2018-01-29 自己实现一个AJAX_第22张图片
image.png

要用promise,需要new一个,需要传入一个函数


2018-01-29 自己实现一个AJAX_第23张图片
image.png

promise返回的对象带有then属性,所以可以调用then
then也返回一个promise对象,所以可以继续then

你可能感兴趣的:(2018-01-29 自己实现一个AJAX)