Ajax：异步的 JavaScript 和 XML

目录

AJAX 应用

XMLHttpRequest对象

获得XMLHttpRequest对象 

XMLHttpRequest方法

XMLHttpRequest属性

AJAX交互示例：get请求

AJAX交互示例：post请求

---

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX不是一门新的语言或技术，是由JavaScript、XML、DOM、CSS等多种已有技术组合而成的一种浏览器端技术。

AJAX 应用

• 运用 XHTML+CSS 来表达资讯；

• 运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；

• 运用 XML 和 XSLT 操作资料;

• 运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；

• 注意：AJAX 与 Flash、Silverlight 和 Java Applet 等 RIA 技术是有区分的。

AJAX提供与服务器异步通信的能力，可以在Web页面触发的JavaScript事件中向服务器发出异步请求，执行更新或查询数据库 。

AJAX的核心是JavaScript对象XMLHttpRequest，该对象在IE 5中首次引入，使用户通过JavaScript向服务器提出请求并处理响应，而不阻塞用户。

当Web服务器的响应返回时，使用JavaScript回调函数和CSS来相应地更新页面的局部内容，而不是刷新整个页面。

在页面与服务器交互的过程中不中断用户操作，用户甚至察觉不到浏览器正在与服务器通信。

XMLHttpRequest对象

XMLHttpRequest对象最初是在IE5中以ActiveX组件的形式实现的，但只能在IE浏览器中使用。其后在Mozilla、Safari等浏览器中相继实现，才成为事实上的标准。目前FireFox、Safari、Opera和IE7中都以类似的方式实现了XMLHttpRequest对象。

由于XMLHttpRequest不是w3c的标准，可以采用多种方法创建XMLHttpRequest对象。在使用XMLHttpRequest对象发生请求和处理之前，必须首先使用JavaScript获得XMLHttpRequest对象。

获得XMLHttpRequest对象 

W3C标准

var xhr = new XMLHttpRequest();

 早期IE浏览器

var xhr = new ActiveXObject('Microsoft.XMLHTTP');

var xhr = new ActiveXObject('Msxml2.XMLHTTP');

var xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');

var xhr = new ActiveXObject('Msxml2.XMLHTTP.5.0');

var xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');

var xmlhttp;

if (window.XMLHttpRequest) {

         // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

        xmlhttp=new XMLHttpRequest();

} else {

        // IE6, IE5 浏览器执行代码

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

XMLHttpRequest方法

XMLHttpRequest属性

AJAX交互示例：get请求

var oRequest;
function getTitleInfo(titleid){
	oRequest = getHttpRequest(); // 获得XMLHttpRequest对象
	oRequest.open(“get” , “AJAXServlet” , true); // 建立对服务器的异步调用
    //也可以通过url重写传递：oRequest.open(“get” , “AJAXServlet? uname=”+name , true);
 
	    
    oRequest.onreadystatechange = myfun;
	oRequest.send(null); // 向服务器发送异步调用请求
}
function myfun(){
    // （回调处理）
    if (oRequest.readyState == 4&&oRequest.status==200)
    {
        var result = oRequest.responseText;
        var msgdiv = document.getElementById("message");
        msgdiv.innerHTML = result;
    }
}

AJAX交互示例：post请求

var oRequest;
function getTitleInfo(titleid){
	oRequest = getHttpRequest(); // 获得XMLHttpRequest对象
    var postStr = "user_name="+ userName +"&user_age="+ userAge ;
	oRequest.open(“POST” , “AJAXServlet” , true); // 建立对服务器的异步调用
	oRequest.setRequestHeader("Content-Type",
			    "application/x-www-form-urlencoded"); 
    oRequest.onreadystatechange = myfun;
	oRequest.send(postStr); // 向服务器发送异步调用请求
}
function myfun(){// 显示书籍信息（回调处理）
    if (oRequest.readyState == 4&&oRequest.status==200)
    {
        var result = oRequest.responseText;
        var msgdiv = document.
        getElementById("message");
        msgdiv.innerHTML = result;
    }
}