Ajax 之应用

Asynchronous JavaScript and XML

 

Ajax  由  HTML 、 JavaScript™  技术、 DHTML  和 DOM 组成

Ajax 关键是一个称为 XMLHttpRequest 的 JavaScript 对象 , 能够用来发送 HTTP 请求 , 接收应答 ,

并将其解析为 XML.

XMLHttpRequest的方法和属性如下：

         open() ：建立到服务器的新请求

         send() ：向服务器发送请求

                    用法： xhr.open (" GET ","url? 参数 =xxx& 参数 =xxx");       send ( null );

                             xhr.open ("OPEN",url);                                              send ( 数据 );

         abort() ：退出当前请求

 

         onreadystatechange ：允许指定一个回调函数，必须在 send() 之前设置

         readyState ： HTML 就绪状态。属性值如下 :

                            0 ：请求没有发出（在调用  open()  之前）

                            1 ：请求已经建立但还没有发出（调用  send()  之前）

                            2 ：请求已经发出正在处理之中

                            3 ：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应

                            4 ：响应已完成，可以访问服务器响应并使用它

         status ： HTTP  状态代码。部分属性值如下：

                            200 ：表示  OK

                            401 ：未经授权  ( 如果脚本需要认证，而请求却没有提供有效的证书 ,

会返回 401 或 403 的错误代码 )

                            403 ：禁止

                            404 ：请求的 URL 不存在

                            301 ：永久移动

                            302 ：找到（请求被重新定向到另外一个  URL/URI  上）

                            305 ：使用代理（请求必须使用一个代理来访问所请求的资源）

         responseText ：     服务器返回的请求响应文本

         responseXML ： 值以 XML 方式返回 , 可解析为一个 DOM 对象

 

HTML：

PostCode <input οnblur="getZipData(this.value)" type="text" name="zip"> //onblur: 失去焦点时执行

Javascript：

var xhr=null;

function CreateXMLHttp(){

// 尝试以 IE 方式创建该对象

         try{ xhr= new ActiveXObject("Msxml2.XMLHTTP"); }

         catch (e){ try { xhr= new ActiveXObject("Microsoft.XMLHTTP"); }catch (e2) {xhr = null; }}

// 如果仍然没有建立 xmlHttp ，则以非 Microsoft  的方式创建该对象

         if ( xhr==null && typeof XMLHttpRequest != 'undefined') { xhr= new XMLHttpRequest(); }

}

 

function   getZipData ( zipCode ) {

CreateXMLHttp();       // 每次使用前，都要先创建一个 XMLHttpRequest 实例

         if(xhr==null) return;

         xhr.onreadystatechange= processZipData;  // 状态改变时触发

         xhr.open(" GET ","abc.aspx?zipcode="+ zipCode);

         xhr.send(null);      // 最后 , 调用 send() 将请求发送到服务器

}

 

function processZipData ( ) {                  // 解析应答的回调函数  (TEXT)

         if(xhr.readyState ==4) {

                   if(xhr.status==200){

                            // 以字符串方式返回

                             var rtdata=xhr.responseText;   // 如果有多个值，则以逗号分隔

                            var v=rtdata.split(',') ;  // 转换成数组 v ，取值方式  v[0] …

                             // 以 XML 格式返回

var xmlDoc =xhr.responseXML.documentElement;

              或： var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.loadXML(xhr.responseText);

xmlDoc...childNodes[0].nodeValue; 相关操作参考 XML

                   }

         }

}

 

Web.Config  设置 <globalization requestEncoding="UTF-8"  responseEncoding="UTF-8" />

可以支持繁简体中文同时显示

 

前台以 XML 格式将参数 POST 到后台 (Javascript) ：

var XmlStr="<?xml version='1.0' encoding='UTF-8'?><REC>…. 采用 UTF-8 编码 ….</REC>";

xhr.open("POST",URL);

xhr.send( XmlStr );

 

后台接收 XML (C#)

using System.Xml;

XmlDocument XmlDoc;

if(Request.InputStream.Length>0){

XmlDoc=new XmlDocument();

try{   XmlDoc.Load(Request.InputStream); }    // 直接接收 XML 流

catch{                   // 不成功则先将输入流编码成字符串，再接收

System.IO.Stream stream = Request.InputStream;

byte[] buffer = new byte[stream.Length];

stream.Read(buffer,0,buffer.Length);

string szXML = System.Text.UnicodeEncoding.Default.GetString(buffer,0,buffer.Length);

XmlDoc.LoadXml(szXML);

}

if (XmlDoc.GetElementsByTagName("ID").Count>0 )

         sid=XmlDoc.GetElementsByTagName("ID")[0].ChildNodes[0].Value;

}

 

后台传送 XML 到前台：

String XmlStr=” <?xml version='1.0' encoding='UTF-8'?><REC>... 同样以 UTF-8 编码记录内容 ...</REC>";

Response.ContentType="text/xml";

Response.Write (XmlStr);

Response.End();

 

前台以字符串将参数 GET 到后台  (Javascript) ：

// encodeURI ( )                      返回有效的统一资源标识符的字符串，但不对  : / ; ?  等字符进行编码

// encodeURIComponent ( )   对所有字符进行编码，包括含有 HTML 标记的字符串

// escape ( )                                       返回 Unicode 格式的字符串，所有空格，标点及任何非 ASCII 字符

都用 %xx 编码替换，但不能对 URI 进行编码

var szURL="xxx.aspx?ttype=A&tname=" + escape(" 繁简体中文字符 ") + "&rndnum=" + Math.random();

xhr.open(" GET ", szURL);

xhr.send(null);

 

后台接收 (C#) ：

string ttype=Request["ttype"];

string tname= HttpUtility.UrlDecode(Request["tname"]);     // 对中文进行解码

 

使用AjaxPro.dll  (不同版本有些不同)

1 ．引用 using AjaxPro;

2 ．在 Web.Config 文件中 </system.web> 的前面加上

         <httpHandlers>

<add verb="POST, GET " path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>

</httpHandlers>

3 ．在 aspx.cs 文件，类定义的上一行加上 [ AjaxPro.AjaxNamespace (" 当前类名 ")]

    在定义的方法的上一行加上 [AjaxPro.AjaxMethod]  表示该方法是 Ajax 方法。

4 ．在当前 aspx 文件的 Page_Load ( ) 方法内加上：

AjaxPro.Utility.RegisterTypeForAjax(typeof( 定义 Ajax 方法所在的类名 ));

5 ．前台的 form 必须是 runat=server

6 ．在前台 Javascript 中使用 Ajax 类 .Ajax 方法 ( 参数 ,  回调函数名称 )  执行后台的 Ajax 方法

      function  回调函数 (result) { var  返回值 =result.value; }

如果返回值是 XML 字符串，则用

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.loadXML(result.value);