AJAX全称是”Asynchronous Javascript And XML”,即“异步JavaScript和XML”。
AJAX不是一种新的编程语言,而是一种使用现有标准的新方法。
概述
通过XMLHttpRequest,与后台交互数据,实现局部刷新。
同步
提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步
请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕
概念
AJAX应用
- 使用HTML和CSS完成页面
- 通过XMLHttpRequest和web服务器进行数据交换
- JavaScript DOM操作,完成动态局部刷新
创建XMLHttpRequest对象
要使用Ajax,第一步就是实例化XMLHttpRequest对象。
1 | var request = new XMLHttpReques(); |
现代浏览器基本上都支持XMLHttpReques对象,但如果要兼容IE6、IE5的上古浏览器可以这样写:
1 | var request; |
HTTP
HTTP是一种计算机与计算机网络通信的规则,是无状态的协议,它既不建立持续的连接,也不保留“记忆”。
HTTP请求的过程:
- 建立TCP连接
- 浏览器发送请求命令
- 浏览器发送请求头信息
- web服务器应答
- web服务器发送应答头信息
- web服务器发送应答数据主体
- 关闭TCP连接
请求
组成
请求由方法(动作)、URL、请求头、请求体组成。请求头和请求体以空行分隔。
GET和POST
GET:多用于信息获取,用URL传递参数,在发送信息的时候字符有限制,一般在2000个字符左右。
也很很多人说GET是幂等的,幂等其实就是执行多次与执行一次并无差别
POST:一般用于修改服务器上的资源。对信息的数量无限制,较之GET更安全。
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
响应
组成
- 数字和文字组成的状态码
- 响应头
- 响应体
状态码
通常状态码的首位数字,表示状态码的类型。
1** 信息,服务器收到请求,需要请求者继续执行操作
2** 成功,操作被成功接收并处理
3** 重定向,需要进一步的操作以完成请求
4** 客户端错误,请求包含语法错误或无法完成请求
5** 服务器错误,服务器在处理请求的过程中发生了错误
XMLHttpRequest发送请求
方法和属性
- 规定请求的类型、URL 以及是否异步处理请求。
1 | open(method,url,async) |
- method: 请求的类型,GET或POST
- URL:请求的地址
- async: true为异步,false为同步,默认为true,可省略
将请求发送到服务器。
1
send(string)
- 仅用于POST
向请求添加HTTP头。
1
setRequestHeader(header,value)
- header: 规定头的名称
- value: 规定头的值
5.XMLHttpRequest取得响应
5.1 方法和属性
XMLRequest对象的两个属性
获得字符串形式的响应数据1
responseText
获得XML形式的响应数据
1
responseXML
以数字或文本返回HTTP状态码
1
status,statusText
获取所有响应报头
1
getAllResponseHeader()
查询响应中的某个字段的值
1
getResponseHeader()
存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
1
onreadystatechange
readyState属性
readyState属性代表了服务器的变化。
0:请求未初始化,open未调用
1:服务器连接已建立,open已经调用
2:请求已接受,即已接收头信息
3:请求处理中,即已收到响应主体
4:请求已完成,且响应就绪,即响应完成