同步访问
当客户端向服务器发送请求时,服务器在处理过程中,浏览器只能等等,效率偏低
异步访问:
当客户端向服务器发送请求时,服务器在处理过程中,客户端可以做其他的操作,不需要一直等待,效率偏高
AJAX优点
1 异步 访问
2 局部 刷新
使用场合:
1 搜索建议
2 表单验证
3 表单提交2 AJAX的核心对象 - 异步对象(XMLHttpRequest)
1 什么是XMLHttpRequest
简称为xhr
称为异步对象,代替浏览器向服务器发送请求并接收响应
xhr 是由JS来提供
2 创建异步对象(xhr)
主流的异步对象是 XMLHttpRequest 类型的,并且主流浏览器都支持(IE7+,chrome,Firefox,Safari,Opera) 全部支持,
但在Ie低版本浏览器中(ie6以及以下),就不支持 XMLHttpRequest,需要使用 ActiveXObject()来创建异步对象 支持 XMLHttpRequest :new XMLHttpRequest()
不支持 XMLHttpRequest: new ActiveXObject('Microsoft.XMLHTTP') 3 xhr 的成员
4 AJAX的操作步骤
1 GET请求
1 创建xhr 对象
2 创建请求 - open()
3 设置回调函数 - onreadystatechange
判断状态并且接收数据
4 发送请求-send() 1 方法 - open()
作用:创建请求
语法:open(method,url,async)
method : 请求方法,取值为 'get'或'post'
url :请求地址,字符串
async:是否采用异步的方式发送请求
true: 使用异步方式发送请求
false:使用同步方式发送请求
ex:
xhr.open('get','/server',true)
2 属性 - readyState
作用:请求状态,通过不同的请求状态值来表示xhr与服务器的交互情况
由 0-4 共5个值来表示5个不同的状态
0 : 请求尚未初始化
1 :xhr已经与服务器建立连接
2 :服务器端已经开始接收请求
3 : 请求正在处理中
4 : 响应已完成
3 属性 - status
作用:表示服务器端的响应状态码
200: 表示服务器正解处理所有的请求以及给出的响应
404: 请求资源不存在
500:服务器内部错误
4 属性 - responseText
作用:服务器端的响应数据
5 事件 - onreadystatechange
作用:每当xhr的readyState属性值发生改变的时候要触发的操作 - 回调函数
在该函数中,只有当readyState的值为4并且status的值为200的时候,就可以正常的接收responseText了
6 方法 - send()
作用:通知xhr 向服务器发送请求
语法:send(body)
body:表示请求的主体
get请求:是没有请求主体的,所以body的值为null
xhr.send(null)
post请求:是没有请求主体的,所以body的位置处要表示请求数据
xhr.send('请求数据')
xhr.send('参数=值&参数=值')
2 POST 请求
1 请求提交的数据要作为 send()的参数进行提交 xhr.send('参数 = 值&参数=值')
2 修改请求消息头
在AJAX中,提交POST请求时,AJAX默认将 Content-Type请求消息头的值修改为"text/plain"了,
所以导致数据无法正常提交
解决方案:将 Content-Type的请求消息头再修改回"application/x-www-form-urlencoded"即可
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
Content-Type: application/x-www-form-urlencoded