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. AspxGridView

    转:出处 http://i.cnblogs.com/EditPosts.aspx?opt=1 AspxGridView点滴 1:页码设置 <SettingsPager>         & ...

  2. android listview去掉分割线

    1:android listview去掉分割线 1>设置android:divider="@null" 2>android:divider="#0000000 ...

  3. ThinkPHP多表操作

    有以下三张表,分表为pl表(uid,content),user表(id,username),lyb表(uid,title) 多表查询操作有以下几种方法: ㈠视图模型(推荐) 定义视图模型,只需要继承T ...

  4. GNU C 扩展（转）

    GNU CC 是一个功能非常强大的跨平台 C 编译器,它对 C 语言提供了很多扩展,这些扩展对优化.目标代码布局.更安全的检查等方面提供了很强的支持.这里对支持支持 GNU 扩展的 C 语言成为 GN ...

  5. python中字符串连接的三种方式

    1.字符串之间连接 'aa' 'bb' 可以中间为空格 或者什么都没有. 那么输出都是两者之间紧密相连. 2.字符串+数字 'aa' +90 这样会报错,因为不同类型不能相加, 可以用 'aa',90 ...

  6. Hightchart.js 的使用

    中文网址介绍 http://www.hcharts.cn/docs/basic-zoom http://v1.hcharts.cn/demo/index.php?p=46

  7. 论文笔记之：Multiple Feature Fusion via Weighted Entropy for Visual Tracking

    Multiple Feature Fusion via Weighted Entropy for Visual Tracking ICCV 2015 本文主要考虑的是一个多特征融合的问题．如何有效的进 ...

  8. 转 -Linux 自检和 SystemTap (强大的内核调试工具)---包含下载地址

    下载: http://www.oschina.net/p/systemtap/ https://sourceware.org/systemtap/ftp/releases/   Linux 自检和 S ...

  9. HtmlEncode、HtmlDecode、UrlEncode、UrlDecode

    HtmlEncode: 将 Html 源文件中不允许出现的字符进行编码.例如:"<".">"."&" 等. HtmlDe ...

  10. Mysql 索引 转载

    转自 :http://blog.csdn.net/wud_jiyanhui/article/details/7403375 什么是索引 索引时一种特殊的文件,他们包涵着对数据表里所有记录的引用指针. ...