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. spring+websocket整合

    java-websocket的搭建非常之容易,没用框架的童鞋可以在这里下载撸主亲自调教好的java-websocket程序: Apach Tomcat 8.0.3+MyEclipse+maven+JD ...

  2. tomcat实现文件打开下载功能

    omcat作为http的下载服务器,网上有很多办法 但我认为最简单的是: 1.直接把文件放在 tomcat6/webapps/ROOT 目录下, 2.然后在网址中访问: http://192.168. ...

  3. tty驱动程序框架

    tty驱动程序框架 一.TTY概念解析 在Linux系统中,终端是一类字符型设备,它包括多种类型,通常使用tty来简称各种类型的终端设备. 1.1串口终端(/dev/ttyS*) 串口终端是使用计算机 ...

  4. UVa 1593代码对齐

    原题链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  5. Python简史

    Python简史 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python是我喜欢的语言,简洁,优美,容易使用.前两天,我很激 ...

  6. 排序算法总结（一）插入排序【Insertion Sort】

    最近在忙着找工作,以前看的排序算法都忘记了,悲剧啦T  T现在来回顾一下吧. 这边推荐一个算法可视化的网站,非常有用.http://visualgo.net/ 一.插入排序的思想(Wikipedia) ...

  7. kuangbin_ShortPath G (POJ 1502)

    尽管题目很长 写的很玄乎 让我理解了半天 但是事实上就是个模板题啊摔 一发水过不解释 #include <iostream> #include <string> #includ ...

  8. maven&&gradle

    https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html http://maven.apache. ...

  9. 关于CPU Cache -- 程序猿需要知道的那些事

    本文将介绍一些作为程序猿或者IT从业者应该知道的CPU Cache相关的知识 文章欢迎转载,但转载时请保留本段文字,并置于文章的顶部 作者:卢钧轶(cenalulu) 本文原文地址:http://ce ...

  10. XunSearch（讯搜）的使用教程步骤

    一.安装编译工具 yum install make gcc g++ gcc-c++ libtool autoconf automake imake mysql-devel libxml2-devel ...