ajax基础和基本使用

1. ajax是什么？
    1）异步的javascript和xml
    为了解决传统的web应用当中“等待－响应－等待”的弊端而创建的一种技术，其实质可以
    理解为：使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求，服务器返
    回xml数据或者是文本数据，然后在浏览器端使用这些数据更新部分页面，整个过程，页
    面无任何的刷新。
    
    2）传统的“等待－响应－等待”：
        指的是，在传统的web应用当中，比如注册，用户填写完整个注册信息，然后提交，
        此时，浏览器会将整个注册页面抛弃，等待服务器返回一个新的完整的页面。在等待
        过程当中，用户不能够做其他操作。服务器生成新的页面发送给浏览器，浏览器需要
        重新解析整个页面生成相应的界面。
        
2.XmlHttpRequest对象
    1）如何获得该对象
        该对象并没有标准化，要区分浏览器。
        ie浏览器不指出XMLHttpRequest类型，其他浏览器支持。
         function getXmlHttpRequest(){
                 var xmlHttpRequest = null;
                 iif((typeof))
         }
    2)属性
        onreadystatechange:注册监听器（绑定事件处理代码）
        readyState：ajax对象与服务器间通讯的状态，该状态有0
        ，1，2，3，4，五个值，当值为4时，表示收到了服务器返回
        所有的数据。
        responseText：获取服务器返回的文本数据
        responseXML：获得服务器返回的xml数据
        statue：获得状态码
        
    3）编程
        step1  获得XmlHttpRequest对象
            var xhr = getXhr();
            
        step2 发请求
        1)发送get请求
        //open(请求方式，请求地址，同步还异步)
        //如果有请求参数，应该添加到请求地址后面
        //true表示异步，false表示同步
            xhr.open('get','check_username.do?username=zs',true);
            xhr.onreadystatechange=f1;
            xhr.send(null);
        2)发送post请求
            xhr.open(‘post','check_username.do',true);
            //为xhr生成的请求数据包添加一个content-type消息头
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send("username=zs");
            
        step3 编写服务器端代码，来处理请求。
        step4 在监听器（时间处理代码当中）处理服务器返回的数据。
            function f1(){
                //只有状态等于4
                if(xhr.readyState==4){
                //获得服务器返回的数据    
                    var txt = xhr.responseText;
                //var xml = xhr.reqponseXML;
                //dom操作
                ...
                }
            }


例子:
JS部分

function $(id){
    return document.getElementById(id);
}
function $F(id){
    return document.getElementById(id).value;
}
function getXhr() {
    var xhr = null;
    if (window.XMLHttpRequest) {
                    //非ie浏览器
        xhr = new XMLHttpRequest();
    } else {
                    //ie浏览器
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}

javascript部分
使用get

function check_name(){
                
                //step1 得到XMLHttpRequest对象
                var xhr = getXhr();
                //step2 发送请求
                xhr.open('get',
                'check_name.do?username='
                + $F('username'),true);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState == 4){
                        //只有状态等于4,才能够获得服务器返回的
                        //数据。
                        if(xhr.status==200){
                            //说明服务器返回的数据正常
                            var txt = xhr.responseText;
                        //更新页面
                            $('name_msg').innerHTML = txt;
                        }else{
                        $('name_msg').innerHTML = '稍后重试';
                        }
                        
                    }else{
                        //当readyState的值不等于4，表示xhr对象正在与服务器交互
                        $('name_msg').innerHTML ='正在检查..';
                    }
                };
                xhr.send(null);
            }
            
        //使用post
            function check_name2(){
                
                //step1 得到XMLHttpRequest对象
                var xhr = getXhr();
                //step2 发送请求
                xhr.open('post',
                'check_name.do',true);
                xhr.onreadystatechange=function(){
                    if(xhr.readyState == 4){
                        //只有状态等于4,才能够获得服务器返回的
                        //数据。
                        if(xhr.status==200){
                            //说明服务器返回的数据正常
                            var txt = xhr.responseText;
                        //更新页面
                            $('name_msg').innerHTML = txt;
                        }else{
                        $('name_msg').innerHTML = '稍后重试';
                        }
                        
                    }else{
                        //当readyState的值不等于4，表示xhr对象正在与服务器交互
                        $('name_msg').innerHTML ='正在检查..';
                    }
                };
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
                xhr.send('username=' + $F('username'));
            }

            
            
jsp部分：
 

 用户名:<input id="username"
            name="username"
            onblur="check_name();"/>
            

            
Servlet部分

String username =
                request.getParameter("username");
            if(username.equals("zs")){
                out.println("用户名已经存在");
            }else{
                out.println("可以使用");
            }

            
            
            
            
3.ajax需要注意的问题
1）缓存问题：
    当采用get方式向服务器发送请求时，ie浏览器会先查询缓存当中有没有
    结果，如果有，则不会向服务器发送请求。
    解决方案：
        a.在请求地址后面加上一个随机数
        b.或者使用post方式
2）编码问题
    a.连接地址当中有中文
        浏览器一定会使用utf-8对连接地址中的中文进行编码
        解决方式：
        对于tomcat,tomcat_home/config/server.xml，
       在 <Connector/> 中添加URLEncoding="utf-8"
        重新启动服务器。
    b.连接地址中包含了中文参数
        浏览器会对连接地址中的中文参数进行编码，会使用打开
        连接所在页面的编码格式来编码.
        解决方式：
            step1:
            对于tomcat,tomcat_home/config/server.xml，
           在 <Connector/> 中添加URLEncoding="utf-8"
            重新启动服务器。
            step2：要保证连接所在页面以utf-8编码格式打开
            如果页面中不以utf-8来编码，那就对中文参数手动
            转码:<%=URLEncoder.encoding("张三")%>
    c.ajax编程当中如何向服务器发送中文
        在ajax编程中，不是浏览器向服务器发送请求，是XMLHttpRequest对
        象向服务器发送请求，该对象也会对请求中的中文参数进行编码。
        
        使用get方法发送请求时
        ie浏览器内置的MLHttpRequest对象（其实是ActiveXObject）
        会采用gbk编码，而其他浏览器，采用utf-8编码。
            
        解决办法：

            step1:
            对于tomcat,tomcat_home/config/server.xml，
           在 <Connector/> 中添加URLEncoding="utf-8"
            重新启动服务器。
            step2:使用encodeURI(javascript内置的一个函数)
                encodeURI(url)
                
        使用post发送请求，此时，浏览器会对中文参数统一进行utf-8编码。
        解决方式：request.setCharacterEncoding("utf-8");