一、AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

　　a）、AJAX = 异步 JavaScript 和 XML。

　　b）、AJAX 是一种用于创建快速动态网页的技术。

　　通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。例如我们在用户注册的时候需要验证该注册名是否已经存在，这时候就可以使用Ajax实现与服务器的的通信来验证。

二、AJAX的使用：

　　1、创建 XMLHttpRequest 对象：所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象（详见W3School）

　　2、向服务器发送请求：与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用

　　3、处理返回数据

 <%@ 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>

       <script type="text/javascript">

         function ajax(){

           var url = "<%=request.getContextPath() %>/servlet/AjaxTest";

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

             var xmlHttp = new XMLHttpRequest();

             xmlHttp.onreadystatechange = function(){

             if(xmlHttp.readyState == 4){

                 if("unsucceed"== xmlHttp.responseText){

                    document.getElementById("userName").value=null;

                    document.getElementById("userName").placeholder="该用户已被占用，请重新输入";

                  }

             }

         };

             xmlHttp.open("POST", url, true);// true:异步调用    false:同步调用

         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 设置请求头信息

         xmlHttp.send("userName="+value);

         }

         function submit_user(){

         if(document.getElementById("userName").value.length>1){

             if(document.getElementById("passWord").value.length > 5)

               document.getElementById("user").submit();

           else{

               document.getElementById("passWord").value=null;

               document.getElementById("passWord").placeholder="请重新输入密码";

               alert("请输入6位数以上密码");

           }

         }else

         alert("请先输入用户名");

         }

       </script>

   </head>

   <body>

     <form id="user" method="get" action="<%=request.getContextPath()%>/servlet/LoginTest">

         <table>

       <tr>

           <td>姓名<td/>

           <td><input type="text" id="userName" name="userName" onblur="ajax()" placeholder="请输入姓名"><td/>

       <tr/>

       <tr>

           <td>密码<td/>

           <td><input type="password" id="passWord" name="passWord"  placeholder="请输入密码"><td/>

       <tr/>

       <tr>

           <td><td/>

           <td><input type="button"  onClick="submit_user()" value="注册"/><td/>

       <tr/>

       </table>

     </form>

   </body>

 </html>

13、Ajax的使用的更多相关文章

  1. 13. Ajax技术

    在传统的Web应用模式中,页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面的客户端.而在Ajax应用中,页面中的用户的操作将通过Ajax引 ...

  2. JavaScript 13 Ajax技术（未完)

    <body> <!-- 添加文档主体内容 --> <header> <nav>JavaScript - Ajax - 读取XML文件</nav&g ...

  3. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  4. Django中的Ajax

    Ajax 很多时候,我们在网页上请求操作时,不需要刷新页面.实现这种功能的技术就要Ajax!(本人定义,不可迷信) jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能,我们仍然 ...

  5. jQuery基础---Ajax基础教程

    jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...

  6. 使用Ajax发送http请求（get&post请求）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...

  7. ajax中的async属性值之同步和异步及同步和异步区别

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...

  8. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

  9. ajax操作提交整个表单内容

    1 2 3 4 5 6 7 8 9 10 11 12 13 $.ajax({                 cache: true,                 type: "POST ...

  10. ajax同步与异步的区别

    jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...

随机推荐

  1. cent os 7 与cent os 6 修改主机名称

    centos6 需要修改两处:一处是/etc/sysconfig/network,另一处是/etc/hosts,只修改任一处会导致系统启动异常.零时修改用hostname your-name cnet ...

  2. RubyGems系列之RubyGems初识

    转载请标明来源:https://www.cnblogs.com/zhanggui/p/9719291.html 一. 基础理解 RubyGems简称gems,它是一个用于对Ruby组件进行打包的Rub ...

  3. UOJ #269. 【清华集训2016】如何优雅地求和

    UOJ #269. [清华集训2016]如何优雅地求和 题目链接 给定一个\(m\)次多项式\(f(x)\)的\(m+1\)个点值:\(f(0)\)到\(f(m)\). 然后求: \[ Q(f,n,x ...

  4. Django 数据库读写分离 分库分表

    多个数据库 配置: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BA ...

  5. MATLAB GUI界面设计------“轴”组件配置

    1> Fontsize            10         %字体大小 2> FontUnits           normalized      %采用相对度量单位,缩放时保持 ...

  6. Boolean 类型转换

    原文作者: louis 原文链接: http://louiszhai.github.io/2015/12/11/js.boolean/ 语法 众所周知, JavaScript有五个基本的值类型:num ...

  7. Problem 2. number题解

    number:数学+二分图匹配 首先,如果S<N,那么S+1,S+2...N这些数直接放在S+1,S+2...N的位置上(如果其他数x放在这些位置上面,这些数不放在对应位置,那么x一定能放在这些 ...

  8. icpc 南昌邀请赛网络赛 Max answer

    就是求区间和与区间最小值的积的最大值 但是a[i]可能是负的 这就很坑 赛后看了好多dalao的博客 终于a了 这个问题我感觉可以分为两个步骤 第一步是对于每个元素 以它为最小值的最大区间是什么 第二 ...

  9. C# AddRange为数组添加多个元素的代码

    将代码过程中重要的代码片段做个收藏,下面代码段是关于C# AddRange为数组添加多个元素的代码,希望对小伙伴有所用处.ArrayList ab = new ArrayList();ab.Add(& ...

  10. python——redis

    redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sor ...