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

这就是异步调用的很好体现。首先得了解什么是异步和同步的概念。

举个例子:比如你去图书馆借某种书,可惜图书馆此书被借完。这时可以采用两种做法。

第一种做法:在图书馆一直等待,直到有人还书,然后再去吃饭睡觉。

第二种做法:直接跟图书馆管理员约定,若是有人还书,直接通知你。你则该忙什么忙什么。到时候会通知你。

而第一种做法就是同步的表现,必须等待别人还书(等待服务器返回信息)才进行其他事情,至死方休。

而第二种做法就是异步的表现,不耽误时间,合理利用时间高效率做事。

遇到这种情况,你会采用那种办法呢?

选择第一种,哈哈,说明你太执着啦;选择第二种,说明你灵活变通,合理安排自己的人生。你自己看着办吧。

那Ajax是如何从浏览器发送Http请求到服务器呢?

这就得使用一个重要的对象XMLHttpRequest。

那首先了解一下XMLHttpRequest对象的属性和方法。

主要的属性:

readyState属性有五个状态值。

0:是uninitialized,未初始化。已经创建了XMLHttpRequest对象但是未初始化。
1:是loading,send for request but not called .已经开始准备好要发送了。
2:是loaded, send called,headers and status are available。已经发送,但是还没有收到响应。
3:是interactive,downloading response,but responseText only partial set.正在接受响应,但是还不完整。
4:是completed,finish downloading.接受响应完毕。
responseText:服务器返回的响应文本。只有当readyState>=3的时候才有值,根据readyState的状态值,可以知道,当readyState=3,返回的响应文本不完整,只有readyState=4,完全返回,才能接受全部的响应文本。

responseXML:response  as Dom Document object。响应信息是xml,可以解析为Dom对象。

status:服务器的Http状态码,若是200,则表示OK,404,表示为未找到。

statusText:服务器http状态码的文本。比如OK,Not Found。

主要的方法:

open(method,url,boolean):打开XMLHttpRequest对象。其中method方法有get,post,delete,put。若是查数据,从服务器中得到一定的数据,则使用get。若是直接提交到服务器中,更新一定的数据,则使用post;url是请求资源的地址。第三个参数表示是否使用异步。默认情况是true,因为Ajax的特点就是异步传送。若使用同步则false。异步和同步上述已经举例。

send(body):发送请求Ajax引擎,让Ajax引擎操作。其中发送的内容可以是需要的参数,若是没有参数,直接send(null)

那如何使用Ajax技术?

首先,有客户端事件触发Ajax事件。

然后,创建xmlHttpRequest对象,根据浏览器不同,创建的xmlHttpRequest对象不同。用open调用,用send发送请求给Ajax引擎。

最后,执行完毕后,把结果返回给客户端。

执行的流程如下:

测试代码如下:

创建xmlHttpRequest对象:

function createXMLHttpRequest() {

//表示当前浏览器不是ie,如ns,firefox

if(window.XMLHttpRequest) {//关于这个解释请看本篇文章最底下

xmlHttp = new XMLHttpRequest();

} else if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

}

客户端事件触发:

function validate(field){

if(trim(field.value).length!=0)

{

//创建XMLHttpRequest

createXMLHttpRequest() ;

var url="user_validate.jsp?userId=" + trim(field.value)+"&timestampt="+new Date().getTime();

// alert(url);

xmlHttp.open("GET", url, true);

//方法地址。处理完成后自动调用,回调。

xmlHttp.onreadystatechange=callback ;

xmlHttp.send(null);//将参数发送到Ajax引擎

} else{ document.getElementById("userIdSpan").innerHTML = "";    }

}

结果返回操作:

