同步和异步交互,了解互动
* 同步:
提交请求->等待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" alt="">
Ajax的工作原理
用户的浏览器在运行任务时即装载了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)开发步骤:
var xmlHttp = ajaxFunction();
/* readyState 属性存有server响应的状态信息。 每当 readyState 改变时,onreadystatechange 函数就会被运行。*/
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState==4){
var data=xmlHttp.responseText;
alert("xmlHttp.responseText:"+data);
}
}
/*
* 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");
/* varBody:欲通过此请求发送的数据。 */
xmlHttp.send(varBody);
版权声明:本文博客原创文章,博客,未经同意,不得转载。