AJAX提交数据

AJAX指南(3) ---- 提交数据

作者：张元一（zhangyuanyi@gmail.com）
日期：2005-12-25
本人才疏学浅，错误和疏漏在所难免，欢迎大家批评指正。

    前面的两个例子都只是从服务端异步的获取数据，但是作为一个交互式的AJAX应用，服务端必须能够处理客户端提交的数据，因此，这一节我们将通过一个查询 邮政编码的程序来演示如何向服务端异步的提交数据并获取响应。

    同样，在开始之前，我们需要先建立一个HTML框架：

          <p>选择要查询的城市:
                <select οnchange="getCityInfo(event)" id="cityName">
                    <option value=""></option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    ......
                    <option value="重庆">重庆</option>
                </select>
          </p>
          <div id="result">
          </div>

    框架包括一个有31个城市名的单选框和一个用于显示结果的DIV，如果单选框中的选择发生变化，则getCityInfo函数会被调用：

          function getCityInfo(event)
          {
                //获取用户要查询的城市名
                var elem = (event.target) ? event.target : ((event.srcElement) ? event.srcElement : null);
                var cityName = elem.options[elem.selectedIndex].value;

                //如果城市名为空，清空结果并返回
                if(cityName == "") {
                    document.getElementById("result").innerHTML = "";
                    return;
                }

                //使用encodeURIComponent编码请求字符串，这里只有一个数据，
              //就是要查询的城市名
                var queryString = encodeURIComponent("cityName") + "=" +
                encodeURIComponent(cityName);

                //告诉服务端,提交的数据使用UTF-8编码
                var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
                var url = "cityinfo.php";

                //向服务端发送请求
                http.open("post", url, true);
                http.onreadystatechange = showCityInfo;
                http.setRequestHeader("Content-Type", contentType);
                http.send(queryString);
          }

    showCityInfo函数用于向用户显示服务端返回的结果:

          function showCityInfo()
          {
                if (http.readyState == 4) {
                    //获取服务端响应，这里我们假设服务端返回的是
                    //像"上海,200000,021"这样的文本
                    var res = http.responseText;
                    //使用split将响应分割成3个子串
                    var cityInfo = res.split(",");

                    //格式化为HTML并显示给用户
                    document.getElementById("result").innerHTML =
                          "<table><tr><td>城市</td><td>邮政编码</td><td>电话区号</td></tr>" +
                          "<tr><td>" + cityInfo[0] + "</td>" +
                          "<td>" + cityInfo[1] + "</td>" +
                          "<td>" + cityInfo[2] + "</td></tr></table>";
                }
          }

    cityinfo.php比较简单，如下所示：

          <?php
          $cityInfo = array("北京" => "北京,100000,010",
                    "上海" => "上海,200000,021",
                    ......
                    ......
                    "重庆" => "重庆,400000,023");

          $cityName = iconv("utf-8", "gb2312", urldecode($_POST['cityName']));
          echo iconv("gb2312", "utf-8", $cityInfo[$cityName]);
          ?>

    需 要注意的是，由于客户端提交的数据是UTF-8编码的，因此需要调用iconv函数将其转换为gb2312,而返回的数据又需要从gb2312转换为 UTF-8，下面是经过修饰的 输出页面：




    在这个例子中，我们只处理了一个单选框，但是如果需要将整个表单的数据提交到服务器，则下面这个函数会很有用，它将指定表单中的数据串行化。调用者只需要将返回的字符串发送到服务端就可以了：

          function serializeForm(theform)
          {
                var els = theform.elements;
                var len = els.length;
                var queryString = "";
 
                this.addField = function(name,value)
                {
                    if (queryString.length>0) {
                          queryString += "&";
                    }
   
                    queryString += encodeURIComponent(name) + "=" + encodeURIComponent(value);
                };
 
                for (var i=0; i<len; i++) {
                    var el = els;
   
                    if (!el.disabled) {
                          switch(el.type) {
                          case 'text':
                          case 'password':
                          case 'hidden':
                      &nbs