Ajax(一) — Ajax的核心与异步原理

1、什么是浏览器的同步

步骤:

客户发出HTTP请求 -> 服务器接受客户的请求并处理客户的请求 -> 服务器将相应客户的请求,返回客户所需要的页面

缺点:

1.每一次客户提交请求的时候,提交的是整个页面。也就是说不管这个页面的数据量大小,都要经过网络的传输。这样给网络造成了数据的压力。

2.在每次客户提交请求的时候,因为要提交整个数据,所以就要刷心整个页面。这样情况对于用户的交互性来说是很不好的。因为一提交以后用户当前的页面就成了白班,用户所做的事情只能是等待等待再等待。

3.在每次进行提交请求的时候,用户有可能让服务器处理的数据很少,比如邮件系统的登陆,服务器端实际上只需要用户名和密码就可以了,没有必要把其他数据也传输到服务器上。但是同步是做不到这点的。

4.特别是在管理系统中,这些系统对客户界面的友好型要求是比较高的,而同步交互是不满足这样的特点的。

2、什么是浏览器的异步交互

如图,客户端不再是发送http请求,而是用JS调用Ajax引擎来发送数据,且服务端返回的也不在时整个页面,而是处理请求后的客户端所需要的数据。

优点:

1.不用提交整个页面,而是用JavaScript提交具体的数据,这样就使一些没有必要在网络上传输的数据不用传输了。

2.因为只提交数据,所以每天提交请求的数据库不是很大,这样可以减轻网络传输数据的压力。

3.由于不用刷新整个页面,所以即便提交以后,展现在客户面前的页面还是不会消失的,这样对于客户的交互性特别好

3.Ajax的产生

Ajax(AsynchronousJavaScript and Xml). 现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

Ajax并不是一项新技术,其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest

服务器端语言:服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。

Ajax的核心XmlHttpRequest

XmlHttpRequest是对 JavaScript 的一个扩展,可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest对象的代名词. 该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

所以,IE4及其以前版本是不支持Ajax的。

XMLHttpRequest是XMLHTTP组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

XMLHttpRequest对象的初始化

function getXHR() {
	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;
}

XmlHttpRequest对象的方法

XmlHttpRequest对象的属性

4.Ajax的异步原理图

异步调用就是你 喊 你朋友吃饭 ,你朋友说知道了 ,待会忙完去找你 ,你就去做别的了

有了 Ajax 和 XMLHttpRequest 对象,就可以使用不必让用户等待服务器响应的请求模型了,只是针对局部请求作出响应即可,客户端与服务端交互的只是数据,而不再是整个页面

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-15 00:49:54

Ajax(一) — Ajax的核心与异步原理的相关文章

Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo

原文:Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo 源代码下载地址:http://www.zuidaima.com/share/1550463370480640.htm 此功能可以用在后端对数据的实时抓取,前端动态更新时使用,可以根据数据的变化进行实时刷新,基于之前我上传的一个图形demo改制.如有意见建议,疑问,大家可以留言一起探讨. 源代码截图:

Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码

前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function(){ //获取当前输入 的值 var value=$(this).val(); //偷偷摸摸发起请求 var url="${pageContext.request.contextPath }/like" var params="name="+value; //先清空下方

[转]异步机制与异步原理

前言 昨天在总结javascript异步编程的时候,提到了promise和目前比较流行的async模块,不过,在比较这两个解决方案的时候,在我个人的认知上感觉两个没有什么太大的本质区别,于是去请教了一些前辈来解答两个不同方案的优劣,在解答的过程中,涉及到了对一些异步原理的部分. 然后,感觉自己整个人的三观都被刷新了. 在了解了一些原理相关的内容之后,发现自己所理解的异步太浮于表面,这和网上看到的一些人的一些技术文章有很大的关系,关于网上发布的一些所谓的技术文章,大多都没有什么权威性,大部分都是个

Tornado学习之异步原理

本文和大家分享的主要是Tornado 异步原理相关内容,一起来看看吧,希望对大家学习Tornado有所帮助. Tornado是什么? Tornado是一个用Python编写的异步HTTP服务器,同时也是一个web开发框架. Tornado 优秀的大并发处理能力得益于它的 web server 从底层开始就自己实现了一整套基于 epoll 的单线程异步架构. 同步.异步编程差异 .对于同步阻塞型Web服务器,我们来打个比方,将它比作一间饭馆,而Web请求就是来这家饭馆里吃饭的客人.假设饭馆店里只有

jQuery Ajax 实例 ($.ajax、$.post、$.get)

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/ $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$

JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)

一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数:为Ajax对象的 onreadystatechange事件设定响应函数 - 发送请求:调用Ajax对象的send方法 - 获取Ajax对象     - 创建请求 - 注意: - true:表示发送异步请求(当Ajax对象发送请求时,用户仍然可以对当前页面做其它的操作) - false:表示发送同步

【AJAX】AJAX技术详细解析以及实例

转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自[大学之旅_谙忆的博客] Ajax技术介绍: 全称: Asynchronized(异步) Javascript And Xml 技术组成有: Javascript.DOM.CSS 和 XMLHttpRequest AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载

[IBM]掌握Ajax,Ajax中的高级请求和响应

掌握 Ajax, Ajax 中的高级请求和响应 http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro3/ dynaTrace Ajax:前端性能分析利器 http://www.ibm.com/developerwo

struts2的核心和工作原理

在学习struts2之前,首先我们要明白使用struts2的目的是什么?它能给我们带来什么样的好处? 设计目标 Struts设计的第一目标就是使MVC模式应用于web程序设计.在这儿MVC模式的好处就不在提了. 技术优势 Struts2有两方面的技术优势,一是所有的Struts2应用程序都是基于client/server HTTP交换协议,The Java Servlet API揭示了Java Servlet只是Java API的一个很小子集,这样我们可以在业务逻辑部分使用功能强大的Java语言