function callback(){

{

alert(xmlHttp.readyState);

if(xmlHttp.readyState==4){ //Ajax引擎初始化

if(xmlHttp.status==200){ //http协议成功

//alert(xmlHttp.responseText);

document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";

}else

{

alert("请求失败,错误码="+xmlHttp.status);

}

}

}

注意:

onreadyStateChange事件,当readyState状态值发生改变就会触发此事件。

其中,xmlHttpRequest提交http请求的过程中,readyState历经五个状态值(0,1,2,3,4),所以callback函数中的alert(xmlHttp.readyState)则会不断输出1,2,3,4。其中0状态不会输出,因为0状态的时候并不执行此事件。

ps:当时在eslipse默认web 浏览器中输出的readyState状态顺序一直是:1,3,4,2。当时很纠结,因为状态值含义的分析,结果应该是1,2,3,4。后来折腾半天,才发现是浏览器的问题。不同的浏览器,执行的结果是不同的。使用IE浏览器测试,结果是1,2,3,4。哈哈,真的只有想不到,没有搜不到的。

附加内容:

if (window.XMLHttpRequest){。。。。。。}是什么意思?

    在JS里,window是最顶级对象(除了Object,Function...那些之外),它代表了一个窗体。而window.XMLHttpRequest代表的是window的一个属性。
这个是用来区分浏览器的,因为在firefox,opera,safiar,IE7.0,IE8.0(我所知道的window对象有这个属性的浏览器)这些浏览器中,window是有
XMLHttpRequest这个属性的,而IE6.0,5.5都是没有的,IE6.0或5.5是没有这个属性的,使用window.ActiveXObject替代。当然前者和后者的
XMLHttpRequest对象生成方式也是不一样的。

Ajax实现原理详解的更多相关文章

  1. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

  2. jQuery中getJSON跨域原理详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...

  3. I2C 基础原理详解

    今天来学习下I2C通信~ I2C(Inter-Intergrated Circuit)指的是 IC(Intergrated Circuit)之间的(Inter) 通信方式.如上图所以有很多的周边设备都 ...

  4. Zigbee组网原理详解

    Zigbee组网原理详解 来源:互联网 作者:佚名2015年08月13日 15:57   [导读] 组建一个完整的zigbee网状网络包括两个步骤:网络初始化.节点加入网络.其中节点加入网络又包括两个 ...

  5. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  6. SSL/TLS 原理详解

    本文大部分整理自网络,相关文章请见文后参考. SSL/TLS作为一种互联网安全加密技术,原理较为复杂,枯燥而无味,我也是试图理解之后重新整理,尽量做到层次清晰.正文开始. 1. SSL/TLS概览 1 ...

  7. 锁之“轻量级锁”原理详解(Lightweight Locking)

    大家知道,Java的多线程安全是基于Lock机制实现的,而Lock的性能往往不如人意. 原因是,monitorenter与monitorexit这两个控制多线程同步的bytecode原语,是JVM依赖 ...

  8. 节点地址的函数list_entry()原理详解

    本节中,我们继续讲解,在linux2.4内核下,如果通过一些列函数从路径名找到目标节点. 3.3.1)接下来查看chached_lookup()的代码(namei.c) [path_walk()> ...

  9. WebActivator的实现原理详解

    WebActivator的实现原理详解 文章内容 上篇文章,我们分析如何动态注册HttpModule的实现,本篇我们来分析一下通过上篇代码原理实现的WebActivator类库,WebActivato ...

随机推荐

  1. 利用HTML5的一个重要特性 —— DeviceOrientation来实现手机网站上的摇一摇功能

      介绍之前做两个声明: 以下代码可以直接运行,当然你别忘了引用jQuery才行. <script> // DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装, ...

  2. sql实现对多个条件分组排序方法和区别

    转自: http://blog.csdn.net/winer2008/article/details/4283539 rank,dense_rank,row_number区别 一:语法(用法):    ...

  3. XML真正强大的功能是来自其元素与封装的内容

    创建文档类型声明 一般而言,XML声明放在文档顶部.在PHP中声明十分简单:只需实例化一个DOM文档类的对象并赋予它一个版本号.查看程序清单A: 程序清单 A <?php// create do ...

  4. Password Attacker

    Passwords are widely used in our lives: for ATMs, online forum logins, mobile device unlock and door ...

  5. Empire C:Basic 2

    作为人与计算机沟通的媒介,C语言给我们呈现了:printf.scanf.以及缓冲区. 1.printf("%d",a) %d:d是decimal base(十进制)的开头字母,意思 ...

  6. AIM Tech Round 3 (Div. 2) A B C D

    虽然打的时候是深夜但是状态比较好 但还是犯了好多错误..加分场愣是打成了降分场 ABC都比较水 一会敲完去看D 很快的就想出了求0和1个数的办法 然后一直wa在第四组..快结束的时候B因为低级错误被h ...

  7. Day3~Day7(2016/1/23~2016/1/27)

    活动的生命周期:onCreate();onStart();onResume();onPause();onStop();onDestroy();onRestart(); 活动的启动模式:standard ...

  8. java小知识点

    1 判断是否为win系统 int version=System.getProperty("os.name").toLowerCase().indexOf("windows ...

  9. jQuery的$.get和$.ajax函数对比

    $.get较为简便,但在精细控制上乏力$.get(    url, // 请求的地址    {url:url,remark:remark},// 请求参数    function(data,textS ...

  10. LeetCode 3Sum Smaller

    原题链接在这里:https://leetcode.com/problems/3sum-smaller/ 题目: Given an array of n integers nums and a targ ...