ajax同步和异步的差异

一、web中的同步和异步：

（1）同步请求：顺序处理，即当我们向服务器发出一个请求时，在服务器没返回结果给客户端之前，我们要一直处于等待状态直至服务器将结果返回到客户端，我们才能执行下一步操作。例如普通的B/S模式就是同步请求（注：B/S模式也即服务器与浏览器通信主要采用HTTP协议；通信方式为“请求——响应”，浏览器发出请求；服务器做出响应。）

（2）异步请求：并行处理，当我们向服务器发出一个请求时，在服务器没返回结果之前，我们还是可以执行其他操作。例如AJAX技术就是异步请求。

二、ajax中的同步与异步：

不要怀疑，在ajax中其实也存在着同步请求的选项，下面就让我们重点来说说这块的内容。各位小伙伴搬好小板凳坐好了吗？咱们要开始讲解了哈：

ajax的open()方法

用法：open(http-method，url，async，userID，password)

后面是帐号和密码，在禁止匿名访问的http页面中，需要用户名和口令。

ajax.open方法中，第3个参数是设同步或者异步。prototype等js类库一般都默认为异步，即设为true。先说下同步的情况下，js会等待请求返回，获取status。不需要onreadystatechange事件处理函数。而异步则需要onreadystatechange事件处理，且值为4再正确处理下面的内容。

首先看看异步处理方式。

其中async是一个布尔值。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式：Flase。

请求方式

GET

最为常见的HTTP请求，普通上网浏览页面就是GET。GET方式的参数请求直接跟在URL后，以问号开始。（JS中用window.location.search获得）。参数可以用encodeURIComponent进行编码，使用方式：

var EnParam = encodeURIComponent(param);

URL只支持大约2K的长度，即2048字符数；

使用GET进行AJAX请求时候会缓存导致出现的页面不是正确的，一般方法加random参数值；

ajax.send(null)。

POST

向服务器提交数据用到。

需要将form表单中的值先取出转换成字符串，用&符号连接，（同GET传参数一样）；

提交数据量2GB；

使用ajax.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)，处理提交的字符串；

ajax.send(strings)，这个strings表示form中需要提交的内容，例如a=1&b=2类似这样的字符串。

下面是ajax中同步请求与异步请求的代码示例，相信通过代码的比较，大家理解起来就不难了：

<script>
//同步示例
function RequestByGet(nProducttemp, nCountrytemp) {
var xmlhttp
if(window.XMLHttpRequest) {
//isIE = false;
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
//isIE = true;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Web page location.
var URL = "http://www.baidu.com/;
xmlhttp.open("GET", URL, false);
//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=Shift_JIS")
xmlhttp.send(null);
var result = xmlhttp.status;
//OK
if(result == 200) {
document.getElementById("div_RightBarBody").innerHTML = xmlhttp.responseText;
}
xmlhttp = null;
}
</script>

<script>
//异步示例
var xmlhttp
function RequestByGet(nProducttemp, nCountrytemp) {
if(window.XMLHttpRequest) {
//isIE = false;
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
//isIE = true;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//Web page location.
var URL = "http://www.baidu.com/";
xmlhttp.open("GET", URL, true);
xmlhttp.onreadystatechange = handleResponse;
//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
xmlhttp.send(null);
}
function handleResponse() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("div_RightBarBody").innerHTML = xmlhttp.responseText;
xmlhttp = null;
}
}
</script>

对比过上面的代码大家是不是清晰多了呢？

三、Ajax如何确定选择同步还是异步：

相信这是部分初学者包括我在内一直困惑的问题，就是什么时候该选择同步，什么时候该选择异步呢？

首先要清楚Ajax中的同步选择是为极少数既不能使用异步调用也不能重新载入整个页面的情况而准备的。而异步处理是为避免了服务器检索时候的延时问题，因为你的访客可以继续在页面进行操作，而要求的信息也可以在更新页面的同时得到处理。

ajax同步和异步的差异相关推荐

ajax 同步和异步的区别|已迁移
为什么80%的码农都做不了架构师?>>> 同步会阻塞后面的代码,也就是说假设这个ajax请求要3 5秒,浏览器就会阻塞住3 5秒不执行后面的,知道等到ajax请求完成. 而且同 ...
Ajax同步和异步的区别？
今天在code review时候看到同事的代码,用了ajax同步,async:false,如果不设置async参数,默认是true,为异步,异步的情况是比较复杂的,看下同步这个例子: function ...
Ajax同步和异步的区别
ajax数据的提交方式有2种一种是同步一种是异步的 .同步的意思就是说当你进行页面提交时,进行了一次页面的重新加载,和服务器进行了交互, 这段期间,你不能进行其它操作,只能进行等待服务器的响应.而 ...
ajax同步和异步的区别_同步电机和异步电机区别
电工之家:www.dgzj.com QQ群:2179090 关注电工之家官方微信公众号"电工之家",收获更多经验知识. 同步电机和异步电机之间从区别就在于转子内的励磁电流,同步 ...
ajax同步和异步的区别_纯电动汽车搭载的交流异步电机与永磁同步电机有何区别？...
点击上方"飞灵汽车","星标或置顶公众号" 关键行业资讯,第一时间送达! -------- 不管是说起特斯拉还是蔚来汽车的动力系统,我们都能听到异步电机.永磁同 ...
php和ajax的同步和异步请求,ajax 同步请求和异步请求的差异分析_javascript技巧
ajax同步和异步的差异, 先看2段代码: 代码一: Synchronize = function(url,param) { function createXhrObject() { var http ...
同步请求和ajax请求,ajax 同步请求和异步请求的差异分析
ajax 同步请求和异步请求的差异分析发布于 2016-12-27 08:14:26 | 53 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Javascript ...
Ajax 同步与异步
同步与异步单词二者定义同步与异步的区别同步请求异步请求同步与异步时间比较 time.php Sync-vs-Async.html 单词 synchronization 英 [ˌsɪŋkrə ...
jq ajax同步异步,详解JQuery中Ajax的同步与异步
说到ajax同步与异步,可能很多同学对它都不是很了解,接下来我们就Ajax的同步与异步作个简单的介绍.同步:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事.异步 ...

ajax同步和异步的差异

ajax同步和异步的差异相关推荐

最新文章

热门文章