AJAX入门——工作原理

时间:2022-03-21 07:54:48
同步和异步交互,了解互动
对于一个样本:一般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入门——工作原理

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdXNlcl9sb25nbGluZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

Ajax的工作原理
       AJAX採用异步交互过程。AJAX在用户与server之间引入一个中间媒介,从而消除了网络交互过程中的处理—等待—处理—等待缺点。

       用户的浏览器在运行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写,通常藏在一个隐藏的框架中。它负责编译用户界面及与server之间的交互。

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

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

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

AJAX入门——工作原理

了解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);

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