网易微专业-DOM编程艺术 06数据通信

1、HTTP事务

网易微专业-DOM编程艺术 06数据通信_第1张图片
请求报文和响应报文,包括三部分:头行、头部、主体。 浏览器接受到响应报文后,将报文主体显示在浏览器上

2、请求报文格式

网易微专业-DOM编程艺术 06数据通信_第2张图片
头行:三部分组成,http方法、主机地址、HTTP版本号 头部:许多键值对组成。accept浏览器端可以接受到的媒体类型;cache-control缓存策略;user-agent当前浏览器版本 主体:因为请求是get方法,所以请求体为空

3、响应报文格式

网易微专业-DOM编程艺术 06数据通信_第3张图片
头行:http协议版本、http状态码、http状态码描述 头部:Expires缓存有效时间 主体:访问的是页面,所以是完整的XML文件

4、常用HTTP方法

网易微专业-DOM编程艺术 06数据通信_第4张图片
get最常用方法

5、URL构成

网易微专业-DOM编程艺术 06数据通信_第5张图片
协议,主机(主机名,端口),路径,查询字符串,hash pathname/search/hash都是不必须的

6、常见HTTP状态码

网易微专业-DOM编程艺术 06数据通信_第6张图片

7、Ajax :Asynchronous JavaScript and XML
XMLHttpRequest 对象
⑴Ajax通信流程

网易微专业-DOM编程艺术 06数据通信_第7张图片
初始readyState为0,其他两个值为空
网易微专业-DOM编程艺术 06数据通信_第8张图片
调用open()方法开启一个请求,但没有向服务器端发出请求 此时,readyState:1
网易微专业-DOM编程艺术 06数据通信_第9张图片
调用send()方法,正式向服务器端发出请求 readyState:2
网易微专业-DOM编程艺术 06数据通信_第10张图片
浏览器接收到服务器返回的数据 xhr的readyState属性变为3
网易微专业-DOM编程艺术 06数据通信_第11张图片
浏览器结束请求 responseText变为相应的返回值,这里是一个XML文件

⑵AJAX调用示例

网易微专业-DOM编程艺术 06数据通信_第12张图片

⑶open 开启一个请求以备发送,但不会向服务器端正式发起一个请求

网易微专业-DOM编程艺术 06数据通信_第13张图片
open方法 url表示请求资源相对于当前文档的路径

⑷ setRequestHeader 调用open方法之后调用的,不必要一定调用。调用这个方法可以在请求体头部设置一些头部字段

网易微专业-DOM编程艺术 06数据通信_第14张图片
如果当前请求是表单编码,将value值设为application/x-www-form-urlencoded 如果表单带文件上传,将value值设为multipart/form-data

⑸send 正式向服务器端发起请求调用的

网易微专业-DOM编程艺术 06数据通信_第15张图片
send方法

⑹Ajax调用示例

网易微专业-DOM编程艺术 06数据通信_第16张图片
在XMLHttpRequest2的标准里,还可以监听xhr.onload来代替xhr.onreadystatechange事件

⑺请求参数序列化

网易微专业-DOM编程艺术 06数据通信_第17张图片
将查询参数作为字符串跟在URL后面 如果查询参数是对象,应该将对象转化为字符串
网易微专业-DOM编程艺术 06数据通信_第18张图片
将对象转化为字符串的函数

⑻GET请求

网易微专业-DOM编程艺术 06数据通信_第19张图片
get方法,send中请求体为空

⑼POST请求

⑽ 同源策略
(上面的URL路径都是相对于当前文档的相对路径,这是受Ajax同源策略影响)

网易微专业-DOM编程艺术 06数据通信_第20张图片

⑾跨域资源访问 :不满足同源策略的访问

网易微专业-DOM编程艺术 06数据通信_第21张图片
同源策略会对做一些应用造成很多限制

⑿CORS

网易微专业-DOM编程艺术 06数据通信_第22张图片
流程图

⒀其他跨域技术

网易微专业-DOM编程艺术 06数据通信_第23张图片

⒁Frame代理

网易微专业-DOM编程艺术 06数据通信_第24张图片

⒂JSONP

网易微专业-DOM编程艺术 06数据通信_第25张图片
网易微专业-DOM编程艺术 06数据通信_第26张图片

你可能感兴趣的:(网易微专业-DOM编程艺术 06数据通信)