一、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. Windows上安装MySQL的完整教程

    1.     首先去官方网站下载压缩文件:https://dev.mysql.com/downloads/mysql/ 2.     解压下载的文件. 3.     将解压的所有文件放在一个文件夹里( ...

  2. Andriod studio 打包aar

    因为项目不同,有些公用库而且还是c++的,还有一些带资源的,简单的复制遇到库升级又是一轮配置,编译成aar则解决这些麻烦. 但是默认andriod studio的make moudle只生成debug ...

  3. CentOS6.9安装WordPress搭建自己的博客网站

    首先说明我用的是服务器上之前装的mysql数据库,只需要配置上就行了 准备工作 CentOS6.9 在/目录下创建一个目录src,把下载的东西都放到这个文件夹下 下载Apache Httpd,下载地址 ...

  4. video相关参数、操作和事件

    1.参数 video是h5的新特性(虽然新了很多年了),使得枯燥的页面有了很多生机.html代码示例: <video id="kingdom-video" src=" ...

  5. C#：对字符串的各种处理

    字符串截取 SubString OR Remove string str3 = "123abc456"; //str3 = str3.Substring(0, i); //从左边开 ...

  6. Django学习笔记（2）--视图函数

    用pycharm打开FDJ项目 URL分发器 视图: 视图一般都写在app的view,py中.并且视图的第一个参数永远都是request(一个HttpRequest)对象.这个对象存储了请求过来的所有 ...

  7. SpringBoot整合Redis及Redis工具类撰写

            SpringBoot整合Redis的博客很多,但是很多都不是我想要的结果.因为我只需要整合完成后,可以操作Redis就可以了,并不需要配合缓存相关的注解使用(如@Cacheable). ...

  8. Vue的基础使用

    渐进式的前端框架 vue react augular 作者: 尤雨溪 facebook 谷歌公司 前端框架和库的区别 功能上的不同: jquery库:包含DOM(操作DOM)+请求,就是一块功能. a ...

  9. How do I copy files that need root access with scp

    server - How do I copy files that need root access with scp? - Ask Ubuntuhttps://askubuntu.com/quest ...

  10. 调用webservice帮助类

    using System;using System.CodeDom;using System.CodeDom.Compiler;using System.Collections.Generic;usi ...