HTTP系列 -- AJAX 进阶
2018-01-16 本文已影响14人
bowen_wu
AJAX 设置响应 和 获取请求
AJAX 设置请求 header
第一部分:request.open( 'POST', 'http://www.baidu.com/search' )
第二部分:request.setRequestHeader( hander, value )
request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' )
request.setRequestHeader( 'who', 'bowen' )
第四部分:request.send( 'a=1&b=2' )
请求
1. POST /search HTTP/1.1
2. Host: www.baidu.com
Content-Type: application/x-www-form-urlencoded
who: bowen
Content-Length:
Cookie:
3.
4. a=1&b=2
AJAX 获取响应 header
第一部分:request.status
和 request.statusText
第二部分:
request.getResponseHeader( headerName )
request.getAllResponseHeaders()
第四部分:request.responseText
响应
1. HTTP/1.1 200 ok
2. key: value
3.
4. 数据
Node.js(后端)设置响应 header
callback(回调)
callback 就是一个回调函数,如下图所示。
callback 示例
- 给 window 添加一个方法 fn123 ,这个方法接受一个对象 options 。
- 使用 window 下的方法 fn123 ,并传入一个对象,这个对象有一个方法 fn456 ,它是一个函数。
- window 下的 fn123 接受到对象后将调用 fn456,将其 call back
- fn456 中接受的 this 就是 window 下的方法中 call 时传的第一个参数,x 就是 call 时传的第二个参数
实现 jQuery.ajax
-
首先回顾下 window.jQuery
-
将封装的 window.jQuery.ajax 进行代码优化(给参数命名)。由于传入参数过多,将其参数设置为有结构的数据 ==> 对象,代码地址
-
实现传入不定个参数的优化。既可以传入一个对象,也可以传入 url + 对象。代码地址。此时由于要使用 arguments ,所以不能使用箭头函数。
-
优化代码,使用 ES6 解构赋值达到优化代码的目的,并增加 request.setRequestHeader() 功能。代码地址。
-
如果不实现传入不定个参数,还可以进一步使用 ES6 解构赋值优化。代码地址
-
使用 Promise 规范进行优化,
return new Promise(function(resolve,reject){})
,成功 === 调用 resolve,失败 === 调用 reject,之后在调用时使用.then
方法。代码地址 -
Promise 实现原理
window.Promise = function(fn){ // ...... return { then: function(){} } }