AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法。

AJAX 基于 JavaScript 和 HTTP 请求(HTTP requests)的,因为AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新,通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序
Ajax 可以调用服务器任何资源,可以调用动态页面、静态页面,也可以调用json对象,但是由于浏览器无法解析二进制文件,故调用图片等时就会报错。

调用json对象时,必须使用eval("(" + 返回的对象 + ")");,否则无法解析对象的资源。

AJAX异步请求原理和过程:

1、AJAX创建异步对象XMLHttpRequest :

AJAX 的要点是 XMLHttpRequest 对象。不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。如需针对不同的浏览器来创建此对象,我们要使用一条 "try and catch" 语句。如下示例:

  1. <script type="text/javascript">
  2. function GetXmlHttpObject()
  3. {
  4.   var xmlHttp=null;
  5.   
  6.  
  7. try{
  8.    // Firefox, Opera 8.0+, Safari等浏览器创建XMLHttpRequest对象的方法
  9.    xmlHttp=new XMLHttpRequest();
  10. }
  11.   catch (e){
  12.     // Internet Explorer浏览器创建XMLHttpRequest对象的方法
  13.   try{
  14.   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//IE6.0以上的浏览器创建XMLHttpRequest对象的方法
  15. }
  16.   catch (e){
  17.   try{
  18.   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE6.0以下的浏览器创建XMLHttpRequest对象的方法
  19. }
  20.   catch (e){
  21.   alert("您的浏览器不支持AJAX!");
  22.   return false;
  23. }
  24. }
  25. }
  26.  
  27.   return xmlHttp;
  28. }
  29. </script>

首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。

然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败,则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"),假如也不成功,则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。

假如这三种方法都不起作用,那么这个用户所使用的浏览器已经太过时了,他或她会看到一个声明此浏览器不支持 AJAX 的提示。

2、操作XMLHttpRequest 对象:

(1)设置请求参数(请求方式,请求页面的相对路径,是否异步)

(2)设置回调函数,一个处理服务器响应的函数,使用 onreadystatechange ,类似函数指针,如
  xmlHttp.onreadystatechange=function()
  {
    // 我们需要在这里写一些代码
  }
(3)获取异步对象的readyState 属性:该属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
  readyState 属性可能的值:
  0 请求未初始化(在调用 open() 之前)
  1 请求已提出(调用 send() 之前)
  2 请求已发送(这里通常可以从响应得到内容头部)
  3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
  4 请求已完成(可以访问服务器响应并使用它)

在调用时,我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):

  xmlHttp.onreadystatechange=function()
  {
    if(xmlHttp.readyState==4)
    {
      // 从服务器的response获得数据
    }
  }

(4)判断响应报文的状态,若为200说明服务器正常运行并返回响应数据,

(5)读取响应数据,可以通过 responseText 属性来取回由服务器返回的数据。

  
  xmlHttp.onreadystatechange=function()
  {
    if(xmlHttp.readyState==4){

      if(xmlHttp.status==200){

        document.myForm.time.value=xmlHttp.responseText;

      }
    }
  }

示例如下:

  1. <script type="text/javascript">
  2.  
  3. function ajaxFunction()
  4. {
  5.   var xmlHttp=GetXmlHttpObject();//定义XMLHttpRequest对象
  6.   
  1.   xmlHttp.open("GET","****.ashx",true)//设置请求方法,请求的目标页面,以及是否异步
  1.   xmlHttp.setRequestHeader("If-Modified-Since","0");
  2.   xmlHttp.onreadystatechange=function(){  //定义XMLHttpRequest对象的onreadystatechange属性   
  3.     if(xmlHttp.readyState==4) {   //判断XMLHttpRequest对象的状态
          if(
    xmlHttp.status==200){
  1.         document.myForm.time.value=xmlHttp.responseText;//通过XMLHttpRequest对象的responseText属性获取回传的数据
          }
        }
      }
      xmlHttp.send(null);//发送异步请求
    }
  2. </script>
    <form name="myForm">
      用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
      时间: <input type="text" name="time" />
    </form>
    </body>
    </html>

