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" 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);
版权声明:本文博客原创文章,博客,未经同意,不得转载。
AJAX入门——工作原理的更多相关文章
- AJAX的工作原理及其优缺点
1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML ...
- Ajax的工作原理以及优点、缺点 (汇总)
最近空闲时间,有朋友问我关于Ajax的工作原理,在这里我结合自己的工作经验和网上大佬的经验做一个总结,如有不足,请各位业内大佬指正 在我们了解Ajax之前,我们先来了解一下Javascript的执行原 ...
- Ajax的工作原理以及优缺点
Ajax的工作原理 : 相当于在客户端与服务端之间加了一个抽象层(Ajax引擎),使用户请求和服务器响应异步化,并不是所有的请求都提交给服务器,像一些数据验证和数据处理 都交给Ajax引擎来完成,只有 ...
- Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可 ...
- ajax及其工作原理
1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...
- Ajax学习--理解 Ajax 及其工作原理
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:• HTML 用于建立 Web 表单并确定应用 ...
- 【AppScan】入门工作原理详解
AppScan,即 AppScan standard edition.其安装在 Windows 操作系统上,可以对网站等 Web 应用进行自动化的应用安全扫描和测试.Rational AppScan( ...
- AppScan入门工作原理详解
AppScan,即 AppScan standard edition.其安装在 Windows 操作系统上,可以对网站等 Web 应用进行自动化的应用安全扫描和测试. Rational AppScan ...
- ajax的工作原理2
Ajax是异步javascript和xml,可以在不重新加载整个网页的情况下,与服务器异步数据交换,对网页中某个部分进行局部刷新. Ajax是如何实现局部刷新的: 在脚本设置window对象的loca ...
随机推荐
- Struts2_1_struts2建立一个执行环境
1)最低需要进口jar包: commons-fileupload-1.2.1.jar.commons-logging-1.0.4.jar. freemarker-2.3.15.jar.ognl-2.7 ...
- NSIS:使用PassDialog插件实现密码安装(卸载)功能
原文 NSIS:使用PassDialog插件实现密码安装(卸载)功能 有时,出于特殊的需求,我们要给安装或卸载程序加一个密码,只有输入了正确的密码才可以继续.比如: 下面我们使用插件来实现安装密码: ...
- 把自解压的RAR压缩包解压到指定的软件安装目录
原文 把自解压的RAR压缩包解压到指定的软件安装目录 今天千里独行同学给轻狂来信问了一个问题:如何把一个自解压的RAR压缩包解压到我们指定的软件安装目录. 其实,在NSIS中,我们可以灵活运用相关 ...
- Vim 命令 【转】
高级一些的编辑器,都会包含宏功能,vim当然不能缺少了,在vim中使用宏是非常方便的: :qx 开始记录宏,并将结果存入寄存器xq 退出记录模式@x 播放记录在x寄存器中的宏命 ...
- EXCEL Pivot table manipulate
Add filter For the Demo time,I would like to filter out the products which not in Red and Black colo ...
- JavaScript之包装对象
JavaScript对象是一种复合值:它是属性和已命名值的集合.通过"."符号来引用属性值.当属性值是一个函数时,称为方法. ①一段你常用但却未必明白其真正底层原理的代码: var ...
- JNLP(Java Web Start )(转)
JNLP(Java Network Launching Protocol )是java提供的一种可以通过浏览器直接执行java应用程序的途径,它使你可以直接通过一个网页上的url连接打开一个java应 ...
- sharepoint 2013 配件控制FileUpload如何检查是否图像的方法
它记录的附件控制FileUpload如何检查是否图像的方法: function checkImg() { var fileObj =document.getElementById('<%=Fil ...
- linux_安装 redis
Installation Download, extract and compile Redis with: $ wget http://download.redis.io/releases/redi ...
- hdu1286 寻找新朋友 (欧拉功能)
原标题:点击打开链接 关于欧拉函数的算法具体解说:点击打开链接 欧拉函数 1.欧拉函数是不全然积性函数. 2.欧拉函数p(x) = x * (p1 - 1) / p1 * (p2 - 1)/p2 * ...