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("添加失败"); } } } }

 

posted @ 2018-05-22 17:14  心高心低  阅读(120)  评论(0编辑  收藏  举报