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

　1、创建Ajax：

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

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

　2、表单界面设计：

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>注册</title>
  13.     <meta http-equiv="pragma" content="no-cache">
  14.     <meta http-equiv="cache-control" content="no-cache">
  15.     <meta http-equiv="expires" content="0">
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  17.     <meta http-equiv="description" content="This is my page">
  18.     <style type="text/css">
  19.         input{
  20.             width: 160px;
  21.             height: 25px;
  22.         }
  23.     </style>
  24.     <script type="text/javascript">
  25.         function setStyle(x){
  26.             document.getElementById(x).style.background="yellow";
  27.         }
  28.  
  29.         function clearStyle(y){
  30.             document.getElementById(y).style.background="white";
  31.             var hppt = new XMLHttpRequest();
  32.             http.open("GET", "http://127.0.0.1:8080/Ajxy/servlet/ajax?name=小米&pwd=123456", true);
  33.             http.send();
  34.  
  35.             //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true);
  36.             //http.send();
  37.  
  38.             //http.open("POST", "http://127.0.0.1:8080/Ajxy/servlet/ajax", true);
  39.             //http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  40.             //http.send("name=小米&sex=男");
  41.  
  42.             //处理结果判断
  43.             if (http.readyState==4) {
  44.                 if (http.status==200) {
  45.                     alert("处理完成");
  46.                     document.getElementById("news").innerHTML = request.responseText;
  47.                 } else {
  48.                     alert("发生错误：" + request.status);
  49.                 }
  50.             }else{
  51.                 //alert(http.readyState);
  52.             }
  53.         }
  54.     </script>
  55.   </head>
  56.  
  57.   <body>
  58.     <center>
  59.         <div id="news"></div>
  60.         <table>
  61.             <form method="post" action="<%=request.getContextPath() %>/servlet/ajax" enctype="application/x-www-form-urlencoded">
  62.                 <!-- onfocus="":监听获得焦点事件    onblur="":监听失去焦点事件     disabled="disabled"：销毁，不存在的     readonly="readonly"：只读-->
  63.                 <tr>
  64.                     <td>姓名：</td><td><input type="text" name="name" id="name" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
  65.                 </tr>
  66.                 <tr>
  67.                     <td>密码：</td><td><input type="password" name="pwd" id="pwd" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
  68.                 </tr>
  69.                 <tr>
  70.                     <td>邮箱：</td><td><input type="text" name="email" id="email" onfocus="setStyle(this.id)" onblur="clearStyle(this.id)"/></td>
  71.                 </tr>
  72.                 <tr>
  73.                     <td>操作：</td><td><input type="submit" id="submit" value="注册"/></td>
  74.                 </tr>
  75.             </form>
  76.         </table>
  77.     </center>
  78.   </body>
  79. </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传输过来的数据。

  1. public class ajax extends HttpServlet {
  2.  
  3.     public void doGet(HttpServletRequest request, HttpServletResponse response)
  4.             throws ServletException, IOException {
  5.         request.setCharacterEncoding("utf-8");
  6.         response.setCharacterEncoding("utf-8");
  7.         String name = request.getParameter("name");
  8.         name = new String(name.getBytes("iso-8859-1"), "utf-8");
  9.         String pwd = request.getParameter("pwd");
  10.  
  11.         System.out.println("name="+name);
  12.         System.out.println("pwd="+pwd);
  13.         System.out.println("GET_______Ajax");
  14.     }
  15.  
  16.     public void doPost(HttpServletRequest request, HttpServletResponse response)
  17.             throws ServletException, IOException {
  18.  
  19.         request.setCharacterEncoding("utf-8");
  20.         response.setCharacterEncoding("utf-8");
  21.         String name = (String) request.getParameter("name");
  22.         System.out.println("name="+name);
  23.         String sex = (String)request.getParameter("sex");
  24.         System.out.println("sex="+sex);
  25.         System.out.println("POST__________Ajax");
  26.  
  27.     }
  28.  
  29. }

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

Ajax基础知识《一》的更多相关文章

  1. Ajax基础知识（二）

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  2. Ajax基础知识 浅析（含php基础语法知识）

    1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...

  3. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  4. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  5. 14.ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  6. AJAX 基础知识

    1.AJAX 是一种用于创建快速动态网页的技术.而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不 ...

  7. Ajax基础知识（一）

    随便在百度谷歌上输入Ajax都会出现一大堆的搜索结果,这已经不再是什么新奇的技术了.但若从一开始就学习了ASP.Net,使用功能齐全的Visual Studio集成开发工具,或许未必能对访问一个动态网 ...

  8. Json,Gson,Ajax基础知识

    //json 是一种轻量级的文本格式,解析简单,他也是一键值来存,数据与数据的分割是以,来分割 //{} 看到大括号就是一个对象,[]代表集合 ,基本上所有数据的交互都是以json格式来进行传递的 / ...

  9. ajax基础知识

    一个简单的ajax例子: Uncaught SyntaxError: Unexpected token input看看是否是漏了:或者函数没有() //更新单个简历完整度 function updat ...

随机推荐

  1. WIN8 隐私声明

    隐私权声明 本应用连接网络仅为控制硬件设备,不会收集你的个人信息,也不共享你个个人信息. 应用名称 CrossMedia可视化控制系统(服务器版) 关于本应用 本应仅为控制设备应用,不关注任何配置相关 ...

  2. position定位

    CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...

  3. linux shell 字符串操作

    转:http://justcoding.iteye.com/blog/1963463 在做shell批处理程序时候,经常会涉及到字符串相关操作.有很多命令语句,如:awk,sed都可以做字符串各种操作 ...

  4. Asp.Net Web API 2第十课——使用OWIN自承载Web API

    详情请查看http://aehyok.com/Blog/Detail/71.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...

  5. XSS零碎指南

    该文章是本人两天的学习笔记,共享出来,跟大家交流.知识比较零散,但是对有一定 JS 基础的人来说,每个小知识都有助于开阔你的 Hack 视角.首先声明,本文只是 XSS 攻击的冰山一角,读者自行深入研 ...

  6. [ACM_动态规划] 找零种类

    问题描述:假设某国的硬币的面值有 1.5.10.50 元四种,输入一个金额 N (正整数,N<=1000),印出符合该金额的硬币组合有多少种. 问题分析: 1.5.10 元组合出 N 元的方法数 ...

  7. 在Grunt task中集成Protractor

    Protractor是专为AngularJS应用程序编写的UI自动化测试框架.前端构建有很多构建工具,比如Grunt.Gulp等.一般我们会把这些构建工具作为集成集成的脚本执行工具.所以如果把Prot ...

  8. 微软承诺将在今年的 Visual C++ 更新中加入 Clang 编译器

    微软最近发布将在2015年11月 Visual C++ 更新中加入 Clang 编译器 ,Clang 开源编译器以相比GCC更快的编译速度和更优的错误提示著称. Clang关于C,C++,及Objec ...

  9. ehcache2拾遗之write和load

    问题描述 在cache系统中writeThrough和writeBehind是两个常用的模式. writeThrough是指,当用户更新缓存时,自动将值写入到数据源. writeBehind是指,在用 ...

  10. 奇怪的BUG

    熟语说“常在河边走,哪能不湿鞋”,在现实中我想说:“代码写多了,总会遇到奇怪的bug”,遇到bug不可怕,可怕的是不自己不知道这么解决,有些bug能当时解决,有些在自己知识水平提高后知道如何解决.还有 ...