一:什么是Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

二:Ajax中的对象和方法说明

Ajax的核心对象就是xmlHttpRequest

XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1：方法

xmlHttpRequst对象利用send()和open()方法与服务器进行交互。

open(method,url,async)

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）

send(string)

  • string：仅用于 POST 请求

如果是post请求，必须使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据：

  1. xmlhttp.open("POST","ajax_test.asp",true);
  2. xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  3. xmlhttp.send("fname=Bill&lname=Gates");

2 ：属性

readyState

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪

State

  • 200: "OK"
  • 404: 未找到页面

responseText

  • 获得字符串形式的响应数据。

responseXML

  • 获得 XML 形式的响应数据。

onreadystatechange

  • 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

三:Ajax运行原理(为什么要用Ajax)

ajax通过xmlhttpRequest对象执行操作，其中xmlhttpRequest对象是在浏览器中内置的一个对象

其运行原理就相当于创建了一个请求代理，通过代理去完成与服务器的交互，交互的过程中客户不需要等待，还可以进行其它的工作，交互完成以后，代理再将交互的结果返回给客户页面。

第一步:创建xmlHttpRequest对象，每个浏览器的创建不是都相同。

注意：如果需要提起多个请求，需要创建多个XMLHttpRequest对象

  1. var xmlHttp;
  2. if (window.XMLHttpRequest)
  3.   {//  IE7+, Firefox, Chrome, Opera, Safari创建方式
  4.   xmlHttp=new XMLHttpRequest();
  5.   }
  6. else
  7.   {//  IE6, IE5 创建方式
  8.   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  9.  
  10.   }

通常情况下为了兼容所有浏览器，每个都要写上。

第二步：设置open（）方法和setRequestHeader()方法参数。

将请求方式，请求目的地址，和请求类型设置到open方法中，如果是post请求，则需要设置setRequestHeader()参数

第三步：发送执行

利用send方法，与服务器真正的交互执行

第四步：获得执行结果

首先判断执行是否完成，然后通过js操作dom元素，将返回的responseText返回到页面

  1. xmlHttp.onreadystatechange=function()
  2.   {
  3.     //判断是否发送成功，是否找到请求页面等
  4.   if (xmlHttp.readyState==4 && xmlHttp.status==200)
  5.     {
  6.     //操作页面元素
  7.     document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
  8.     }
  9.   }

四:Ajax实例(焦点离开验证用户是否存在)

利用ajax在焦点离开的时候判断注册的用户是否存在

  1.     function validate(field){
  2.     if (trim(field.value).length != 0) {
  3.         var xmlHttp=null;
  4.         //创建XMLHttpRequest
  5.           if (window.XMLHttpRequest)      {//  IE7+, Firefox, Chrome, Opera, Safari创建方式
  6.               xmlHttp=new XMLHttpRequest();
  7.           }    else     {//  IE6, IE5 创建方式
  8.               xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  9.          }
  10.         //每次请求的url地址不同，利用时间产生不同url地址，可以防止缓冲造成问题
  11.         var url = "user_validate.jsp?userId=" + trim(field.value) + "&tamp=" + new Date().getTime();
  12.         xmlHttp.open("GET", url, true);
  13.         //方法地址，处理完成后自动调用，回调
  14.         xmlHttp.onreadystatechange=function(){ //匿名函数
  15.                 if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功
  16.                     if (xmlHttp.status == 200) { //http协议成功
  17.                         document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";
  18.                     }else {
  19.                         alert("请求失败，错误码=" + xmlHttp.status);
  20.                     }
  21.                 }
  22.              } ;
  23.         //将参数发送到Ajax引擎
  24.         xmlHttp.send(null);  
  25.  
  26.     }else {
  27.         document.getElementById("userIdSpan").innerHTML = "";
  28.     }   
    }

部分页面代码：

  1. <input name="userId" type="text" class="text1" id="userId" size="10" maxlength="10" value="<%=userId%>" onblur="validate(this)">
  2. <span id="userIdSpan"></span>

//后台验证方法利用jsp编写

  1. <%@ page language="java" contentType="text/html; charset=GB18030"  pageEncoding="GB18030"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <%@ page language="java" import="com.bjpowernode.drp.sysmgr.manager.*"  %>
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
  7. <title>Insert title here</title>
  8. </head>
  9. <body>
  10. <%
  11.     String userId=request.getParameter("userId");
  12.     if(UserManager.getInstance().findUserById(userId)!=null){
  13.         out.println("用户代码已存在!");
  14.     }
  15. %>
  16. </body>
  17. </html>

