1 什么是AJAX
Asynchronous Javascript And Xml
异步的 JS 和 xml
通过JS 异步的向服务器发送请求并接收响应数据
优点:
1.异步访问
2.局部刷新
使用场合:
1.搜索建议
2.表单验证
3.前后端完全分离
2 AJAX 核心对象 - 异步对象(XMLHttpRequest)
1. 什么是XMLHttpRequest
简称 xhr
称为"异步对象" 代替浏览器向服务器发送异步的请求并接收响应
xhr 是由JS 来提供的
2. 创建 异步对象 (xhr)
主流的异步对象是 XMLHttpRequest 类型的, 并且主流浏览器(IE7+, Chrome, Firefox, Safari, Opera)全部都支持 XMLHttpRequest。
但在IE低版本浏览器中(IE6及以下), 就不支持XMLHttpRequest, 需要使用 ActiveXObject() 来创建异步对象
function createXhr(){
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
xhr 的成员
- 方法 - open()
作用: 创建请求
语法: open(method, url, asyn)
method: 请求方式, 取值'get', 或 'post'
url: 请求地址, 字符串
asyn: 是否采用异步的方式提交请求. true: 异步; false:同步
例如:
xhr.open('get', '/server?key1=value1&key2=value2', true)
属性 - readyState
作用: 请求状态, 通过不同的请求状态来表示xhr与服务器的交互情况
由 0-4 共 5 个值来表示 5 个不同的状态
0: 请求尚未初始化
1: 已经与服务器建立了连接
2: 服务器端已接受请求
3: 请求正在处理中
4: 响应已经完成属性 - status
作用:服务器端的响应状态码
200: 表示服务器正确处理所有的请求以及给出响应
404: 请求资源不存在
500: 服务器内部错误
注意: readyState==4 and status==200 时,响应正常
事件 - onreadystatechange
作用: 每当xhr的readyState发生改变的时候都要触发的操作 - 回调函数属性 - responseText
作用: 响应数据方法 - send()
作用: 通知 xhr 向服务器端发送请求
语法: send(body)
1 ) get 请求:body的值为 null
send(null)
2 ) post 请求:此处为要提交的数据
send("请求数据")
3 AJAX 的操作步骤
- GET请求
1 )创建xhr对象
2 ) 创建请求 - open()
3 ) 设置回调函数 - onreadystatechange 判断状态并接受响应数据
4 ) 发送请求 - send() - POST 请求
AJAX的POST请求, 会把 Content-Type 请求消息头的值修改为 "text/plain;charset=utf-8", 导致了服务器端没有办法正常接收数据
解决方案: 将Content-Type 请求消息头的值再更改回application/x-www-form-urllencoded 即可
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
