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. Ajax.ActionLink参数详解

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

  2. Ajax.BeginForm参数详解

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

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

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

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

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

  5. MVC之Ajax.BeginForm使用详解之更新列表

    1.首先,请在配置文件设置如下:(该项默认都存在且为true) <add key="UnobtrusiveJavaScriptEnabled" value="tru ...

  6. JQuery中$.ajax()方法参数详解(转载)

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

  7. php课程---Ajax(老师详解)

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

  8. Ajax实现原理详解

    Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程.使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作. 这就是异 ...

  9. jquery ajax error函数详解

    代码:$(document).ready(function() {            jQuery("#clearCac").click(function() {        ...

随机推荐

  1. Android 7.1 - App Shortcuts

    Android 7.1 - App Shortcuts 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Shortcuts 文中如有纰漏,欢迎大家留言 ...

  2. c程序中出现segment error 和 bus error 的原因

    在c程序中,经常会遇到段错误(segment error)和总线错误(bus error),这两种问题出现的原因可能如下 段错误: 对一个NULL指针解引用. 访问程序进程以外的内存空间. 实际上,第 ...

  3. codeforces 697B Barnicle

    题目链接:http://codeforces.com/problemset/problem/697/B 题目大意: 将科学计数法用十进制表示.[如果类似于7.0应输出7] 解题思路: Java 中 B ...

  4. 101 个 MySQL 的调节和优化的提示(根据实际情况调整,有些已经不适用)

    英文原文:101 Tips to MySQL Tuning and Optimization ( July 12, 2011)翻译:http://www.oschina.net/translate/1 ...

  5. VS2013和VS2008项目的互通

    VS2013和VS2008项目的互通,大家可能都查到了百度经验里面的一个帖子: http://jingyan.baidu.com/article/f54ae2fc3c3adc1e92b849de.ht ...

  6. Thrift CentOS安装和使用

    Thrift是Apache的一个开源的跨语言服务开发框架,它提供了一个代码生成引擎来构建服务,支持C++,Java,Python,PHP,Ruby,Erlang,Perl,Haskell,C#,Coc ...

  7. hdu 1358 KMP的next数据运用

    由于next[i]保存的是前i-1个字符中最大的重复子序列,那么i-next[i]就是循环节. #include<cstdio> #include<cstring> #incl ...

  8. 一、 Socket之UDP异步传输文件

    用SCOKET 发送文件是一个不太好处理的问题,网上的例子也都是很简单的,我准备写一个比较完善的例子,这个就算是开始吧,以后的都会在这个例子的基础上进行修改,准备实现多线程传输.断点传输和文件传输的完 ...

  9. Strut2文件下载

    Struts2控制文件下载,可以在文件下载之前做一些操作.这里就以权限控制为例,简单实现一下Struts2的文件下载. 一.Struts2文件下载的Action配置,是提供了一个能返回InputStr ...

  10. 《C程序设计语言现代方法》第5章 选择语句

    关系运算符的优先级低于算术运算符,关系运算符都是左结合的. 判等运算符的优先级低于关系运算符,判等运算符也是左结合的. 逻辑运算符将任何非零值操作数作为真值来处理,同时将任何零值操作数作为假值来处理. ...