红宝书笔记整理-网络请求（XMLHttprequest）

一、XMLHttpRequest对象

​ XHR对象----通过XMLHttpRequest构造函数原生支持的XHR对象

• XHR主要是为服务器请求和获取响应提供合理接口

• 此接口可以异步的从服务器端获取数据，实现浏览器端不刷新也能获取数据

1、使用XHR

（1）使用xhr 对象前要使用open（）方法 open()方法不会实际发送请求，只是为发送请求做好准备。

​ open()的三个参数 请求类型 请求的url 请求是否异步的布尔值（false—同步 ture—异步）

​ 同步遵守同源策略（域名、端口、协议）

（2）使用send()方法 作为请求体发送的数据

• 接受一个参数，无参数时必须传入null
• 只有调用send（）方法后，才会发送请求

（3）XHR的几个属性

• responseText------作为响应返回的文本
• responseXML------如果响应内容类型是“text/xml” 或者“application/xml”，则包含响应数据的XMLDom文档
• status-----状态码
• statusText------状态描述
• readyState------表示请求或者响应过程处于哪个阶段
  • 0 ----------未初始化，还没有调用open（）函数
  • 1----------已调用，,调用open（）方法 未调用send（）方法
  • 2----------已发送，已调用send()方法，尚未收到响应
  • 3---------接收中，已经收到部分响应
  • 4---------完成,已经收到所有的响应，可以使用

（4）readystatuschanges事件

readyState的阶段发生变化就会触发readystatuschange事件

xhr.onreadystatuschange = function() { }

(5)判断readyState状态和状态码

2、HTTP头部

xhr请求头部有以下字段：

• accept 浏览器可以处理的内容类型
• accept-charset 可显示的字符集
• accept-encoding 可处理的压缩编码类型
• accept-language 使用的语言
• connection 浏览器和服务器连接的类型
• cookie 页面中设置的cookie
• host 发送请求所在的域
• referer 发送请求的url
• user-agent 浏览器用户代理字符串

在发送请求中，如果想要发送额外的头部信息，则可以使用 setRequestHeader()方法

• setRequestHeader()方法放在open()后，send()前

3、Get请求

1. 常用于向服务器查询某些信息
   • 可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器
   • open()的URL末尾的的字符串必须经过正确的编码

2.常见错误------查询字符串的格式问题

• 查询字符串中每个参数的名称和值都必须使用encodeURIComponent ()进行编码
• 必须由和号（&）分隔

3.addURLParam()函数辅助URL末尾添加字符串参数

• 三个参数:要添加参数的URL、参数的名称、参数的值
• 解析过程
  • 检查URL是否包含问号
  • 没有，添加一个问号;有，添加一个和号
  • 将参数名称和值进行编码，添加到URL的末尾
  • 最后返回添加参数之后的URL

4、post请求

1. 用于向服务器发送应该被保存的数据

2. POST请求的主体可以包含非常多的数据，而且格式不限，包括原始的处理XML DOM文档类型或者其他的字符类型

3. 数据处理

   • 服务器对 POST请求和提交Web表单的请求数据采用不同的处理
   • 服务器端中有程序读取发送过来的原始数据，并从中解析出有用的部分

   解决-----采用使用XHR来模仿表单提交

   • 首先将Content-Type头部信息设置为application/x-www-form-urlencoded，改变数据提交的类型
   • 以适当的格式创建一个字符串

4. 格式序列化

   serialize ()