由于考研,一段时间不摸键盘了,今天复习一下AJAX。写在51CTO,记录我的生活点滴。

实例说明:通过一步刷新的方式,将页面输入的内容返回到页面并显示。当然js很容易实现。

一:代码部分:       

  1. html:部分

 <html>

 <head>

   <title>测试界面</title>

   <meta http-equiv="pragma" content="no-cache">

   <meta http-equiv="cache-control" content="no-cache">

   <meta http-equiv="expires" content="0">   

   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

   <meta http-equiv="description" content="This is my page">

   <!--

   <linkrel="stylesheet" type="text/css" href="styles.css">

   -->

 </head>

 

 <body>

    <div id="data">

      <label for="username">用户名:</label>

      <input type="text"id="username" size="10"name="username" />

      <br />

        <label for="psw">密码:</label>

        <input type="password"id="psw" size="10"name="psw" />

        <br/>

        <input type="submit"id="submit" name="submit"alt="提交" onclick="javascript:submit()"/>

    </div>

    <div id="show">

               数据显示区

    </div> 

   </script>

 </body>

</html>


2.js脚本部分


 <script type="text/javascript">

    var xmlHttp = null;

    function submit() {

       

       if(window.ActiveXObject){

          xmlHttp = new window.ActiveXObject("Microsoft.XMLHTTP");

       }

       else if(window.XMLHttpRequest){

          xmlHttp = new window.XMLHttpRequest();

       }

       var userName = document.getElementById("username").value;

       var psw = document.getElementById("psw").value;

       alert(userName);

       alert(psw);

         xmlHttp.onreadystatechange= dealData;

         xmlHttp.open("post","./servlet/first",true);

         xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

         xmlHttp.send("username="+userName+"&psw="+psw);

   }

    function dealData(){

      if(xmlHttp.readyState == 4){

         if(xmlHttp.status == 200){

            alert("已经进入200");

            var datass =  xmlHttp.responseText;

            document.getElementById("show").innerHTML = datass;

         }

         else{

            alert("错误");

         }

      }

      else{

         alert("round");

      }

    </script>


3.servlet部分

 

import java.io.IOException;

import java.io.PrintWriter;

 

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

publicclassFirst extendsHttpServlet{

 

   /**

    *

    */

   privatestaticfinallongserialVersionUID= 1L;

    @Override

   protectedvoiddoPost(HttpServletRequest req, HttpServletResponse resp)

         throws ServletException,IOException {

       process(req, resp);

   }

    @Override

   protectedvoiddoGet(HttpServletRequest req, HttpServletResponse resp)

         throws ServletException,IOException {

       process(req, resp);

   }

    protectedvoidprocess(HttpServletRequest req, HttpServletResponse resp)

            throws ServletException,IOException {

       String userName = req.getParameter("username");

       String psw = req.getParameter("psw");

       System.out.println("usename:"+userName);

       PrintWriter pw = resp.getWriter();

       pw.write("username:"+userName+";psw="+psw);

       pw.flush();

      }

}

二、解释:

   

  1. XMLHttpRequest对象是ajax异步实现的精髓,XmlHttpRequest使你可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户,使页面不刷新即可实现更新;


2.    因为各公司对其实现不一样,主要分微软IE和非微软IE浏览器(尤其是早期的IE5,IE6IE5     IE6 使用 ActiveXObject

首先,这些对象都是内嵌在浏览器中,属于window所属,所以在获取时应对其进行获取,当然获取时先进行IE版本的判断

Var xmlHttp =null;

<!—进行IE5,ie6的判断--->

If(window.ActiveXObject){//若是该版本,则

     XmlHttp = newwindow.ActiveXObject(“Microsoft.XMLHTTP”);

}

Else if(window.XMLHttpRequest){//若是非IE5,IE6版本

   xmlHttp = newwindow.XMLHttpRequest();

}

Else{

    Alert(“您的浏览器暂不支持ajax技术,请升级”);

}


3.  获取完成,当然是使用了,先设置好所需属性,例:

返回处理的函数(回调函数),以及需要访问的url,传值方式,以及所传值的获取等。

正如上述:

<!—获取所需传到后台的参数-->

Var username = document.getElementById(“username”).value;

Var password = document.getElementById(“psw”).value;

<!—设置回调函数--->

xmlHttp.onreadystatechange = 回调函数(注意:不带括号);

<!—设置传值方式以及url-->

调用xmlHttp对象去访问地址,或后台内容获取数据

首先,设置get方式传值:

Var url = “./servlet/first?username =”+userName+&password=+password;

xmlHttp.open(“get”,url,true);

//发送参数值:当然get方式本身将参数拼接到url后面了,所以此处设置为null即可

xmlHttp.send(null);

   设置为POST传值方式:

Var url = “./servlet/first”;

xmlHttp.open(“post”,url,true);

但是还比get方式多了一步操作:设置http数据报文的头部格式:http报文中得属性,根据需要设置即可

XmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

Post方式需要通过send(进行传值),所以需要将属性值放入send()中:

Var value =”username=”+username+”&password=”+password;

xmlHttp.send(value);


4: 编写回调函数:XMLHttpRequest函数返回类型有几种:responseText,responseXML,responseUrl.

下面章节会分类讲解,现在主要演示responseText:以帮助读者理解ajax的整个处理过程

XMLHttpRequest类拥有一个显示XMLHttpRequest对象状态的属性,即:readyState:

 When

XMLHttpRequest.readyState = 0: 表示“XMLHttpRequest”对象的一种未初始化状态,即:已经创建了它的对象,但未进行初始化

XMLHttpRequest.readyState = 1: 表示一种“未发送”状态:即:XMLHttpRequest.open()方法已经调用,但还未发送。并且XMLHttpRequest已经准备好把一个请求发送到服务器

XMLHttpRequest.readyState =2: 表示一种“已发送”状态,即:XMLHttpRequest.send()方法

                           已经调用,并且已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。

XMLHttpRequest.readyState=3: 表示一种“正在接收,未解析完”的状态,即:浏览器已经接收完目标服务器发来的HTTP报文的相应头部部分,但HTTP报文的消息体部分还未接收加载完

XMLHttpRequest.readyState= 4: 表示一种“已接收并且解析加载完”的状态,但是此时由于服务器会在返回的HTTP响应报文中 添“响应码”以表明请求资源当前的状态,所以这种情况下需要再分类进行解析

 

单独解析XMLHttpRequest.readyState= 4时的各种情况

根据XMLHttpRequest.status属性进行解析:

When:

XMLHttpRequest.status = 404:说明请求资源不存在

XMLHttpRequest.status = 200:表示已经顺利完成访问服务器后,顺利返回未发生异常

其他响应码代表的含义:请参见http协议

 

代码书写:

function dealMethod(){

 if(xmlHttp.readyState == 4){

       if(xmlHttp.status == 200){

      var responseData = xmlHttp.responseText

      <!—对前台进行操作 -->

       document.getElementById(“show”).innerHTML = responseData;

}

}

}


小弟排版不大好,请见谅哈。