一、Ajax技术介绍
Asynchronous JavaScript and XML(异步JavaScript和XML)
无需刷新页面而向服务器发送请求,更好的用户交互体验!
主要对象XHR:XMLHttpRequest,即XMLHTTP请求,它是JavaScript的一个对象,包含一些主要的属性及方法
设置、发送、响应请求都是建立在这个对象的基础之上的!
XMLHttpRequest的主要属性:
onreadystatechange | 指派在请求的状态发生变化时所使用的事件处理程序 |
readyState | 反映请求状态的一个整数值.0:未被初始化、1:正在加载、2:已加载、3:交互、4:完成 |
responseText | 在响应里所返回的体内容 |
responseXML | 如果体内容是XML,则根据内容创建XML DOM文档 |
status | 从服务器端返回的响应状态码.200:表示成功、404:表示未找到 |
statusText | 响应所返回的状态文本信息 |
readyState和status的区别:
readyState只反映服务器是否履行了请求(即HTTP就绪状态码4)
status反映了是否得到了用求请求的数据
应该先进行readeState判断,再对status值判断!
readyState各状态值详细说明
0:请求没有发出(在调用open()之前)
1:请求已经建立但是还没有发出(在调用send()之前)
2:请求已经发出正在处理之中(此时已经可以从响应得到头部信息)
3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完全完成响应
4:响应完成,可以访问服务器响应内容并使用它
status各状态值详细说明
0**:未被初始化
1**:请求收到,继续处理
2**:操作成功收到、分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败
XMLHttpRequest的主要方法:
abort() | 当前正在被执行的请求被取消 |
getAllResponseHeaders() | 返回一个字符串,包含所有响应标头的名称和值 |
getResponseHeaders(name) | 返回指定响应标头的值 |
open(method,url,async,use,pass) | 设置请求的方法和目标URL,请求声明是同步还是异步,用户名和密码 |
send(contents) | 发起带有指定内容的请求 |
setRequestHeader(name,value) | 利用指定的名字和值设定一个请求的标头 |
二、Ajax发送请求过程
1、创建一个XMLHttpRequest实例
2、发起请求
3、跟踪进展并获得响应
三、Ajax基础应用小实例