实现AJAX的第一步

今天设计了添加地点的程序。其实本来很简单，用户输入地点的名称和简介，点击按钮，数据保存到数据库。不过为了避免用户在不知情的状况下添加数据库里已经存在的地点，就有必要在用户输入的同时搜索数据库，显示出与用户输入的地点名称重复的已经存在的地点，让用户决定是否继续添加。

为了给用户带来良好的使用体验，实现这个功能不应该涉及postback导致页面刷新，换句话说，就是要使用现在流行的Ajax技术。

我一开始想到的方法是：监视input控件的onchange事件调用运行一个外部JavaScript文件，通过这个JS文件的document.write()方法来显示。我想让输入的文本通过onchange事件调用函数的参数传递给JavaScript文件，再通过JavaScript文件的后台读取数据并显示。后来发现两个问题：
1.参数只能传递给JavaScript文件，却无法传递到后台；
2.onchange事件是在焦点离开input控件时才触发，而不能实现输入的同时调用函数。
程序修改了N次后，我觉得这条路走不过去了。

前几天买了一本书，名字叫《Ajax修炼之道》。想起来上面有个简单的例子，实现了当用户输入一个城市的电话区号后，另外一个文本框就自动显示那个城市的名称。它使用了一个叫XMLHttpRequest的对象。我根据这个例子，重新思考后，写下了现在的代码：

 1            var xhr;
 2            
 3            function createXMLHttpRequest() {
 4                if (window.ActiveXObject) {
 5                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
 6                }
 7                else if (window.XMLHttpRequest) {
 8                    xhr = new XMLHttpRequest();
 9                    
10                }
11            }
12            
13            function getchar(c){
14                createXMLHttpRequest();
15                
16                xhr.onreadystatechange=showplace;
17                xhr.open("GET","load_isplace.aspx?c=" + c);
18                xhr.send(null);
19            }
20            
21            function showplace(){
22                if(xhr.readystate==4){
23                    var strreturn=xhr.responseText;
24                    document.getElementById("divshowplace").innerHTML =strreturn;
25                }
26            }

现在已经可以实现参数传递到后台，第一个问题已经解决。我又上网找了一些资料，知道了还有一个onpropertychange事件，替换onchange后，就实现了当文本框内容改变时调用函数。问题都解决了。

不过不幸的是，这个程序对字母和数字没有问题，但中文的输入却会返回乱码。上网一查，才知道XMLHttpRequest对象只支持Utf-8编码，不支持GB编码。问题严重了。今天没有时间了，明天解决这个问题。