飞创网站建设,做网站还是订阅号,wordpress 菜鸟,东莞 外贸网站设计理解同步交互和异步交互
举个例子#xff1a;普通B/S模式(同步) AJAX技术(异步) * 同步#xff1a; 提交请求-等待服务器处理-处理完毕返回 这个期间客户端浏览器不能干任何事。 发送方发出数据后#xff0c;等接收方发回响应以后才发下一个数据包的…理解同步交互和异步交互
举个例子普通B/S模式(同步) AJAX技术(异步) * 同步 提交请求-等待服务器处理-处理完毕返回 这个期间客户端浏览器不能干任何事。 发送方发出数据后等接收方发回响应以后才发下一个数据包的通讯方式。 你现在传输我要亲眼看你传输完成才去做别的事 。 * 异步 请求通过事件触发-服务器处理这时浏览器仍然可以作其他事情-处理完毕。 发送方发出数据后不等接收方发回响应接着发送下个数据包的通讯方式 。 你传输吧我去做我的事了传输完了告诉我一声 。 什么是Ajax Ajax被认为是(Asynchronous JavaScript and XML的缩写。现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. Ajax并非一种新的技术而是几种原有技术的结合体。它由下列技术组合而成: 1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用javascript来绑定和调用。 Ajax的工作原理 AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介从而消除了网络交互过程中的处理—等待—处理—等待缺点。 用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。 AJAX引擎允许用户与应用软件之间的交互过程异步进行独立于用户与网络服务器间的交流。现在可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。 AJAX的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求从服务器获得数据然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。 了解XMLHttpRequest XMLHttpRequest是ajax的核心机制它是在IE5中首先引入的是一种支持异步请求的技术。简单的说也就是javascript可以及时向服务器提出请求和处理响应而不阻塞用户。达到无刷新的效果。
XMLHttpRequest属性有 属性描述onreadystatechange 每次状态改变所触发事件的事件处理程序。responseText 从服务器进程返回数据的字符串形式。responseXML 从服务器进程返回的DOM兼容的文档数据对象。status 从服务器返回的数字代码比如常见的404未找到和200已就绪status Text 伴随状态码的字符串信息readyState 对象状态值,存有服务器响应的状态信息。 每当 readyState 改变时onreadystatechange 函数就会被执行。readyState 属性可能的值 状态 描述 0 请求未初始化在调用 open() 之前 1 请求已提出调用 send() 之前 2 请求已发送这里通常可以从响应得到内容头部 3 请求处理中响应中通常有部分数据可用但是服务器还没有完成响应 4 请求已完成,此时可以通过通过responseXml和responseText获取完整的回应数据。 但是由于各浏览器之间存在差异所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。下面是一个比较标准的创建XMLHttpRequest对象的方法。 /** 创建XMLHttpRequest对象* */function ajaxFunction(){var xmlHttp;try { // Firefox, Opera 8.0, SafarixmlHttp new XMLHttpRequest();} catch (e) { // Internet Explorertry {xmlHttp new ActiveXObject(Msxml2.XMLHTTP);} catch (e) {try {xmlHttp new ActiveXObject(Microsoft.XMLHTTP);} catch (e) {alert(您的浏览器不支持AJAX);return false;}}}return xmlHttp;} AJAX(客户端)开发步骤
1.创建XMLHttpRequest对象
var xmlHttp ajaxFunction();
2.接受服务器端的响应
/* readyState 属性存有服务器响应的状态信息。每当 readyState 改变时onreadystatechange 函数就会被执行。*/
xmlHttp.onreadystatechange function(){if(xmlHttp.readyState4){var dataxmlHttp.responseText;alert(xmlHttp.responseText:data);}
}
3.打开和服务器的连接
/** bstrMethod: http方法例如POST、GET、PUT及PROPFIND。大小写不敏感。 * bstrUrl: 请求的URL地址可以为绝对地址也可以为相对地址。 * varAsync [可选]:布尔型指定此请求是否为异步方式默认为true。如果为真当状态改变时会调用onreadystatechange属性指定的回调函数。 * bstrUser [可选]:如果服务器需要验证此处指定用户名如果未指定当服务器需要验证时会弹出验证窗口。 * bstrPassword [可选]:验证信息中的密码部分如果用户名为空则此值将被忽略。
*/
xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//POST方式向服务器发送AJAX请求时要通过设置请求头来指定为application/x-www-form-urlencoded编码类型, 代码如下
xmlHttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded); 4.发送请求到http服务器
/* varBody:欲通过此请求发送的数据。 */
xmlHttp.send(varBody); 个人博客学习园 原文地址http://www.xuexiyuan.cn/article/detail/192.html
