ajax    异步的JavaScript 和 XML
        它是创建交互式网页应用的网页开发技术
        ajax是一种无需重新加载整个网页的情况下，进行网页局部刷新的牛逼技术
    
        网络:  多台计算机（服务器）就可以形成一个网络       
             ip: 我们可以确定网络上服务器的地址    192.168.0.151
             端口: 80  传输数据   
----------------------------------------------------------------------------

ajax  核心概念       :   异步请求
        同步和异步的一个区别:
            其实就是阻塞和非阻塞
            阻塞：  就是必须得等到别人回应我了以后，我才能继续去做其他的事情
            
            非阻塞：就算我给别人发送了一个请求，数据传输过去，不管他是否给我响应，我会继续往下去执行
        
        ajax 它不是一门语言，它就是一门技术！
        
        网络请求方式： 有很多种    最常用的就是 post 、 get
        ajax  同样也有着两个请求的方式  post get
        

---------------------------------------------------------------------------

    创建ajax请求
        最最核心的东西是:   XMLHttpRequest
        
        有两种创建方式可以创建ajax请求对象
            1.  XMLHttpRequest
                ie7+  谷歌    火狐     .....
            
            2.  ActiveXObject
                ie5\ie6
                
                
            var xmlhttp = null;
            if(window.XMLHttpRequest){       //   IE7+    谷歌    火狐
                xmlhttp = new XMLHttpRequest();         //   创建XMLHttpRequest对象
            }else{     //   ie5   ie6
                xmlhttp = new ActiveXObject('Microsoft.XMLHttp');    //   创建请求对象
            }
                
                
        请求：   open
            1.设置请求方式
            2.设置请求地址
            3.设置它是同步还是异步
            
            xmlhttp.open('get',"json/data.json",true);
            
        
        发送请求:  send
            xmlhttp.send();
            
            post请求需要传递参数：
            xmlhttp.send(参数);    //     'user=admin&password=123'
        
        处理：
        xmlhttp.onreadystatechange = function(){
                //  readyState     代表ajax的请求状态
//              0: 请求未初始化
//              1: 服务器连接已建立
//              2: 请求已接收
//              3: 请求处理中
//              4: 请求已完成，且响应已就绪

                //   status     HTTP 的状态码
                //    200      响应成功
                //    404     请求路径找不到
                //    503     服务不可用 
                //    304    发送一次请求，在发送一次请求是按照前一次响应的数据来响应
                console.log(xmlhttp.readyState,xmlhttp.status);
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    console.log('响应成功')
                    console.log(xmlhttp.readyState,xmlhttp.status);
                }
            }
            
        返回结果：
            有两种       responseText        responseXML  
            
            responseText   :   txt    json
            
            responsXML   :   xml
            
        post  和   get  的区别？
        
        
        get:  它会把你提交的信息显示出来   
            不安全      用户登录
            get 传输数据量比较小
            
            
        post :  不会把你提交的信息显示
            比get要安全
            post 传输的数据量会大很多很多
            
        什么时候用post或是get?
            更趋向于有后台来决定     后台要你用get  你就用get   要你用post你就用post
        
---------------------------------------------------------------------------------------


    ajax 请求txt文件？       
    
            var xmlhttp = null;
            if(window.XMLHttpRequest){       //   IE7+    谷歌    火狐
                xmlhttp = new XMLHttpRequest();         //   创建XMLHttpRequest对象
            }else{     //   ie5   ie6
                xmlhttp = new ActiveXObject('Microsoft.XMLHttp');    //   创建请求对象
            }
            
            //   open()      设置请求参数
                //   请求方式
                //   请求地址
                //   同步还是异步
            xmlhttp.open('get',"json/data.json",true);
            
            //  send()    发送请求
            
            xmlhttp.send();
            
            // xmlhttp       onreadstatechange
            
            xmlhttp.onreadystatechange = function(){
                //  readyState     代表ajax的请求状态
//              0: 请求未初始化
//              1: 服务器连接已建立
//              2: 请求已接收
//              3: 请求处理中
//              4: 请求已完成，且响应已就绪


                //   status     HTTP 的状态码
                //    200      响应成功
                //    404     请求路径找不到
                //    503     服务不可用 
                //    304    发送一次请求，在发送一次请求是按照前一次响应的数据来响应
                console.log(xmlhttp.readyState,xmlhttp.status);
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    console.log('响应成功')
                    console.log(xmlhttp.readyState,xmlhttp.status);
                    console.log(xmlhttp.responseText)
                }
            }
            
            

