零基础学习AJAX之AJAX的简介和基础(5)

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
    if(Request.HttpMethod == "POST")
        Response.Write("POST: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
    else if(Request.HttpMethod == "GET")
        Response.Write("GET: " + Request["firstName"] + ", your birthday is " + Request["birthday"]);
%>

从以上代码看出POST和GET都发送了数据异步请求，通常在数据不多的时候使用GET，在数据较多的时候使用POST。

在使用PSOT发送中文字符时，post接收会乱码，使用GET发送中文字符正常。这是因为异步对象xmlHttp在处理返回的responseText的时候，是按照UTF-8编码的。
通常的解决办法是escape()对发送的数据进行编码，然后在返回的responseText再使用unescape()进行解码。然而在javascript编程中通常不推荐escape()和unescape()。而推荐使用encodeURI()和decodeURI()。这里要正常运行，必须对发送的数据进行两次encodeURI()编码。
代码如下

复制代码 代码如下:

    function createQueryString(){
        var firstName =document.getElementById("firstName").value;
        var birthday =document.getElementById("birthday").value;
        var queryString = "firstName="+firstName +"&birthday="+birthday;
        return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题
    }

而且在返回数据responeText时再进行一次解码，代码如下

复制代码 代码如下:

function handleStateChange(){
            if(xmlHttp.readyState==4&&xmlHttp.status ==200){
                var responeDiv =document.getElementById(serverResponse);
                responeDiv.innerHTML = decodeURI(XMLHttp.responseText);//编码
            }
        }

这样POST模式下也能使用中文了。

3.服务器返回xml

XML是一种可扩展标记语言(Extensible Markup Language)，它是一种可自定义标记的语言，用来克服html局限，按照实际功能来看，xml主要用于数据存储。

在ajax中，服务器如果返回XML，可通过异步对象的responseXML属性来获取，开发者可以利用DOM的作用方法进行处理。

假设服务器返回

复制代码 代码如下:

<?xml version="1.0" encoding="gb2312"?>
<list>
    <caption>Member List</caption>
    <member>
        <name>isaac</name>
        <class>W13</class>
        <birth>Jun 24th</birth>
        <constell>Cancer</constell>
        <mobile>1118159</mobile>
    </member>
    <member>
        <name>fresheggs</name>
        <class>W610</class>
        <birth>Nov 5th</birth>
        <constell>Scorpio</constell>
        <mobile>1038818</mobile>
    </member>
    <member>
        <name>girlwing</name>
        <class>W210</class>
        <birth>Sep 16th</birth>
        <constell>Virgo</constell>
        <mobile>1307994</mobile>
    </member>
    <member>
        <name>tastestory</name>
        <class>W15</class>
        <birth>Nov 29th</birth>
        <constell>Sagittarius</constell>
        <mobile>1095245</mobile>
    </member>
    <member>
        <name>lovehate</name>
        <class>W47</class>
        <birth>Sep 5th</birth>
        <constell>Virgo</constell>
        <mobile>6098017</mobile>
    </member>
    <member>
        <name>slepox</name>
        <class>W19</class>
        <birth>Nov 18th</birth>
        <constell>Scorpio</constell>
        <mobile>0658635</mobile>
    </member>
    <member>
        <name>smartlau</name>
        <class>W19</class>
        <birth>Dec 30th</birth>
        <constell>Capricorn</constell>
        <mobile>0006621</mobile>
    </member>
    <member>
        <name>tuonene</name>
        <class>W210</class>
        <birth>Nov 26th</birth>
        <constell>Sagittarius</constell>
        <mobile>0091704</mobile>
    </member>
    <member>
        <name>dovecho</name>
        <class>W19</class>
        <birth>Dec 9th</birth>
        <constell>Sagittarius</constell>
        <mobile>1892013</mobile>
    </member>
    <member>
        <name>shanghen</name>
        <class>W42</class>
        <birth>May 24th</birth>
        <constell>Gemini</constell>
        <mobile>1544254</mobile>
    </member>
    <member>
        <name>venessawj</name>
        <class>W45</class>
        <birth>Apr 1st</birth>
        <constell>Aries</constell>
        <mobile>1523753</mobile>
    </member>
    <member>
        <name>lightyear</name>
        <class>W311</class>
        <birth>Mar 23th</birth>
        <constell>Aries</constell>
        <mobile>1002908</mobile>
    </member>
</list>

下面利用异步对象获取该XML，并将所有的项都罗列在表格中，初始化对象的方法与获取文本完全相同，代码如下：

复制代码 代码如下:

    var xmlHttp;