AJAX根据城市名，自动完成相应的城市信息

wolf_19

    以前在做项目的时候碰到这样的需求。用户希望能够直接输入城市的名字，就能够得到这个城市的相应的信息。以前是在页面打开的时候生成几个JavaScript数组，然后来对比的。这样做的话，如果数据比较多的时候，用户会明显的感到响应延迟。

    现在该成用ajax的方法来做，速度要快一些，客户体验会好一些。谁要咱们处在“体验经济”时代呢！

    下面是做的一个小例子，由两个页面组成。

    city.html页代码如下：

function createRequestObject()
{
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}
var http = createRequestObject();
function sndReq(city)
{
    http.open('get', 'zipcode.jsp?city='+city);
    http.onreadystatechange = handleResponse;
    http.send(null);
}
function handleResponse()
{
    if(http.readyState == 4)
    {
        var response = http.responseText;
        var update = new Array();
        if(response.indexOf('|' != -1))
        {
            update = response.split('|');
            document.getElementById("tier").value = update[0];
      document.getElementById("rmm").value = update[1];
        }
    }
}
得到城市相应的信息
  
    输入城市的拼音:
   
  
  
    级别:
   
  
  
    负责人:
   
  


zipcode.jsp代码如下：

PS：
    Http.send()后，经检测Http.readystate==4，说明载入完毕，这时网页内容已经载入 到了Http.responseBody中了



本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/925/showart_96136.html