AJAX异步请求原理和过程的更多相关文章

  1. Ajax异步请求原理的分析

    我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事情都做不了.这就 ...

  2. 详解Ajax请求(二)——异步请求原理的分析

    在上一文章里,我们分析了同步请求的原理.当浏览器向服务器发送同步请求时,服务处理同步请求的过程中,浏览器会处于等待的状态,服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据,浏览器重新加载 ...

  3. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  4. ajax异步请求实例

    1. 问题分析 用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图) 用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型) ...

  5. 原生ajax异步请求基础知识

    一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...

  6. AJAX异步请求,局部刷新

    AJAX异步请求,局部刷新 window.onload=function(){ //dom事件,页面加载完成执行如下函数 doGetObjects(); } function doGetObjects ...

  7. ajax异步请求模式

    什么是异步请求 我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事 ...

  8. 黑马eesy_15 Vue:03.生命周期与ajax异步请求

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...

  9. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

随机推荐

  1. 网络IPC:套接字之带外数据

    带外数据(Out-of-band data)是一些通信协议所支持的可选特征,允许更高优先级的数据比普通数据优先传输.即使传输队列已经有数据,带外数据先行传输.TCP支持带外数据,但是UDP不支持.套接 ...

  2. 实验-hadoop新增节点

    关于hadoop新增节点网上的说法都有些差别,自己来实践一把 1.建立一个namenode一个datanode的集群 master:192.168.126.130 slave1:192.168.126 ...

  3. 安卓Design包之NavigationView结合DrawerLayout,toolbar的使用,FloatingActionButton

    注意:使用前需要添加Design依赖包,使用toolbar时需要隐藏标题头 FloatingActionButton 悬浮按钮:FloatingActionButton是重写ImageView的,所有 ...

  4. 用css做类似表格的布局

    --2013年6月24日12:08:49 今天突然不想用table了,就在园子里找了几个用css的解决办法,直接上代码: --1.html代码: <!DOCTYPE html PUBLIC &q ...

  5. hdu 4630 树状数组

    思路:这题的处理方式和hdu4358有点像.我们用一个pre[x]表示约数x的倍数上次出现的位置,将查询按区间的右节点升序排序.num[i]的约数为j,如果pre[j]为0,就将pre[j]置为i;否 ...

  6. EasyUI的datagrid获取所有正在编辑状态的行的行编号

    今天项目需要用了下EasyUI的datagrid的行编辑功能,跟着API来,只要是将各种状态时的处理逻辑弄好,还是蛮不错的. 开发过程中,遇到了个问题,在编辑完成后我需要获取datagrid所有处于编 ...

  7. 前端开发中的一些chrome插件推荐

    这篇博客推荐的都是谷歌chrome浏览器插件,理论上,与之相同内核的浏览器都能使用.由于是谷歌插件,所以在天朝的网络,你懂的! 红杏 专为 学者 .程序员.外贸工作者 打造的上网加速器.我们相信,上网 ...

  8. 详解Win2003 IIS6.0 301重定向带参数的问题(转摘)

      网站更换域名,把旧域名用301指到新域名来. 从iis中设置url永久转向就可以,看上去很容易,用了一会儿才发现,参数都没有带上. 从微软网站上找到如下说明,果然好使: 重定向参考 (IIS 6. ...

  9. javascript中常用的一些功能及正则表达式的用法

    一.取得地址栏后的参数 /** * 假设地址栏url为:login.do?username = "这里中文的话会是特殊字符组成的" */ //定义一个取得参数值的函数 functi ...

  10. Javasript中Date日期常用用法(正则、比较)

    Date 对象用于处理日期和时间.创建 Date 对象的语法:  代码如下 复制代码 var myDate=new Date() Date 对象会自动把当前日期和时间保存为其初始值.参数形式有以下5种 ...