Ajax学习

本篇博客知识点
1.Ajax技术介绍
2.Ajax用GET、POST两种方式提交的主要代码
3.AJax技术封装成JS

Ajax技术介绍

           全称: Asynchronized(异步) Javascript And  Xml
               技术组成: Javascript, DOM, CSS 和  XMLHttpRequest(ActiveObject)对象

         xhr.readyState:
            0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 
            1 (初始化) 对象已建立，尚未调用send方法 
            2 (发送数据) send方法已调用，但是当前的状态及http头未知 
            3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误， 
            4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据 

Ajax用GET、POST两种方式提交的主要代码

GET方式主要代码

<script type="text/javascript">
        // 以下是GET方式的Ajax
        function check1(obj){
            var name = obj.value;
            //1.创建一个Ajax对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveObjcet("Microsoft.XNLHttp");
            }
            //2.设置通讯方式和地址
            var url = "<c:url value='/AjaxServlet?name="+name+"'/>";
            xhr.open("GET", url, "true"); // true--表示异步，false---表示同步
            //3.设置放回成功后的JS对象（回调函数）---就是校验后后台有个结果过来
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){ // 0--未初始化 1--初始化 2 发送数据 3数据发送中 4.数据发送完成
                    if(xhr.status ==200){ // 200说明没有挂
                        var txt = xhr.responseText; // 后台发来的结果
                        succ(txt);
                    }
                }
            };
            //4.发送动作的触发
            xhr.send(null);

        }
        </script>

POST方式主要代码

<script type="text/javascript">
 //POST方式的Ajax
    function check2(obj){
            var pwd = obj.value;

           //1创建一个ajax对象
           var xhr=null;
           if(window.XMLHttpRequest){//看看浏览器是否认识该对象---IE7之后，火狐，google等支持
               xhr = new XMLHttpRequest();
           }else{//IE6及以下，其它大部分旧版本的浏览器
               xhr = new ActiveObject("Microsoft.XMLHttp");
           }

           //2 设置通讯方式和地址 //※※※
           var url="<c:url value='/AjaxServlet'/>";
           xhr.open("POST", url, true); //异步 ---并行
           //xhr.open("POST", url, false); //同步  ---串行

           //3 设置访问成功后的js对象(回调函数)
           xhr.onreadystatechange = function(){
               //alert(xhr.readyState);
               if(xhr.readyState==4){
                   if(xhr.status==200){//正常应答
                       var txt = xhr.responseText;
                       //alert("后台返回的信息:"+txt);
                       succ2(txt);
                   }
               }

           };

           //※※※※POST方式必须要设置Content-Type响应头※※※※※
           xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           //4 发送(动作的触发)
           xhr.send("pwd="+pwd); //※※※POST方式时，要向后台提交参数，写在该方法的参数中(前面的url后不带参数)

           //alert("OK");
        }
    function succ2(obj){
        div2.innerHTML = obj;
    };
    </script>

AJax技术封装成JS

/*
 * var ajax = new Ajax();
 * ajax.get();
 */

function Ajax(obj){
             this.get= function(url,succ,fail){
                    //1.创建一个Ajax对象
                    var xhr = null;
                    if(window.XMLHttpRequest){
                        xhr = new XMLHttpRequest();
                    }else{
                        xhr = new ActiveObjcet("Microsoft.XNLHttp");
                    }
                    //2.设置通讯方式和地址
                    xhr.open("GET", url, "true"); // true--表示异步，false---表示同步
                    //3.设置放回成功后的JS对象（回调函数）---就是校验后后台有个结果过来
                    xhr.onreadystatechange = function(){
                        if(xhr.readyState == 4){ // 0--未初始化 1--初始化 2 发送数据 3数据发送中 4.数据发送完成
                            if(xhr.status ==200){ // 200说明没有挂
                                var txt = xhr.responseText; // 后台发来的结果
                                succ(txt);
                            }else{
                                fail(xhr.status);
                            }
                        }
                    };
                    //4.发送动作的触发
                    xhr.send(null);
                };
                this.post = function(url,data,succ2,fail){
                       //1创建一个ajax对象
                       var xhr=null;
                       if(window.XMLHttpRequest){//看看浏览器是否认识该对象---IE7之后，火狐，google等支持
                           xhr = new XMLHttpRequest();
                       }else{//IE6及以下，其它大部分旧版本的浏览器
                           xhr = new ActiveObject("Microsoft.XMLHttp");
                       }

                       //2 设置通讯方式和地址 //※※※
                       xhr.open("POST", url, true); //异步 ---并行
                       //xhr.open("POST", url, false); //同步  ---串行

                       //3 设置访问成功后的js对象(回调函数)
                       xhr.onreadystatechange = function(){
                           //alert(xhr.readyState);
                           if(xhr.readyState==4){
                               if(xhr.status==200){//正常应答
                                   var txt = xhr.responseText;
                                   //alert("后台返回的信息:"+txt);
                                   succ2(txt);
                               }else{
                                   fail(xhr.status);
                               }
                           }

                       };

                       //※※※※POST方式必须要设置Content-Type响应头※※※※※
                       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                       //4 发送(动作的触发)
                       xhr.send(data); //※※※POST方式时，要向后台提交参数，写在该方法的参数中(前面的url后不带参数)
                };
    }

我练习的主要代码
调用有两个方式—未封装和封装过的，当时Servlet代码都是一样的

package cn.hncu.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class OneServlet extends HttpServlet {
    private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        System.out.println("get-ajax来了....");
        String name = request.getParameter("name");

        //int i = 10/0;

//      try {
//          Thread.sleep(3000);
//      } catch (InterruptedException e) {
//          e.printStackTrace();
//      }


        out.println(name+"你好，来访时间是:"+ sdf.format(new Date()));
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        System.out.println("post-ajax来了....");
        String name = request.getParameter("name");

        out.println(name+"你好，来访时间是:"+ sdf.format(new Date()));
    }

}

