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. Sprint第二个冲刺（第七天）

    一.Sprint 计划会议: 现在简单的说下今天的会议情况:组员们除了完善之前做的功能,还打算实现把轮播图迁移到一个fragment中,方便管理.现在也准备着手实现商家上传商品的图片这个功能,虽说现在 ...

  2. 【转】Entity Framework技术导游系列开篇与热身

    转自:http://blog.csdn.net/bitfan/article/details/12779517 Entity Framework走马观花 之 把握全局 ================ ...

  3. LVS+keepalived配置

    一.系统环境准备: 1.keepalive主服务器 主机名称:dir 系统环境:CentOS release 6.5 (Final) 外网ip:192.168.1.203(网络模式桥接) vip:19 ...

  4. HDU 1312 Red and Black --- 入门搜索 DFS解法

    HDU 1312 题目大意: 一个地图里面有三种元素,分别为"@",".","#",其中@为人的起始位置,"#"可以想象 ...

  5. 深入理解html5系列-文本标签

    转:http://blog.csdn.net/lihui130135/article/details/45150501 文章简介:       关于html5相信大家早已经耳熟能详,但是他真正的意义在 ...

  6. Python爬虫学习笔记——豆瓣登陆(一)

    #-*- coding:utf-8 -*- import requests from bs4 import BeautifulSoup import html5lib import re import ...

  7. kuangbin_UnionFind A (POJ 2236)

    挺接近模板的一题 接受O操作的时候扫一遍 符合条件的merge进去 done #include <cstdio> #include <cstring> #include < ...

  8. 论文笔记之：Spatially Supervised Recurrent Convolutional Neural Networks for Visual Object Tracking

    Spatially Supervised Recurrent Convolutional Neural Networks for Visual Object Tracking  arXiv Paper ...

  9. SoftmaxLayer and SoftmaxwithLossLayer 代码解读

    SoftmaxLayer and SoftmaxwithLossLayer 代码解读 Wang Xiao 先来看看 SoftmaxWithLoss 在prototext文件中的定义: layer { ...

  10. 100 open source Big Data architecture papers for data professionals

    zhuan :https://www.linkedin.com/pulse/100-open-source-big-data-architecture-papers-anil-madan Big Da ...