理解AJAX技术-优快云博客

本文介绍了AJAX技术的概念及其工作原理，详细解释了如何通过XHR对象发起HTTP请求，并提供了在不同浏览器环境中实现AJAX的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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");
  }