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>