Ajax基础知识《一》

  对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到。Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当我们好不容易写完了,一点击提交,后台发现我们有一些字段填写有误,这是就会提示我们注册失败,请重新注册,遇到这样的情况,我想你和我一样,一定恨透这个网站了。那如何来优化这个过程呢?这个时候我们的Ajax就排上用场了,当我们填写完一行信息,就可以通过Ajax来异步的进行后台判断。说了这么多,简单的讲就是我们本篇谈到的Ajax可以实现异步操作。好了,下面我们来一起领略一下它的风采。

 1、创建Ajax:

  当我们需要使用Ajax时,便可以通过在javascript中创建一个XMLHttpRequest对象,通过该对象进行相关的处理。这里我们需要注意的是,有些浏览器并不支持Ajax,这个时候,当我们创建对象时就要进行一定的判断,以便保证我们的页面在不同的浏览器上正常显示。

if(window.XMLHttpRequest){//检测浏览器版本是否支持
       hppt = new XMLHttpRequest();//IE7+;Firefox;Chrome;Opera
 }else{
hppt
= new ActiveXObject("Microsoft.XMLHTTP");//IE6;IE5
}

 2、表单界面设计:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <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">
    <style type="text/css">
        input{
            width: 160px;
            height: 25px;
        }
    </style>
    <script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="yellow";
        }
        
        function clearStyle(y){
            document.getElementById(y).style.background="white";
            var hppt = new XMLHttpRequest();
            http.open("GET", "http://127.0.0.1:8080/Ajxy/servlet/ajax?name=小米&pwd=123456", true);
            http.send();
            
            //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true);
            //http.send();
            
            //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true);
            //http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            //http.send("name=小米&sex=男");
            
            //处理结果判断
            if (http.readyState==4) {
                if (http.status==200) { 
                    alert("处理完成");
                    document.getElementById("news").innerHTML = request.responseText;
                } else {
                    alert("发生错误:" + request.status);
                }
            }else{
                //alert(http.readyState);
            } 
        }
    </script>
  </head>
  
  <body>
    <center>
        <div id="news"></div>
        <table>
            <form method="post" action="<%=request.getContextPath() %>/servlet/ajax" enctype="application/x-www-form-urlencoded">
                <!-- onfocus="":监听获得焦点事件    onblur="":监听失去焦点事件     disabled="disabled":销毁,不存在的     readonly="readonly":只读-->
                <tr>
                    <td>姓名:</td><td><input type="text" name="name" id="name" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
                </tr>
                <tr>
                    <td>密码:</td><td><input type="password" name="pwd" id="pwd" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
                </tr>
                <tr>
                    <td>邮箱:</td><td><input type="text" name="email" id="email" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
                </tr>
                <tr>
                    <td>操作:</td><td><input type="submit" id="submit" value="注册"/></td>
                </tr>
            </form>
        </table>
    </center>
  </body>
</html>

 3、Ajax的状态码:

  readyState 状态 状态说明
    (0)未初始化
      此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。
    (1)载入
      此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
    (2)载入完成
      此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
    (3)交互
      此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。
    (4)完成
      此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。
    概而括之,整个XMLHttpRequest对象的生命周期应该包含如下阶段:创建-初始化请求-发送请求-接收数据-解析数据-完成

 4、获取相应的方式:

  技术分享

 

 5、select类:用来接收Ajax传输过来的数据。

public class ajax extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        name = new String(name.getBytes("iso-8859-1"), "utf-8");
        String pwd = request.getParameter("pwd");

        System.out.println("name="+name);
        System.out.println("pwd="+pwd);
        System.out.println("GET_______Ajax");
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        String name = (String) request.getParameter("name");
        System.out.println("name="+name);
        String sex = (String)request.getParameter("sex");
        System.out.println("sex="+sex);
        System.out.println("POST__________Ajax");
        
    }

}

  好了对于Ajax基础知识的入门学习,就为大家分析完毕。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。