原生js代码实现ajax 的方式

刚刚学习了 ajax.很是兴奋。

因为写项目的时候，刚开始是没有加入ajax的，所以一开始写前台页面初始数据的填充（点击链接或按钮跳出的页面的数据）或者是下拉框的三级联动的时候，感觉是真的难受啊。因为每一次点击事件都要重新刷新整个页面。

    不使用ajax 难受的理由：    

    1，每次要更新界面的一部分数据 的话，就必须要刷新整个页面。这带来的结果是，为了保证不更新的数据不丢失，就必须要把这些不不跟新的数据 也一并传到后台，处理完之后和跟新的数据一并返回前台。后台代码就会增多。操作繁琐。

    2，前台的数据显示会改变，三级联动的时候，点选了一个下拉框，选择的选项会因为点击其他按钮（页面重新刷新）出现变动。

ajax（异步js and xml） 其实就是利用浏览器的接口 XMLHttpRequest ,调用方法 访问后台。这个技术一开始是微软公司提出来的，后其他浏览器也提供了这个接口。但ie 浏览器 和其他浏览是 实例化的对象不一样。

原生js代码实现ajax功能：

    var xmlHttpRequest = null;

//1根据浏览器实例化 对应的XMLHttpRequest 对象

    function  getXmlHttpRequest(){

    if( (typeof(XMLHttpRequest)) != 'undefined'){

    //非ie浏览器. 注意： 实际上，从ie7开始就可以直接支持这个方法
        xmlHttpRequest = new XMLHttpRequest();
      }else {
        //alert("2");
        //ie浏览器
        xmlHttpRequest =
        new ActiveXObject('Microsoft.XMLHttp');
      }

    return xmlHttpRequest;

} 

//2设置访问后台的method  url

function f(){

    xmlHttpRequest = getXMLHttpRequest();

    xmlHttpRequest. open('post','url',true);

   xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //设置头信息
        xmlHttpRequest.onreadystatechange=fx; //挂载回调函数
        xmlHttpRequest.send(); //发送参数

}

function fx(){ //回调函数
    
        if(xmlHttpRequest.status == 200 &&xmlHttpRequest.readyState==4){
            var resTXT = xmlHttpRequest.responseText;  //后台产过来的数据是 json
            var j= JSON.parse(resTXT);

            alert(resTXT);

            //数据填充到下拉框

            var selectDep = document.getElementById('depotSelect');
            var temp ="<option id=\"-1\">====请选择仓库====</option>  ";
            for(var i =0;i<j.length;i++){
                temp=temp+"<option>"+ j[i].depotName+"</option> ";
            }
            selectDep.innerHTML=temp;
        }
        
    
    }   

----学习要坚持，工作心态要好