ajax的基础知识,Ajax基础知识学习笔记

1. ajax：async JavaScript and xml

1.1 异步的js和xml

XML：可扩展的标记语言(基于标签结构存储数据)(用自己自定义的标签来存储一个数据结构)。最早的时候，基于ajax从服务器获取的数据一般都是xml格式数据，现在基本上应用更小巧，更方便操作的JSON格式处理。

HTML：超文本标记语言

XHTML：严谨的HTML

1.2 异步的js(基于ajax实现局部刷新)

服务器渲染(一般都是同步：全局刷新)

客户端渲染(一般都是异步：局部刷新)

2. Ajax的基础操作

2.1 发送ajax有四步操作

创建一个XHR对象

不兼容XMLHTTPRequest的浏览器(IE6)使用ActiveXObject创建

打开请求连接(配置请求信息)

参数1：请求方式

get：从服务器获取

post：向服务器发送信息

参数2：请求地址

参数3：async(是否为异步请求，默认true异步，false代表当前请求任务为同步)

user-name, user-pass:向服务器发送请求所携带的用户名和密码，只有在服务器设置了安全来宾账号的情况下需要(一般不用)

监听请求状态，在不同状态中做不同的事情。

发送Ajax请求(Ajax任务开始，知道响应主体信息返回【Ajax状态为4】代表当前任务结束)

let xhr = new XMLHTTPRequest;

xhr.open('get','./data.json')

xhr.onreadystatechange=function(){

// ajax的状态发生改变

console.log(xhr.readyState) //可以监听到状态码

}

xhr.send()

复制代码

Ajax响应状态码：

0：new XMLHTTPRequest 后状态为 0

1：执行完open状态变为1

2：响应头回来

3：响应主体信息正在返回中

4：响应主体已经回来

监听函数放在open前可以监听到状态码：1,2,3,4。放在open后可以监听到：2,3,4

send后：响应头信息先回来，最后响应主体信息再回来

HTTP网络状态码(代表服务器返回新状态)

【2开头基本都是代表成功】

200：OK 正常返回数据

【3开头一般也是成功，只不过中间做了一些额外处理】

301：永久性重定向/转移(一般应用于网站域名更换，访问老域名，永久都跳转到新域名上)

302：临时转移(老)

307：临时重定向(新)(一般用于服务器的负载均衡)

304：读取的是缓存中的数据 (客户端和服务器端共建的协商缓存，把不经常更新，请求过的资源文件做缓存，后期再访问这些资源直接走缓存数据，除非服务器端更新了此资源，或者客户端强制请缓存刷新等)

【4开头的都是失败，失败的原因一般都是客户端的问题】

400：请求参数错误

401：无权限访问

404：地址错误

405：当前请求方式服务器不支持

【5开头的都是失败，失败原因一般是服务器问题】

500：未知服务器错误

503：服务器超负荷

真实项目中，后台开发者可能不是按照这个规则来进行处理的，可由后台自行定义。

XHR属性，方式和事件汇总

xhr.response/xhr.respinseText/xhr.responseXML : 获取响应主体信息

xhr.status/xhr.statusText : 获取HTTP状态码和状态码描述

xhr.timeout : 设置服务器超时时间，超过设置时间自动中断

xhr.withCredentials : 是否在跨域的时候允许携带资源凭证

xhr.abort() : 强制中断Ajax请求

xhr.getAllResponseHeaders() : 获取请求头

xhr.getResponseHeader([key]) : 获取请求头指定属性值

xhr.open() : 打开请求连接

xhr.send() : 发送请求

xhr.setRequestHeader() : 设置请求头信息(属性值不能是中文和特殊字符，除非自己编码：encodeURLComponent('哈哈'))

2.2 get VS post

2.2.1 GET

get：偏向于拿数据，传的参数较少(拿多给少)

head：只获取响应头的信息，不获取响应主体内容

delete：一般代指删除服务器上指定的文件

options：试探性请求，在cross跨域请求中，所有正常请求发送前，先发送一个试探请求，验证是否可以和服务器正常的建立连接。

2.2.2 post

post：偏向于传递数据(给多拿少)

put：新增，一般代指向服务器中新增文件

2.2.3 基于get向服务器发送请求，传递给服务器的方式

基于请求头传递给服务器(比如想把本地的cookie信息传递给服务器)

请求URL地址后面的问号传参(主要方式)

xhr.open('get','./data.json?id=1&name=xxx')

复制代码

2.2.4 基于post向服务器发送请求，传递给服务器的方式

基于请求头传递给服务器

基于请求主体，把信息传递给服务器(主要方式)

xhr.open('post','./data.json')

xhr.send(data)

复制代码

2.2.5 两者区别

get请求传递给服务器的信息有大小的限制(因为是基于地址问号传参方式传递信息，而URL是有长度限制的，IE浏览器只有2kb大小，谷歌有约4kb大小)。post请求理论上是没有大小的限制(实际操作中都会给与限制)

get请求相对post请求来说不太安全，也是因为传参是基于地址栏问号传参，会被别人基于URL劫持的方式把信息获取到...所以真实项目中，涉及到安全的信息(例如：密码等)都是基于post方式传递的。

get请求容易产生缓存，原因还是因为get是基于问号传参传递信息，浏览器在每一次获取数据后，一般会缓存一下数据，下一次如果请求地址和参数和上一次一样，浏览器直接获取缓存中的数据，所以基于get发送请求时，需要清除缓存时，一般会在地址栏中添加一个随机数

xhr.open('get','./data.json?id=1&_=' + Math.random())

复制代码

2.2.6 传递给服务器的数据格式

application/x-www-form-urlencoded:xxx=xxx&xxx=xxx (最常用，如问号传参格式)。字符串形式

multipart/form-data：表单提交或文件上传，也很常用。对象形式

raw: 可以上传text，json，xml，HTML等格式的文本，富文本编辑器中的内容可以基于这种格式传递。字符串形式

binary：上传二进制数据或者编码格式的数据。二进制文件形式