AJAX

Posted 2021-02-10 青衫易辞

一、什么是AJAX

AJAX是一种技术，AJAX是一种javascript技术，AJAX是一种可以调用后台服务器获取数据的JavaScript技术。

与传统开发模式做比较，传统开发模式中，用户每对页面做一次操作，就要触发一次，返回web服务器的HTTP请求。服务器进行处理后，返回一个html页面给客户端。

在AJAX开发模式中，用户没对页面做一次操作，就要触发一次AJAX引擎，AJAX引擎与服务器进行交流，要求数据。服务器处理后，把数据返回给AJAX引擎，AJAX引擎再将获取到的数据插入到HTML页面中。

AJAX开发的优点就是：在不刷新整个页面的情况下，对部分数据进行更新，降低了网络流量。

 

二、AJAX的组成

由5部分组成：XMLHttpRequest对象（核心）、XML语言、js脚本语言、DOM、CSS。

 

三、XMLHttpRequest对象

XMLHttpRequest对象是一个对象，是一个js对象，是一个有接口的js对象，能够使用http（超文本传输协议）连接一个服务器。

1、XMLHttpRequest对象的初始化

XMLHttpRequest不是一个W3C标准，所以对于不同的浏览器，初始化方法不同。

IE浏览器是将XMLHttpRequest对象实例化为一个ActiveX对象。非IE（比如火狐）将XMLHttpRequest对象实例化为一个本地的js对象。为了提高程序的兼容性，需要创建一个跨浏览器的XMLHttpRequest对象。代码如下：

 1 // XMLHttpRequest对象的初始化
 2 function initIt(){
 3     if(window.XMLHttpRequest){ //非IE浏览器
 4         http_request=new XMLHttpRequest();
 5     }else if(window.ActiveXObject){ //Ie浏览器
 6         try {
 7             http_request=new ActiveXObject(‘Msxml2.XMLHTTP‘);
 8         }catch(e){
 9             try{
10                 http_request=new ActiveXObject(‘Microsoft.XMLHTTP‘);
11             } catch(e){}
12         }
13     }
14 }

 

2、XMLHttpRequest对象的属性

（1）指定状态改变时所触发的事件处理器

//onreadystatechange属性
http_request.onreadystatechange=function(){
    alert(‘指定状态改变时，通常会出发一个js函数‘);
}

 

（2）获取请求状态，有5个属性值

//readystate属性，包括了5个属性值

 

（3）获取服务器字符串响应

//responseText属性，获取服务器字符串响应
var response=http_request.responseText;

 

（4）获取服务器XML响应

//responseXML属性，获取服务器XML响应
var responseOfXml=http_request.responseXML;

 

（5）返回服务器的HTTP状态码

//status属性，获取状态码。注意：该属性只有send()方法返回成功时才有效。
if(http_request.readyState==4){
    if(http_request.status==200){
        alert(‘请求成功！‘);
    }else{
        alert(‘请求失败‘);
    }
}

 

 3、XMLHttpRequest对象的方法

（1）创建新的请求

//open(),创建新请求的方法，参数分别为：http_request.open[‘请求类型‘,‘请求URL‘,‘是否为异步‘,‘用户名‘,‘密码‘]
http_request.open(‘GET‘,‘deal.jsp‘,true);

 

（2）向服务器发送新的请求

//sned(),向服务发送请求的方法
http_request.send(null);  //向服务器发送一个不含任何参数的请求

 

（3）设置请求的HTTP头

//setRequestHeader(‘header‘,‘value‘),设置请求的HTTP开头
//该方法只有在调用open()方法之后才能被调用
http_request.setRequestHeader(‘Content-Type‘,‘application/x-www-form‘);

 

（4）停止或放弃当前异步请求

//abort(),停止或放弃当前异步请求
http_request.abort();

 

（5）返回HTTP头，有两种方法

//getReponseHeader(‘headerLabel‘),返回http头特定信息
//headerLabel可选项有三个：content-Type,Server和Date
http_request.getResponseHeader(‘Content-Type‘);
//getAllResponseHeader(),赶回HTTP头的所有信息
alert(http_request.getAllResponseHeader());