ajax原理和XmlHttpRequest对象

　　Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

　所以我们先从XMLHttpRequest讲起，来看看它的工作原理。

　首先，我们先来看看XMLHttpRequest这个对象的属性。

　　它的属性有：

　　onreadystatechange  每次状态改变所触发事件的事件处理程序。

　　responseText     从服务器进程返回数据的字符串形式。

　　responseXML    从服务器进程返回的DOM兼容的文档数据对象。

　　status           从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

　　status Text       伴随状态码的字符串信息

　　readyState       对象状态值

　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化) 对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

　　但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。

直接上一个简单的例子，不懂的可以给我留言

ajax.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>ajax</title>

 <script type="text/javascript">

     var xmlhttp = false;

     function send_request(url){

         xmlhttp = false;

         if(window.XMLHttpRequest){//现代浏览器：FireFox，chrome，opare，Safari等

             xmlhttp = new XMLHttpRequest();

             xmlhttp.overrideMimeType('text/xml');//Firefox有些版本在处理服务器返回未包含XMLmime-type头部信息的内容时会出错，要确保包含

         }else{//古代浏览器：IE5、6

             try{

                 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

             }catch(e){

                 try{

                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                 }catch(e){}

             }

         }

         if(!xmlhttp){

             alert("xmlHttpRequest对象创建失败");

             return false;

         }

         xmlhttp.onreadystatechange = progressRequest;//注意，progressRequest此函数不加括号、参数，也可以用即时定义function（）{}

         xmlhttp.open('GET',url,true);//第一个参数有三种，get、post、head,url只能是同网域的，否则没权限

         xmlhttp.send(null);//open调用后就要调用send，但如果要post文件（图片等）要设置MIME类别（跟form表单一样：xml.setRequestHeader"Content-Type","application/x-www-form-urlencoded"）;

         /*XMLHttpRequest对象方法

             xmlhttp.abort();//停止当前请求

             xmlhttp.getAllResponseHeaders();作为字符串返回完整的headers

             xmlhttp.getResponseHeader("headerLabel");//作为字符串返回单个header标签

             xmlhttp.setRequestHeader("label","value");//设置header，并和请求一起发送

         */

         /*XMLHttpRequest对象方法

             xmlhttp.onreadystatechange;//状态改变事件触发

             xmlhttp.readState;//对象状态，0:未初始化，1：读取中，2：已读取，3，交互中，4完成

             xmlhttp.responseText;//服务器进程返回数据的文本版本，

             xmlhttp.responseXML;//服务器进程返回数据的兼容DOM的XML文档对象，

             xmlhttp.status;//服务器状态码。

             xmlhttp.statusText;//服务器返回的状态文本信息

         */

     }

     function progressRequest(){

         if(xmlhttp.readyState == 4){//判断对象状态

             if(xmlhttp.status == 200){//信息已成功返回，开始执行处理信息

                 document.getElementById("text").value  = xmlhttp.responseText;

             }else{

                 alert("您请求的页面有异常！");

             }

         }

         else{

             //alert(xmlhttp.readyState);

         }

     }

 </script>

 </head>

 <body>

   <div class="content">

     <input type="text" id="text" />

     <input type="button" value="提交" onclick="send_request('abc.php')">

  </div>

 </body>

 </html>

后台程序:abc.php     (注：这里可以查询数据库，实现复杂的计算输出)

 <?php

     echo "i love ajax";

 ?>

ajax实现--技术细节详解的更多相关文章

  1. MVC之Ajax.BeginForm使用详解之更新列表 mvc验证jquery.unobtrusive-ajax

    MVC之Ajax.BeginForm使用详解之更新列表   1.首先,请在配置文件设置如下:(该项默认都存在且为true) <add key="UnobtrusiveJavaScrip ...

  2. $.ajax()所有参数详解

    原文:https://www.cnblogs.com/everest33Tong/p/6159700.html [一]$.ajax()所有参数详解 url: 要求为String类型的参数,(默认为当前 ...

  3. ajax方法参数详解与$.each()和jquery里面each方法的区别

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

  4. Ajax.ActionLink参数详解

    该语法会生成一个a标签,点击a标签会执行一个Ajax请求. 有12个方法重载,下面详解方法中的各项参数: 参数一:linkText string类型 说明:链接显示的文字内容 参数二:actionNa ...

  5. Ajax.BeginForm参数详解

    在Asp.Net的MVC中的语法,在Razor页面中使用,替代JQuery的Ajax使用,方便快捷. 使用Ajax.BeginForm方法会生成一个form表单,最后以Ajax的方式提交表单数据:需要 ...

  6. jquery.ajax（）详解

    jQuery.ajax() 函数详解 traditional 如果你希望使用传统方式来序列化参数,将该属性设为true. 传递数组时, traditional必须为true var arr = []; ...

  7. ajax、反向ajax、jsonp详解

    ajax详解 什么是ajax 其实ajax已经属于老技术了,现在几乎没人不会用了,在这里主要是把底层的东西给大家分享一下,以备应对装逼的面试官. ajax即“Asynchronous Javascri ...

  8. JQuery中$.ajax()方法参数详解

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  9. JQuery中$.ajax()方法参数详解 及 async属性说明

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

随机推荐

  1. Object类、包装类、内部类详解

    1.Object类 1.概念: 1.1 所有类在创建时都默认继承了java.lang.Object 1.2 所有类对象都可以声明为类对象的引用 Object ob1=new String(); Obj ...

  2. Android--解析XML之SAX

    前言 既然要说XML解析,那么先来聊聊什么是XML.XML,可扩展标记语言 (Extensible Markup Language) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义 ...

  3. 控制文本和外观------Style Binding(Style属性绑定)

    目的 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS class的话,请 ...

  4. ls命令大全

    ls 命令:15个Linux面试级问题--第一集 [日期:2015-03-12] 来源:Linux社区  作者:GuiltyMan [字体:大 中 小]   注释:'ls'是“list”的意思,重点在 ...

  5. (转) Lua string 操作函数

    本文转自: http://www.cnblogs.com/newlist/p/3649388.html table.keys 返回指定表格中的所有键. 格式: keys = table.keys(表格 ...

  6. #你好Unity3D#Project脚本执行双击资源操作

    Unity的Project里面放了很多游戏资源,比如脚本或者图片.正常情况下我们可以通过鼠标双击来进行打开.假如我现在不想主动双击打开,我想自动打开某个脚本或者图片再或者别的资源怎么办? 如下代码所示 ...

  7. linux nginx 配置ssl证书访问

    http://www.linuxidc.com/Linux/2013-08/88271.htm 一.什么是 SSL 证书,什么是 HTTPSSSL 证书是一种数字证书,它使用 Secure Socke ...

  8. SQL Server 索引分类

    什么是索引 拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为4K .为了加快查找的速度,汉语字(词)典一般都有按拼音. ...

  9. VS 2010 编译安装 boost 库 -（和 jsoncpp 库共存）

    boost库的简单应用很容易,网上有很多资料,但是,如果要json 和 boost 一起使用就会出现这样那样的问题, 有时候提示找不到 “libboost_coroutine-vc100-mt-sgd ...

  10. HTML5服务器推送事件

    目前客户端(浏览器)和服务端交互大致有以下几种方式: 1)form表单提交方式,适合访问量不大,对用户体验要求不高的web系统开发,或者页面整体刷新无伤大雅的场合,通信方向是客户端提交给服务端,是客户 ...