AJAX应用程序所用到的基本技术:
(1)HTML技术 用于建立web表单并确定应用程序其他部分使用的字段
(2)JavaScript技术 JavaScript代码是运行AJAX应用程序的核心代码
一、获取Request对象
XMLHttpRequest是AJAX应用程序的核心。由于对于不同的浏览器有不同的使用方法,所以获得XMLHttpRequest对象需要采用不同
的方法。
(1)使用IE浏览器(对于现在的IE9不用这么判断 已经支持new XMLHttpRequest()这种方式);
Microsoft浏览器IE使用MSXML解析器处理XML。因此如果编写的AJAX应用程序要和IE浏览器打交道,那么必须用一种特殊的方式创建对象。但并不是那么简单。根据IE中安装的JavaScript技术版本不同,MSXML实际上有两种不同的版本,因此必须对这两种情况
分别编写代码。
例如:在IE浏览器上创建XMLHttpRequest对象
var xmlHttp=false;
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e2){
xmlHttp=false;
}
(2)处理Mozilla和非Microsoft浏览器
如果选择的浏览器不是IE,或者为非Microsoft浏览器编写代码,就需要使用不同的代码。
如: varxmlHttp=new XMLHttpRequest(); 这行简单得多的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非
Microsoft 浏览器中,创建了 XMLHttpRequest 对象。
(3)结合起来 关键是要支持所有 浏览器。谁愿意编写一个只能用于 Internet Explorer 或者非 Microsoft 浏览器的应用程序呢?或者更糟,要编写一个应用程序两次?当然不!因此代码要同时支持 Internet Explorer 和非 Microsoft 浏览器。
如: /* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false; } }
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); }
分析:这段代码的核心分为三步: 1.建立一个变量 xmlHttp 来引用即将创建的 XMLHttpRequest 对象。 2.尝试在 Microsoft 浏览器中创建该对象: 尝试使用 Msxml2.XMLHTTP 对象创建它。 如果失败,再尝试 Microsoft.XMLHTTP 对象。 3.如果仍然没有建立 xmlHttp,则以非 Microsoft 的方式创建该对象。
二、AJAX中的请求/响应
AJAX应用程序中基本的流程
1.从 Web 表单中获取需要的数据。
2.建立要连接的 URL。
3.打开到服务器的连接。
4.设置服务器在完成后要运行的函数。
5.发送请求。
(1)发出请求和处理响应
function CallServer(articleName) {
var xmlHttp = GetXmlHttpRequest();
var url = "GetArticles.ashx?articleName=" + articleName;//要传递给谁进行处理,后台处理程序
xmlHttp.open("GET", url, true);//第一个参数表示连接方式(有GET、POST等) 第二个参数url(后台处理程序) 第三个参数是否异步
xmlHttp.onreadystatechange = function () {//设置服务器在完成后要运行的函数
if (xmlHttp.readyState == 4) {
document.getElementById("divArticles").innerHTML = xmlHttp.responseText; //服务器将把响应填充到 xmlHttp.responseText 属性中 } };
xmlHttp.send(null); //发送请求 }