同步和异步交互，了解互动
对于一个样本：一般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来绑定和调用。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdXNlcl9sb25nbGluZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >
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);
版权声明：本文博客原创文章，博客，未经同意，不得转载。