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. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  2. [LeetCode] Longest Increasing Subsequence 最长递增子序列

    Given an unsorted array of integers, find the length of longest increasing subsequence. For example, ...

  3. Connect to Database Using Custom params链接数据库配置参数说明

    使用RF的关键字Connect to Database Using Custom params链接数据库,对应的参数说明: a)     第一个参数我使用的是cx_Oracle,就写这个 b)     ...

  4. 【MySQL】编译安装

    安装所需环境: yum install cmake make glibc gcc gcc-c++ libstdc++* sysstat lrzsz libtool libxml* libtool-lt ...

  5. C#调试入门篇

    DotNet程序的调试,是DotNet程序员必备的技能之一,开发出稳定的程序.解决程序的疑难杂症都需要很强大的调试能力.DotNet调试有很多方法和技巧.现在本文就介绍一下借助DebugView工具进 ...

  6. JavaWeb---总结(七)HttpServletResponse对象(一)

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. request和response对象即然代表请求和响应,那我们 ...

  7. Zookeeper 初体验之——伪分布式安装(转)

    原文地址: http://blog.csdn.net/salonzhou/article/details/47401069 简介 Apache Zookeeper 是由 Apache Hadoop 的 ...

  8. 在 Windows上配置NativeScript CLI

    1.安装Node.js,到https://nodejs.org/下载安装 2.安装Chocolatey,https://chocolatey.org/,先看一下关于chocolatey的介绍: 安装方 ...

  9. 29.调整数组顺序使奇数位于偶数前面[ReOrderArray]

    [题目] 输入一个整数数组,调整数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分.要求时间复杂度为O(n). [分析] 如果不考虑时间复杂度,最简单的思路应该是从头扫描这个 ...

  10. Spring配置文件的读取

    1.配置文件的命名 Spring框架中的默认配置文件,建议命名为applicationContext.xml * 编写配置文件,默认位置有两个 ①src目录.②WEB-INF目录 2.Spring 配 ...