学习路上的点滴————Ajax知识篇

一.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")通过标签名称获得元素。

学习路上的点滴————Ajax知识篇

猜你喜欢