注意：使用Ajax技术需要清除缓存，否则容易产生莫名其妙的错误，具体有两种方法：

1)采用URL后跟上时间戳来防止浏览器缓存，如

  1.    //每次请求的url地址不同，利用时间产生不同url地址，可以防止缓冲造成问题
  2.  var url = "user_validate.jsp?userId=" + trim(field.value) + "&tamp=" + new Date().getTime();

2)加入清除缓存代码，如：

  1. response.setContentType("text/xml");
  2. response.setHeader("Cache-Control","no-store");//HTTP1.1
  3. response.setHeader("Pragma","no-cache");//HTTP1.0
  4. response.setDateHeader("Expires",0);

Ajax详解的更多相关文章

  1. $.ajax()方法所有参数详解;$.get(),$.post(),$.getJSON(),$.ajax()详解

    [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注 ...

  2. Ajax详解及使用Ajax时的返回值类型有哪些？

    Ajax详解 Ajax = 异步 JavaScript 和 XML. Ajax 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以在 ...

  3. $.ajax()详解

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  4. jQuery中$.ajax()详解(转)

    JQuery中$.ajax()方法参数详解     url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get) ...

  5. AJAX 详解注释很全来自互联网

    1: //用户名校验的方法 2: //这个方法使用XMLHTTPRequest对象进行AJAX的异步数据交互 3: var xmlhttp; 4: function verify(){ 5: //1. ...

  6. jquery ajax详解

    详细参数列表url:发送请求的连接地址type:请求方式 get:获取 post:发送 put和deletetimeout:设置请求超时时间async:默认true为异步请求,false同步请求锁住浏 ...

  7. Validform使用ajax详解

    demo.config({    showAllError:true,    url:"这里指定提交地址",    ajaxpost:{        //可以传入$.ajax() ...

  8. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  9. Ajax详解及其案例分析------如何获得Ajax对象，使用Ajax对象发送GET和POST请求，校验用户名，POST和GET请求时的乱码处理，实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

随机推荐

  1. HDOJ 2561. 第二小整数 第k大问题

    第二小整数 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  2. linux-关机出现Telling INIT to go to single user mode.无法关机

    运行/sbin/shutdown now最后显示:Telling INIT to go to single user mode.INIT:Going single userINIT:Sending g ...

  3. MVC Nhibernate 示例

    首先,非常感谢提出问题的朋友们,使得本人又去深入研究了NHibernate的<Session-Per-Request 模式>.   前言: 谈到NHibernate大伙并不陌生,搞Java ...

  4. [LeetCode] Find Leaves of Binary Tree 找二叉树的叶节点

    Given a binary tree, find all leaves and then remove those leaves. Then repeat the previous steps un ...

  5. yii2使用小知识(连续补充)

    1,打印ar或者query的原始sql: $query = (new \yii\db\Query())->select(['a.username','b.item_name'])->fro ...

  6. tensorflow 一些好的blog链接和tensorflow gpu版本安装

    pading :SAME,VALID 区别  http://blog.csdn.net/mao_xiao_feng/article/details/53444333 tensorflow实现的各种算法 ...

  7. 织梦多语言站点，{dede:include filename=''/}引入问题

    织梦模板include插入非模板目录文件出现"无法在这个位置找到"错误的解决办法 以下是dede V55_UTF8 查dede include标签手册 (3) include 引入 ...

  8. 文本文件关键字替换(Java)

    代码实现如下: import java.io.File; import java.io.PrintWriter; import java.util.Scanner; public class File ...

  9. 如何把Spring制作成jar包，然后在项目里运行。

    第一步:首先我们先把Spring的代码准备好.如图一 (图1). 第二步:我们在桌面新建一个文件夹,如图二 (图2). 我们要在这个文件夹里新建两个夹,一个文件夹是你项目的包名,也就是我们图1的aop ...

  10. 【BZOJ-2938】病毒 Trie图 + 拓扑排序

    2938: [Poi2000]病毒 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 609  Solved: 318[Submit][Status][Di ...