AJAX入门——工作原理

同步和异步交互，了解互动

对于一个样本：一般B/S模式(同步)       AJAX技术(异步)
       *  同步：

      提交请求->等待server处理->处理完成返回  这个期间client浏览器不能干不论什么事。

       发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。  

       你如今传输，我要亲眼看你传输完毕，才去做别的事 。

       *  异步： 

      请求通过事件触发->server处理（这时浏览器仍然能够作其它事情）->处理完成。

       发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式 。

       你传输吧，我去做我的事了。传输完了告诉我一声 。  

什么是Ajax？

       Ajax被觉得是(Asynchronous JavaScript and XML的缩写）。

如今，同意浏览器与server通信而无须刷新当前页面的技术都被叫做Ajax.

       Ajax并不是一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成: 

1.使用CSS和XHTML来表示。 

2. 使用DOM模型来交互和动态显示。

 

3.使用XMLHttpRequest来和server进行异步通信。

 

4.使用javascript来绑定和调用。

Ajax的工作原理

       AJAX採用异步交互过程。AJAX在用户与server之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
       用户的浏览器在运行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与server之间的交互。

       AJAX引擎同意用户与应用软件之间的交互过程异步进行，独立于用户与网络server间的交流。

如今，能够用Javascript调用AJAX引擎来取代产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不须要又一次加载整个页面的需求能够交给AJAX来运行。 

       AJAX的原理简单来说通过XmlHttpRequest对象来向server发异步请求。从server获得数据，然后用javascript来操作DOM而更新页面。这当中最关键的一步就是从server获得请求数据。

了解XMLHttpRequest

　   XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。

简单的说，也就是javascript能够及时向server提出请求和处理响应。而不堵塞用户。达到无刷新的效果。

XMLHttpRequest属性有：

属性	描写叙述
onreadystatechange	每次状态改变所触发事件的事件处理程序。
responseText	从server进程返回数据的字符串形式。
responseXML	从server进程返回的DOM兼容的文档数据对象。
status	从server返回的数字代码，比方常见的404（未找到）和200（已就绪）
status Text	伴随状态码的字符串信息
readyState	对象状态值,存有server响应的状态信息。 每当 readyState 改变时，onreadystatechange 函数就会被运行。

 readyState 属性可能的值：

状态	描写叙述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常能够从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用。可是server还没有完毕响应）
4	请求已完毕,此时能够通过通过responseXml和responseText获取完整的回应数据。

　　可是，因为各浏览器之间存在差异。所以创建一个XMLHttpRequest对象可能须要不同的方法。这个差异主要体如今IE和其他浏览器之间。

以下是一个比較标准的创建XMLHttpRequest对象的方法。

	/*
	 * 创建XMLHttpRequest对象
	 * */
	function ajaxFunction(){
		var xmlHttp;
		try { // Firefox, Opera 8.0+, Safari
			xmlHttp = new XMLHttpRequest();
		} 
		catch (e) { // Internet Explorer
			try {
				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			} 
			catch (e) {
				try {
					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				} 
				catch (e) {
					alert("您的浏览器不支持AJAX。");
					return false;
				}
			}
		}
		return xmlHttp;
	}

AJAX(client)开发步骤：

1.创建XMLHttpRequest对象

var xmlHttp = ajaxFunction();

2.接受server端的响应

/* readyState 属性存有server响应的状态信息。
每当 readyState 改变时，onreadystatechange 函数就会被运行。*/
xmlHttp.onreadystatechange = function(){
	if(xmlHttp.readyState==4){
		var data=xmlHttp.responseText;
		alert("xmlHttp.responseText:"+data);
	}
}

3.打开和server的连接

/*
 * bstrMethod: http方法，比如：POST、GET、PUT及PROPFIND。大写和小写不敏感。 
 * bstrUrl: 请求的URL地址，能够为绝对地址也能够为相对地址。
 
 * varAsync [可选]:布尔型。指定此请求是否为异步方式，默觉得true。假设为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 
 * bstrUser [可选]:假设server须要验证，此处指定username，假设未指定，当server须要验证时。会弹出验证窗体。 
 * bstrPassword [可选]:验证信息中的password部分，假设username为空。则此值将被忽略。 
*/
xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//POST方式向server发送AJAX请求时要通过设置请求头来指定为application/x-www-form-urlencoded编码类型, 代码例如以下：
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  

4.发送请求到httpserver

/* varBody:欲通过此请求发送的数据。
 */
xmlHttp.send(varBody);

版权声明：本文博客原创文章，博客，未经同意，不得转载。