【记录】ajax以及一些乱码问题

时间：2010-08-19 来源：jelle

很就以前在使用AJAX的时候，那时候还不知道AJAX。于是在任务中被AJAX的乱码问题搞的'头破血流'。

创建xmlhttprequest 对象。

return window.ActiveXObject ? new window.ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

次对象一个 onreadystatechange 事件。有两个属性readyState，status。简单的AJAX我们将使用到这几个东西。

以下使用到的createXMLHttp()方法就是上面这段代码！

1：以GET方式发出一个请求的实现;

    var get = function(url, b, callback){
        var xmlhttp = createXMLHttp();
        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                callback(xmlhttp.responseText);
            }
        }
        if(b != undefined){
            var arr=[],e;
            for( e in b ){
                arr.push(e + '=' + encodeURIComponent(b[e]));
                //arr.push(e + '=' + b[e]);
                // 经过测试如果不使用 encodeURIComponent 编码在IE8下无法正确传递中文
            }
            url += '?' + arr.join('&');
        }
        xmlhttp.open('GET', url, true);
        xmlhttp.send();
    }
// 具体这个函数的参数设置也可以根据自己的习惯来设置

使用GET方式去发送一个请求，我们是把要传递的参数格式化(a=1,b=2) 以后附加到URL的后面。

服务器页面使用获取URL参数的方式即可获得。(比如Php: $_GET["a"]);

值得注意的是我们在格式化参数的时候使用到一个 encodeURIComponent（）方法进行了编码是为了不出现乱码；

其实有3个方法可以完成这个工作。escape,encodeURI,encodeURIComponent,大家可以查下资料。前两个方法对于一些特殊字符还是没有进行编码。

所以使用第3个是比较好的选择了。

如果你不使用编码直接发送数据，各个浏览器的表现可能不一样。比如IE你在发送中文数据的时候就会出现乱码（当然出现乱码的情况还很多，请接着看..）。

2：以POST方法发送一个请求的实现

    var ajax = function(a){
        var xmlhttp = createXMLHttp();
        xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
                    a.success(xmlhttp.responseText);
                } else return xmlhttp;
            }
        xmlhttp.open('POST', a.url, true);
        // 请求为post的时候 必须设置头信息
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        
        // 序列化要发送的数据
        var c = [];
        for(var e in  a.data){
            c.push(e + '=' + encodeURIComponent(a.data[e]));
            // 经过测试 经过URL编码以后更能够保证发送数据的正确性。　　　　　　//不编码可能造成部分特殊字符不能正确发送
        }
        a.data = c.join('&');
        xmlhttp.setRequestHeader("Content-length", c.length); // 好像是可选 
        xmlhttp.setRequestHeader("Connection", "close"); // 好像是可选
        xmlhttp.send(a.data);
        // 次数据发送以后服务端 使用 post 获取数据 比如php $_POST['a'];
        }
参数a是一个对象  他包含 {url:"http:...",data:{a:1,b2},success:function(){}}　　　　　　　　　　　　　地址            数据           成功回调函数

使用POST方法发出请求。数据也必须格式化(a=1,b=2) ；不过跟GET方法不一样的地方是我们是把数据写在了send（）方法里（xmlhttp.send(a.data);）。

服务器页面使用获取表单数据的方式即可获得。(比如Php: $_POST["a"]);

值得注意的是在使用post发送请求的时候我们必须设置请求的头信息。

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

经过测试如果不设置Content-type为application/x-www-form-urlencoded；服务器页面是无法获取到通过send()方法发送的数据。

最后关于乱码的问题。上面已经有两个地方会出现错误了。

1：比如参数没有进行编码直接传递，会出现传递不成功的问题。

2：在使用POST方法的时候没有设置Content-type，服务器页面无法获取发送过来的参数；

3：发送请求页面与请求页面的编码问题。在标准浏览器下请一定保持请求页面和被请求页面的编码方式是utf-8，不然中文会很悲剧。

<!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />-->
<!--// 经过测试 不使用上面的meta 申明charset在IE下会出现乱码-->
<!--
    *  header("Content-Type: text/html; charset=gb2312");
    被调用的AJAX页面使用了gb2312的编码 在chorme下出现了乱码。
    在IE下正常访问
-->
上面这里出现乱码的情况非常乱，不好排除。所以保持两个页面编码为UTF-8 参数编码后在传递。可以有效防止乱码

我测试的几个文件打包 http://files.cnblogs.com/idche/test.rar

申明：本文来自博客园 http://www.cnblogs.com/idche/ http://www.cnblogs.com/idche/archive/2010/08/19/1803977.html