第1部分:Ajax 入门简介

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); //发送请求             }

posted on 2011-11-06 20:45  iYiming  阅读(191)  评论(0编辑  收藏  举报

导航