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