--------------------------------------------------------------------------------------

    ajax 请求json文件?
    
            var type = document.getElementById('type');
            var type1 = document.getElementById('type1');
        
            //   创建
            var xmlhttp = null;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
            }
            //  设置一下参数
            xmlhttp.open('get',"json/data.json",true);
            
            //  响应
            
            xmlhttp.onreadystatechange = function(){
                //   ajax 请求状态
                //   http  状态
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var txt = xmlhttp.responseText;      //  返回的是字符串
                    //  转换为json
                    var json = JSON.parse(txt);
                    //  数据
                    var arr = json.ObjectType.option;
                    arr.forEach(function(e){
                        console.log(e);
                        var op = document.createElement('option');
                        op.innerHTML = e.text;
                        op.setAttribute("value",e.value);
                        type.appendChild(op);
                    })
                    type.onchange = function(){
                        var id = this.value;
                        var obj = null;
                        type1.innerHTML = "";
                        arr.forEach(function(e){
                            if(e.value == id){
                                obj = e.option;
                                return;
                            }
                        })
                        
                        if(obj == undefined){
                            var op = document.createElement('option');
                            op.innerHTML = "--没有选项--";
                            type1.appendChild(op);
                        }else{
                            obj.forEach(function(e){
                                var op = document.createElement('option');
                                op.innerHTML = e.text;
                                op.setAttribute("value",e.value);
                                type1.appendChild(op);
                            })
                        }
                    }
                    type.onchange();
                    
                }
                
            }
            
            //   发送
            xmlhttp.send()


----------------------------------------------------------------------------------

    ajax 请求xml文件？
    
        //   创建请求对象
            var xmlhttp = null;
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject('Microsoft.XMLHttp');
            }
            
            //   设置参数
            
            xmlhttp.open('get',"xml/book.xml",true);
            
            //  响应
            
            xmlhttp.onreadystatechange = function(){
                //   ajax  请求状态         xmlhttp.readyState      4
                //   http  状态              xmlhttp.status          200
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    //   获取xml  返回的结果需要通过  responseXML   
                    var xm = xmlhttp.responseXML;
                    console.log(xm);
                    
                    //   操作xml和操作html很是类似
                    
                    var names = xm.getElementsByTagName('name');
                    for(var i=0;i<names.length;i++){
                        var li = document.createElement('li');
                        li.innerHTML = names[i].innerHTML;
                        ul.appendChild(li);
                    }
                    
                    
                }
                
            }
            
            //   发送
            
            xmlhttp.send();
            
            
--------------------------------------------------------------------------------------

    ajax 的封装     
    
            function ajax(method,uri,data,fun){           //  发送数据
                //  创建请求对象
                    var xmlhttp = null;
                    if(window.XMLHttpRequest){
                        xmlhttp = new XMLHttpRequest();
                    }else{
                        xmlhttp = new ActiveXObject("Microsoft.XMLHttp");
                    }
                //  设置请求参数
                    xmlhttp.open(method,uri,true);
                
                //  响应
                    xmlhttp.onreadystatechange = function(){
                        //  ajax的状态  
                        //   http  状态
                        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                            var result = xmlhttp.responseXML ? xmlhttp.responseXML:xmlhttp.responseText;
                            fun(result);
                        }
                    }
                
                //   发送
                    var sendstr = "";
                    for(x in data){
                        if(sendstr != ""){
                            sendstr += "&";
                        }
                        sendstr += x + "=" + data[x];
                    }
                    xmlhttp.send(sendstr);
            }