概念:AJAX：异步的 JavaScript 和 XML
AJAX作用:
1.与服务器进行数据交换: 通过AJAX可以给服务器发送请求，并获取服务器响应的是数据
使用了AJAX和服务器进行通讯，就可以使用HTML和AJAX来替换JSP页面了
2.异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新网页的技术，如:搜索联想、用户名是否可用校验，等等...
AJAX快速入门:
1.编写AjaxServlet,并使用response输出字符串
2.创建XML HttpRequest 对象: 用于和服务器交换数据
3.向服务器发送请求
4.获取服务器响应数据
<script> // 1.创建核心对象 var xhttp ; if (window.XMLHttpRequest){ xhttp=new XMLHttpRequest(); }else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // 2.发送请求 xhttp.open("GET", "http://localhost:8080/brand-demo/ajaxServlet"); xhttp.send(); // 3.获取相应 xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } }; </script>
案例:使用AJAX验证用户名是否存在
需求:在完成用户注册时，当用户名输入框失去焦点时,校验用户名是否在数据库中已存在
<script> // 1.给用户输入框绑定，失去焦点事件 document.getElementById("username").onblur=function (){ // 2.发送AJAX请求 // 获取用户名的值 var username= this.value(); // 2.1创建核心对象 var xhttp ; if (window.XMLHttpRequest){ xhttp=new XMLHttpRequest(); }else { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } // 2.2 发送请求 xhttp.open("GET", "http://localhost:8080/brand-demo/selectUserServlet?username="+username); xhttp.send(); // 2.3获取相应 xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // alert(this.responseText); // 判断 if (this.responsesSent=="true"){ // 用户名存在，显示提示信息 document.getElementById("username_err").style.display=''; }else { // 用户名不存在，清楚提示信息 document.getElementById("username_err").style.display='none'; } } }; } </script>
