随笔三（Ajax）

一、简介

 > “Asynchronous Javascript And XML”（异步JavaScript和XML），

 > 并不是新的技术，只是把原有的技术，整合到一起而已。 

           1.使用CSS和XHTML来表示。
           2. 使用DOM模型来交互和动态显示。
           3.使用XMLHttpRequest来和服务器进行异步通信。
           4.使用javascript来绑定和调用。

二、使用

1、根据不同的浏览器创建XMLHttpReques

            function  ajaxFunction(){
               var xmlHttp;
               try{ // Firefox, Opera 8.0+, Safari
                    xmlHttp=new XMLHttpRequest();
                }
                catch (e){
                   try{// Internet Explorer
                         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                      }
                    catch (e){
                      try{
                         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                      catch (e){}
                      }
                }
        
                return xmlHttp;
             }

2、由javascript发送请求

        //执行get请求
    function get() {
        
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();
        
        //2. 发送请求。
        // http://localhost:8080/day16/demo01.jsp
        //http://localhost:8080/day16/DemoServlet01
        
        /*    
            参数一： 请求类型  GET or  POST
            参数二： 请求的路径
            参数三： 是否异步， true  or false
        */
        request.open("GET" ,"/day16/DemoServlet01" ,true );
        request.send();
    }

3,、接受数据（直接在原来的get函数里就行）

        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
        request.onreadystatechange = function(){
            
            //前半段表示 已经能够正常处理。  再判断状态码是否是200
            if(request.readyState == 4 && request.status == 200){
                //弹出响应的信息
                alert(request.responseText);
            }
        }

4、post方式发送数据

//2. 发送请求
        request.open( "POST", "/day16/DemoServlet01", true );
    
        //如果不带数据，写这行就可以了
        //request.send();
        
        //如果想带数据，就写下面的两行
        
        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        
        //带数据过去  ， 在send方法里面写表单数据。 
        request.send("name=aobama&age=19");