Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求。

主要有以下四个步骤：

（1）初始化XMLHttpRequest对象。不同浏览器的差异，需要我们创建一个跨浏览器的对象，并判断XMLHttpRequest对象创建是否成功，如果不成功，则给予提示。

（2）为XMLHttpRequest对象指定一个回调函数，用于对后台返回结果进行处理。

（3）创建一个与服务器的连接，在创建时，需要指定发送请求的方式（GET/POST），以及设置是否采用异步方式发送请求。

（4）向服务器发送请求。

以下是一个用Ajax判断用户名是否正确的样例：

index.jsp文件：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <script type="text/javascript">
  9.     function getAnswer(username) {
  10.         if(username.value == ""){
  11.             alert("请输入用户名");
  12.             username.focus();
  13.             return;
  14.         }
  15.         else{
  16.             checkUsername("checkusername.jsp?username="+username.value);    //参数已整合到url地址中
  17.         }
  18.     }
  19.     function checkUsername(url) {
  20.         http_request = new XMLHttpRequest();      //初始化XMLHttpRequest对象
  21.         http_request.onreadystatechange = function (){      //回调函数对后台返回结果进行处理
  22.             if(http_request.readyState==4){
  23.                 if(http_request.status == 200){
  24.                     alert(http_request.responseText);
  25.                 }
  26.                 else{
  27.                     alert("地址有误");
  28.                 }
  29.             }
  30.         }
  31.         http_request.open("POST",url,true);         //链接服务器
  32.         http_request.send(null);                    //发送请求，这里不用带参数，前面参数已经整合进url中。
  33.     }
  34. </script>
  35. </head>
  36. <body>
  37. <form action="" method="get" name="form1">
  38.     用户名：
  39.     <input type="text" name="username"><br>
  40.     密码：
  41.     <input type="password" name="passwd"><br>
  42.     <input type="submit" value="提交" onclick="getAnswer(this.form.username)">
  43. </form>
  44. </body>
  45. </html>

checkusername.jsp(后台处理)：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%
  4.     String s = new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");
  5.     if(s.equals("Tom")){
  6.         out.print("此用户已注册");
  7.     }
  8.     else{
  9.         out.print("恭喜你注册成功");
  10.     }
  11. %>

另一种实现方法：（post方法，但传参数）

index.jsp：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>Insert title here</title>
  8. <script type="text/javascript">
  9.     function getAnswer(username) {
  10.         if(username.value == ""){
  11.             alert("请输入用户名");
  12.             username.focus();
  13.             return;
  14.         }
  15.         else{
  16.             checkUsername("checkusername.jsp",username);
  17.         }
  18.     }
  19.     function checkUsername(url,username) {
  20.         http_request = new XMLHttpRequest();      //初始化XMLHttpRequest对象
  21.         var param = "username="+username.value;
  22.         //alert(username.value);
  23.         http_request.onreadystatechange = function (){      //回调函数对后台返回结果进行处理
  24.             if(http_request.readyState==4){
  25.                 if(http_request.status == 200){
  26.                     alert(http_request.responseText);
  27.                 }
  28.                 else{
  29.                     alert("地址有误");
  30.                 }
  31.             }
  32.         }
  33.         http_request.open("POST",url,true);         //链接服务器
  34.         http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");       //设置表头
  35.         http_request.send(param);                    //发送请求，这里不用带参数，前面参数已经整合进url中。
  36.     }
  37. </script>
  38. </head>
  39. <body>
  40. <form action="" method="get" name="form1">
  41.     用户名：
  42.     <input type="text" name="username"><br>
  43.     密码：
  44.     <input type="password" name="passwd"><br>
  45.     <input type="submit" value="提交" onclick="getAnswer(this.form.username)">
  46. </form>
  47. </body>
  48. </html>

疑问：

1.两种方法有什么不同

2.第二种方法为什么要设置表头，而且第二种写法为什么只能测试一次，第二次填个用户名测试就无反馈

Ajax工作流程的更多相关文章

  1. Ajax的工作流程简述

    提到Ajax相信我们都不会陌生,不管你是前端开发还是后台数据处理的程序员,ajax的作用就像现在生活中的手机一样,无论是作用还是流程都差不多,这里我们要进行ajax操作后台数据并显示在页面上的话,首先 ...

  2. js.ajax优缺点，工作流程

    1.ajax的优点 Ajax的给我们带来的好处大家基本上都深有体会,在这里我只简单的讲几点: 1.最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.  2.使用异步方式与服务器通信,不 ...

  3. Ajax工作原理

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  4. 关于Ajax工作原理

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  5. Ajax工作原理（转）

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  6. aJax学习之Ajax工作原理

    转自:http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html 在写这篇文章之前,曾经写过一篇关于AJAX技术的 ...

  7. Redux的工作流程

    1.Redux 是一个专门用来管理数据业务或逻辑状态的框架,它也可以实现代码结构的规范化并提供组件之间通信的便利,而这两点,对于大型应用来说非常关键. 2.工作流程: Redux 三大原则 单一数据源 ...

  8. Ajax工作原理及实例

    1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...

  9. ajax工作原理(转)

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

随机推荐

  1. Yii2 ActiveRecord save失败

    当给AR写beforeSave方法时,注意返回true还是false.如果没有返回值,或者返回false,那么就不会存入数据库.如下 晚上写代码的时候beforeSave忘了返回true,导致无法存入 ...

  2. linux下编译时，链接math库

    在gcc下用到数学函数,如sqrt.在gcc时要加上 -lm 参数,这样告诉编译器我要用到数学函数了 . 如:gcc a.c -o a -lm 当在用Eclipse编译使用数学函数的C语言程序时,如s ...

  3. cf591d

    题意:给出船的最大速度v,起点,终点.风在前t秒是一个方向,t秒后就一直是第二个方向.两个方向已知. 船速永远大于风速.问船在自由掌握速度和行驶方向的情况下,最快多久到终点. 分析:首先排除一种方法, ...

  4. GitHub for Windows呆瓜级操作1

    如何安装.注册.创建仓库等操作请参考http://www.cnblogs.com/foreveryt/p/4077380.html 1.点击右上角+号创建本地新仓库LHJ.点击Create repos ...

  5. [原创]Windows Server 2003 物理机转换为VMware虚拟机出现VSS错误的处理

    一台Windows Server 2003 物理机需要转换为VMware虚拟机,工具为Vmware vCenter Converter Standalone 6.0,转换开始就出现错误“FAILED: ...

  6. C# 使用AForge调用笔记本摄像头拍照

    vs2012  winform 连接摄像头设备,这里需要引入 代码: using AForge; using AForge.Controls; using AForge.Imaging; using ...

  7. QQ聊天界面模式切换

    1.打开一个聊天窗口 2.按照图上步骤 3.模式 3-1气泡模式 3-2文本模式

  8. python之系统性能信息模块psutil

    系统性能信息模块psutil 跨平台库 轻松实现获取系统运行的进程和系统利用率(包括CPU.内存.磁盘.网络等)信息. 主要用于系统监控,分析和限制系统资源及进程的管理 实现同等命令行工具提供的功能( ...

  9. SQUID常用命令

    Squid日常维护过程中,常用的一些命令: 1,初始化你在 squid.conf 里配置的 cache 目录squid -z如果有错误提示,请检查你的 cache目录的权限.可以使用使用更改目录权限: ...

  10. embed chrome 无法播放问题

    火狐下<embed src='1.mp3' autostart='false' hidden='true' loop='false' ></embed>正常, chrome 不 ...