一、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. iOS 多线程 NSOperation、NSOperationQueue

    1. NSOperation.NSOperationQueue 简介 NSOperation.NSOperationQueue 是苹果提供给我们的一套多线程解决方案.实际上 NSOperation.N ...

  2. Linux运维跳槽必备的40道面试精华题(转)

    Linux运维跳槽必备的40道面试精华题(转)   下面是一名资深Linux运维求职数十家公司总结的Linux运维面试精华,助力大家年后跳槽找个高薪好工作. 1.什么是运维?什么是游戏运维? 1)运维 ...

  3. LeetCode算法题-Find Pivot Index（Java实现）

    这是悦乐书的第304次更新,第323篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第172题(顺位题号是724).给定一个整数nums数组,编写一个返回此数组的" ...

  4. Linux云计算运维-MySQL

    0.建初心 优秀DBA的素质 1.人品,不做某些事情2.严谨,运行命令前深思熟虑,三思而后行,即使是依据select3.细心,严格按照步骤一步一步执行,减少出错4.心态,遇到灾难,首先要稳住,不慌张, ...

  5. top命令用法详解

    top命令可以实时动态地查看系统的整体运行情况,是一个综合了多方信息监测系统性能和运行信息的实用工具.通过top命令所提供的互动式界面,用热键可以管理. 语法 top(选项) 选项 -b:以批处理模式 ...

  6. AI 学习路线

    [导读] 本文由知名开源平台,AI技术平台以及领域专家:Datawhale,ApacheCN,AI有道和黄海广博士联合整理贡献,内容涵盖AI入门基础知识.数据分析挖掘.机器学习.深度学习.强化学习.前 ...

  7. 关于:target与定位动画的奇怪现象

    今天在制作首页导航图特效demo时,无意发现一个奇怪的交互现象,故记录 经测试,简化了触发该现象的代码,如下: <!DOCTYPE html> <html> <head& ...

  8. scala的多种集合的使用(4)之列表List(ListBuffer)的操作

    1.List列表的创建和添加元素 1)最常见的创建list的方式之一. scala> val list = 1 :: 2 :: 3 :: Nil list: List[Int] = List(1 ...

  9. Linux操作系统计划任务

    ++++++++++++++++++++++++++++++++++++++++++++++++标题:Linux操作系统的计划任务内容:计划任务分为单次任务和周期性任务,周期任务分为系统级计划任务和用 ...

  10. Vue echarts

    方式一.直接引入echarts 先 npm 安装 echarts npm install echarts --save // main.js import myCharts from './comm/ ...