AJAX

异步的JavaScript和xlm技术

提交请求只局部刷新——局部刷新技术

AJAX和核心技术

1）JavaScript技术

　　作用：a 发送请求

　　　　　b dom编程更新页面

2）服务器不再响应整个页面，而响应数据

　　数据格式分3种：字符串    XML  JSON

　　json 格式 ：[{name:"张三"，age:30 }]

3）xmlHttpRequest 对象   浏览器提供的

　　作用：发送请求

AJAX原理

1）在JS函数中 创建xmlhttprequest对象

2）使用对象发送请求（请求servlet,并传递数据），同时告知服务器回调函数是哪个

3）回调函数：接收服务器响应的数据，更新页面

//创建XmlHttpRequest
function createXmlHttpRequest(){
    var xhr;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        try {
            //IE6以下的
            xhr = new ActiveXObject("MSXML2.XMLHTTP");
        } catch (e) {
            //IE6及以上的
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xhr;
}

<script type="text/javascript">
    function send() {
        var xhr = createXmlHttpRequest();        
        //构建请求地址
        var val = document.getElementsByName("empno")[0].value;
        var url = "checkEmp?empno="+val;
        //设置请求初始化
        xhr.open("get",url,true);
        //发送请求
        xhr.send();
        
        //匿名函数，回调函数，获得响应
        xhr.onreadystatechange = function(){
            //回调函数，接受响应数据，局部刷新。dom编程刷新
            //此步代表响应完毕，网络状态正常
            if(xhr.readyState == 4 && xhr.status == 200){
                //获得响应的数据
                var res = xhr.responseText;
                //获得要输出的区域
                var s = document.getElementById("sno");
                if(res == "y"){
                    s.innerText = "编号可用";
                    s.style.color = "green";
                    return true;
                }else{
                    s.innerText = "编号已存在";
                    //alert("编号存在");
                    s.style.color = "red";
                    return false;
                }
            }
        }
    }

</script>

 POST提交数据

function addEmp(){
        var xhr = createXmlHttpRequest();
        var url = "addEMP";
        //构建要提交的数据
        var empno = document.getElementsByName("empno")[0].value;
        var ename = document.getElementsByName("ename")[0].value;
        var job = document.getElementsByName("job")[0].value;
        var mgr = document.getElementsByName("mgr")[0].value;
        var sal = document.getElementsByName("sal")[0].value;
        var deptno = document.getElementById("sel").value;
        //构建提交数据
        var data = "empno="+empno+"&ename="+ename+"&job="+job+"&mgr="+mgr+"&sal="+sal+"&deptno="+deptno;
        xhr.open('post',url,true);
　　　　//必须在发送前设置
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(data);
         
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                var res = xhr.responseText;
                if(res > 0){
                    alert("添加成功");
                }else{
                    alert("添加失败");
                }
            }
        }
        
    }