一、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. js坚持不懈之13：JavaScript查找HTML元素的方法

    1. 通过 id 查找 HTML 元素 <!DOCTYPE html> <html> <body> <p id = "intro"> ...

  2. Zabbix3.4-RHEL 7.4 X64 YUM联网安装

    OS准备 关闭selinux vi /etc/selinux/config setenforce 0 开启防火墙80端口访问 firewall-cmd --permanent --add-rich-r ...

  3. Web前端教程3-JavaScript教程

    目录 1. JavaScript介绍 1.1. JS嵌入页面的方式 2. JS基本语法 2.1. 变量类型 2.2. 获取元素方法 2.3. 操作元素属性 2.4. innerHTML的使用 3. J ...

  4. 在Windows上安装配置MongoDB

    MongoDB下载 下载地址: https://www.mongodb.org/ 找到下载页面,选择对应的平台和版本,选择Package类型msi 安装 按默认或选择安装位置一步步到头 配置环境变量 ...

  5. Map the Debris 轨道周期

    返回一个数组,其内容是把原数组中对应元素的平均海拔转换成其对应的轨道周期. 原数组中会包含格式化的对象内容,像这样 {name: 'name', avgAlt: avgAlt}. 至于轨道周期怎么求, ...

  6. UA大全

    ####PC端UA #Opera "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Ch ...

  7. Linux centos nginx下载安装初步

    下载源码包解压编译 1.下载 # wget http://nginx.org/download/nginx-1.9.9.tar.gz 2.解压 # tar xvf nginx-1.9.9.tar.gz ...

  8. promise源码解析

    前言 大部分同学对promise,可能还停留在会使用es6的promise,还没有深入学习.我们都知道promise内部通过reslove.reject来判断执行哪个函数,原型上面的then同样的,也 ...

  9. QQ浏览器、火狐浏览器中页面有点大的问题记录

    做页面时候,发现火狐和腾讯QQ浏览器有个问题,就是会将页面显示的比较大,像点了缩放比例120%似的,事实上缩放比例是100%,很奇怪. 甚至面对这个问题,连腾讯公司主页也会放大,也让我很困惑. 比如: ...

  10. 拒绝回调，拥抱async await

    之前使用jquery中ajax,请求的结果需要写在回调函数里面,后面接触到了axios/fetch,使用了es6中Promise进行封装,这种链式结构调用,看起来比之前直观,可是还是没有解决回调的问题 ...