一、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. DNS域名解析过程，域名的认识

    DNS域名解析过程 参考知乎:https://www.zhihu.com/question/23042131 当你通过浏览器输入url访问资源时,会请求DNS解析域名成对应的IP地址,由IP地址在去与 ...

  2. git 同步远程分支

    1. 同步远程分支到本地 git fetch 2. 查看本地分支 git branch *dev //当前分支 master test 3.切换分支 git checkout master // 切换 ...

  3. MyBatis学习日记（三）：戏说MyBatis配置文件

    properties标签 properties标签可以用来加载别的配置文件,比如可以加载数据库的配置文件,jdbc.properties. 下面是jdbc.properties jdbc.driver ...

  4. 在Linux系统安装Nodejs 最简单步骤

    1.去官网下载和自己系统匹配的文件: 英文网址:https://nodejs.org/en/download/ 中文网址:http://nodejs.cn/download/ 通过  uname -a ...

  5. ztree 为节点添加点击触发事件

    <SCRIPT type="text/javascript"> var setting = { data : { key : { title : "code& ...

  6. Redis进阶之使用Lua脚本开发

    1.在Redis中使用Lua 在Redis中执行Lua脚本有两种方法:eval和evalsha. (1)eval eval 脚本内容 key个数 key列表 参数列表 下面例子使用了key列表和参数列 ...

  7. JEECG BOOT

    JEECGBOOT - 开源搜索 - 开源中国https://www.oschina.net/search?scope=blog&q=JEECGBOOT JEECG 基于代码生成器J2EE智能 ...

  8. sql是最成功的第四代语言

    SQL发展的前世今生 很多年前,两名年轻的IBM研究员将一门关系型语言带到了数据库领域,旨在使用声明性的方式来操作数据.从Don Chamberlin和Ramond Boyce发表"SEQU ...

  9. 通过VuePress管理项目文档(二)

    通过vue组件实现跟:Element相似的效果.需要在VuePress网站中将自己的项目中的Vue组件运行结果展示在页面中. 至于如何将组件在VuePress网站中展示请参考:https://segm ...

  10. Scrapy 框架简介

    Scrapy 框架 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的 ...