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 onblur="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);