1.什么是AJAX
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX:Asynchronous Javascript And XML,异步的JS和XML。
2002年,Google在搜索引擎中提出了“Google Suggest”效果,把使用的技术命名为“AJAX”,为了避免浏览器中出现“一片惨白”影响浏览体验。
实现原理:在客户端浏览网页内容的同时,服务器在提供最新的内容,局部更新在页面中——无提交无刷新的页面内容局部更新技术。
AJAX应用涉及到的技术:HTML、CSS、JS、DOM、XML、HTTP协议等——纯前端技术,需要与Web服务器交互。
2.浏览器发起HTTP请求的两种方式:
(1)同步请求:地址栏、表单提交、超链接跳转、JS跳转
(2)异步请求:使用XHR对象
3.使用XHR发起HTTP请求的步骤
1 创建xhr对象
var xhr = new XMLHttpRequest();
2 连接到服务器
xhr.open('GET', 'x.php', true);
3 发送请求消息
xhr.send( null / 'k=v&k=v' );
4 监听xhr的状态改变事件
xhr.onreadystatechange = function(){
if(xhr.readyState===4){ //响应消息接收完成
if(xhr.status===200){ //响应完成且成功
}else{ //响应完成但有问题
}}}
4.XHR对象成员属性:
- readyState:0 就绪状态,随着请求-响应的进行自动改变
- response:""
- responseText:"" 响应消息主体,readyState变为3才有值
- responseType:""
- responseURL:""
- responseXML:null 响应消息主体,readyState变为3才有值
- status:0 响应状态码,readyState变为2才有值
- statusText:"" 原因短句,readyState变为2才有值
- timeout:0
- DONE:4 readyState可取值之一,响应消息接收完成
- HEADERS_RECEIVED:2 readyState可取值之一,开始接收响应消息头部
- LOADING:3 readyState可取值之一,开始加载响应消息主体
- OPENED:1 readyState可取值之一,XHR已经打开到服务器的连接
- UNSENT:0 readyState可取值之一,请求消息尚未发送
5.XHR对象成员方法:
- getAllResponseHeaders:getAllResponseHeaders()
- getResponseHeader:getResponseHeader() 读取响应头部
- setRequestHeader:setRequestHeader() 设置请求头
- open:open() 打开到服务器的连接
- send:send() 发送请求消息
6.使用Microsogt浏览器IE(6以下):
Microsogt浏览器IE(6以下)使用MSXML解析器处理XML,如果编写的AJAX应用程序并不简单,根据IE中安装的JacaScript技术的版本不同,MSXML实际上有两种不同的版本,因此必须对这两种情况分别编写代码,如:
var xml=false; try{ xml=new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xml=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e2){ xml=false; } }
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
和
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
这两行代码基本上就是尝试使用一个版本的MSXML创建对象,如果失败则使用另一个版本创建该对象。
或者官方文档
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }