一.Ajax的介绍
1.AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
2 .Ajax并不是新的技术,只是把原有的技术,整合到一起而已。
(1)使用CSS和XHTML来表示。
(2) 使用DOM模型来交互和动态显示。
(3).使用XMLHttpRequest来和服务器进行异步通信。
(4)使用javascript来绑定和调用。
3.网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动,只刷新某些地方。
二.Ajax的使用
1.创建对象
1 function ajaxFunction(){ 2 var xmlHttp; 3 try{ // Firefox, Opera 8.0+, Safari 4 xmlHttp=new XMLHttpRequest(); 5 } 6 catch (e){ 7 try{// Internet Explorer 8 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 9 } 10 catch (e){ 11 try{ 12 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 13 } 14 catch (e){} 15 } 16 } 17 18 return xmlHttp; 19 }
2.发送请求 此处为get请求
1 //执行get请求 2 function get() { 3 4 //1. 创建xmlhttprequest 对象 5 var request = ajaxFunction(); 6 7 //2. 发送请求。 8 // http://localhost:8080/day16/demo01.jsp 9 //http://localhost:8080/day16/DemoServlet01 10 11 /* 12 参数一: 请求类型 GET or POST 13 参数二: 请求的路径 14 参数三: 是否异步, true or false 15 */ 16 request.open("GET" ,"/day16/DemoServlet01" ,true ); 17 request.send(); 18 }
3.获取数据 如果发送请求的同时,还想获取数据,那么代码如下
1 //执行get请求 2 function get() { 3 4 //1. 创建xmlhttprequest 对象 5 var request = ajaxFunction(); 6 7 //2. 发送请求 8 request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true ); 9 10 //3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变,那么就执行 = 号右边的方法 11 request.onreadystatechange = function(){ 12 13 //前半段表示 已经能够正常处理。 再判断状态码是否是200 14 if(request.readyState == 4 && request.status == 200){ 15 //弹出响应的信息 16 alert(request.responseText); 17 } 18 } 19 request.send(); 20 }
4.POST 请求
1 function post() { 2 //1. 创建对象 3 var request = ajaxFunction(); 4 5 //2. 发送请求 6 request.open( "POST", "/day16/DemoServlet01", true ); 7 8 //如果不带数据,写这行就可以了 9 //request.send(); 10 11 //如果想带数据,就写下面的两行 12 13 //如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据 14 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 15 16 //带数据过去 , 在send方法里面写表单数据。 17 request.send("name=aobama&age=19"); 18 }
5.POST 获取数据
1 function post() { 2 //1. 创建对象 3 var request = ajaxFunction(); 4 5 //2. 发送请求 6 request.open( "POST", "/day16/DemoServlet01", true ); 7 8 //想获取服务器传送过来的数据, 加一个状态的监听。 9 request.onreadystatechange=function(){ 10 if(request.readyState==4 && request.status == 200){ 11 12 alert("post:"+request.responseText); 13 } 14 } 15 16 //如果使用的是post方式带数据,那么 这里要添加头, 说明提交的数据类型是一个经过url编码的form表单数据 17 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 18 19 //带数据过去 , 在send方法里面写表单数据。 20 request.send("name=aobama&age=19"); 21 }
三.用例
1.页面准备
1 2 3 <body> 4 <table border="1" width="500"> 5 <tr> 6 <td>用户名:</td> 7 <td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td> 8 </tr> 9 <tr> 10 <td>密码</td> 11 <td><input type="text" name=""></td> 12 </tr> 13 <tr> 14 <td>邮箱</td> 15 <td><input type="text" name=""></td> 16 </tr> 17 <tr> 18 <td>简介</td> 19 <td><input type="text" name=""></td> 20 </tr> 21 <tr> 22 <td colspan="2"><input type="submit" value="注册"></td> 23 </tr> 24 </table> 25 </body>
2.数据库准备,创建数据库与表
3.Servlet代码
1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 2 try { 3 4 request.setCharacterEncoding("UTF-8"); 5 6 //1. 检测是否存在 7 String name = request.getParameter("name"); 8 System.out.println("name="+name); 9 10 UserDao dao = new UserDaomImpl(); 11 boolean isExist = dao.checkUserName(name); 12 13 //2. 通知页面,到底有还是没有。 14 if(isExist){ 15 response.getWriter().println(1); //存在用户名 16 }else{ 17 response.getWriter().println(2); //不存在该用户名 18 } 19 20 } catch (SQLException e) { 21 e.printStackTrace(); 22 } 23 }
4.dao代码
1 public class UserDaomImpl implements UserDao{ 2 3 @Override 4 public boolean checkUserName(String username) throws SQLException { 5 QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource()); 6 7 String sql = "select count(*) from t_user where username =?"; 8 9 10 runner.query(sql, new ScalarHandler(), username); 11 12 Long result = (Long) runner.query(sql, new ScalarHandler(), username); 13 return result > 0 ; 14 } 15 16 }
5.JSP页面显示
1 2 function checkUserName() { 3 4 //获取输入框的值 document 整个网页 5 var name = document.getElementById("name").value; // value value() val val() 6 //1. 创建对象 7 var request = ajaxFunction(); 8 9 //2. 发送请求 10 request.open("POST" ,"/day16/CheckUserNameServlet" , true ); 11 12 //注册状态改变监听,获取服务器传送过来的数据 13 request.onreadystatechange = function(){ 14 15 if(request.readyState == 4 && request.status == 200){ 16 //alert(request.responseText); 17 var data = request.responseText; 18 if(data == 1){ 19 //alert("用户名已存在"); 20 document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>"; 21 }else{ 22 document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>"; 23 //alert("用户名未存在"); 24 } 25 } 26 27 } 28 29 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 30 request.send("name="+name); 31 }
四.HTML的一些简单东东
1.alert 是弹出框
2.oElement = document.getElementById(sid);
它是一个document对象的方法,可以通过它来获得指定id的html元素。
例如在页面里表单元素你可以给它设置id值,或name值来区别同种类型的不同元素,当你设置id document.getElementById("id")来得到这个元素,从而通过document.getElementById("id").value 得到元素的值,类似的方法还有document.getElementsByName("name")通过元素名称呢个获得元素对象。document.getElementsByTagName("form")通过标签名称获得元素。