未封装前的 调用
index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ajax技术演示</title>
    <script type="text/javascript">
       //把name编辑框中的名字用get-ajax提交到后台进行校验，看看是否可用
       function check1(obj){
           var name = obj.value;

           //1创建一个ajax对象
           var xhr=null;
           if(window.XMLHttpRequest){//看看浏览器是否认识该对象---IE7之后，火狐，google等支持
               xhr = new XMLHttpRequest();
           }else{//IE6及以下，其它大部分旧版本的浏览器
               xhr = new ActiveObject("Microsoft.XMLHttp");
           }

           //2 设置通讯方式和地址
           var url="<c:url value='/OneServlet?name="+name+"'/>";
           xhr.open("GET", url, true); //异步 ---并行
           //xhr.open("GET", url, false); //同步  ---串行

           //3 设置访问成功后的js对象(回调函数)
           xhr.onreadystatechange = function(){
               //alert(xhr.readyState);

               if(xhr.readyState==4){
                   if(xhr.status==200){//正常应答
                       var txt = xhr.responseText;
                       //alert("后台返回的信息:"+txt);
                       succ(txt);
                   }
               }

           };

           //4 发送(动作的触发)
           xhr.send(null); //GET方式时，参数为null。如果要向后台提交参数，则写在url地址中

           //alert("OK");
       }

       function succ(txt){
           div1.innerHTML=txt;
       }


       /*以下是POST方式ajax技术的代码*/
       //把name编辑框中的名字用post-ajax提交到后台进行校验，看看是否可用
       function check2(obj){
           var name = obj.value;

           //1创建一个ajax对象
           var xhr=null;
           if(window.XMLHttpRequest){//看看浏览器是否认识该对象---IE7之后，火狐，google等支持
               xhr = new XMLHttpRequest();
           }else{//IE6及以下，其它大部分旧版本的浏览器
               xhr = new ActiveObject("Microsoft.XMLHttp");
           }

           //2 设置通讯方式和地址 //※※※
           var url="<c:url value='/OneServlet'/>";
           xhr.open("POST", url, true); //异步 ---并行
           //xhr.open("POST", url, false); //同步  ---串行

           //3 设置访问成功后的js对象(回调函数)
           xhr.onreadystatechange = function(){
               //alert(xhr.readyState);
               if(xhr.readyState==4){
                   if(xhr.status==200){//正常应答
                       var txt = xhr.responseText;
                       //alert("后台返回的信息:"+txt);
                       succ2(txt);
                   }
               }

           };

           //※※※※POST方式必须要设置Content-Type响应头※※※※※
           xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

           //4 发送(动作的触发)
           xhr.send("name="+name); //※※※POST方式时，要向后台提交参数，写在该方法的参数中(前面的url后不带参数)

           //alert("OK");
       }

       function succ2(txt){
           div2.innerHTML=txt;
       }       
      </script>   
  </head>

  <body>
    <form action="" method="post">
        <h3>GET方式的ajax技术演示</h3> <br/>
        Name:<input type="text" name="name" onblur="check1(this);"/>
        <div id="div1"></div> <br/>

         <h3>POST方式的ajax技术演示</h3> <br/>
        Name:<input type="text" name="name" onblur="check2(this);"/>
        <div id="div2"></div> <br/>

        Pwd:<input type="text" name="pwd"/><br/>
        Email:<input type="text" name="email"/><br/>
        <input type="submit" value="注册"/>
   </form>

   <br/><br/>
    <a href="jsps/ajax2.jsp">封装后的ajax技术演示</a>

  </body>
</html>

下面是封装后的Ajax

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ajax技术演示</title>

    <script type="text/javascript">
      function Person(name,age){
           this.name = name;
           this.age = age;
           this.show = function(){
               alert(this.name+","+this.age);
           };
           this.setAge = function(age){
               this.age = age;
           };
      }

      function demo(){
          var p = new Person("Jack",22);
          p.show();

          p.setAge(25);
          p.show();
      }
    </script>

    <script type="text/javascript" src="<c:url value='ajax.js'/>"></script>

    <script type="text/javascript">
        function check1(obj){
           var name = obj.value;
           var url="<c:url value='/OneServlet?name="+name+"'/>";
           var ajax = new Ajax();
           ajax.get(url, succ, failure);
        }
        function succ(txt){
           div1.innerHTML=txt;
        }
        function failure(obj){
            alert("服务器响应的错误信息代码:"+obj);
        }

    </script>

    <script type="text/javascript">
        function check2(obj){
           var data = "name="+obj.value;
           var url="<c:url value='/OneServlet'/>";
           var ajax = new Ajax();
           ajax.post(url,data, succ2, failure);
        }
        function succ2(txt){
           div2.innerHTML=txt;
        }
    </script>

  </head>

  <body>
    <h3>封装后的Ajax技术演示</h3>
    <button onclick="demo();">函数封装技术复习</button>

    <form action="" method="post">
        <h3>GET方式的ajax技术演示</h3> <br/>
        Name:<input type="text" name="name" onblur="check1(this);"/>
        <div id="div1"></div> <br/>

         <h3>POST方式的ajax技术演示</h3> <br/>
        Name:<input type="text" name="name" onblur="check2(this);"/>
        <div id="div2"></div> <br/>

        Pwd:<input type="text" name="pwd"/><br/>
        Email:<input type="text" name="email"/><br/>
        <input type="submit" value="注册"/>
   </form>

  </body>
</html>