社区
下载资源悬赏专区
帖子详情
用法 XMLHttpRequest的用法 ajax同步和异步的区别下载
weixin_39820780
2019-09-19 12:00:52
用法 XMLHttpRequest的用法 ajax同步和异步的区别
相关下载链接:
//download.csdn.net/download/warmsmellofcolitas/9388586?utm_source=bbsseo
...全文
19
回复
打赏
收藏
用法 XMLHttpRequest的用法 ajax同步和异步的区别下载
用法 XMLHttpRequest的用法 ajax同步和异步的区别 相关下载链接://download.csdn.net/download/warmsmellofcolitas/9388586?utm_source=bbsseo
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
用法
XMLHttpRequest
的
用法
ajax
同步
和
异步
的
区别
用法
XMLHttpRequest
的
用法
ajax
同步
和
异步
的
区别
Sy5_
AjAx
.rar
包含:代码 报告 1. 熟悉
Ajax
开发步骤,能够使用
Ajax
进行数据请求; 2. 掌握
XMLHttpRequest
对象的常用方法和属性; 3. 学会使用
Ajax
同步
/
异步
请求文本数据(字符串); 4. 掌握XML的编写规范,能够编写XML文件; 5. 学会使用
Ajax
同步
/
异步
请求XML数据。 6. 掌握JSON的编写规范,能够编写JSON文件; 7. 学会使用
Ajax
异步
请求JSON数据。 1、 实现文本数据的
同步
/
异步
请求; 2、 CD清单 3、 多级联动 4、 JSON数据获取
原生JavaScrpit中
异步
请求
Ajax
实现方法
在前端页面开发的过程中,经常使用到
Ajax
请求,
异步
提交表单数据,或者
异步
刷新页面。 一般来说,使用Jquery中的$.
ajax
,$.post,$.getJSON,非常方便,但是有的时候,我们只因为需要
ajax
功能而引入Jquery比较不划算。 所以接下来便用原生JavaScrpit实现一个简单的
Ajax
请求,并说明
ajax
请求中的跨域访问问题,以及多个
ajax
请求的数据
同步
问题。 JavaScript实现
Ajax
异步
请求 简单的
ajax
请求实现
Ajax
请求的原理是创建一个
XMLHttpRequest
对象,使用这个对象来进行
异步
发送请求,具体实现参考下面代码: function
ajax
(
Web前端
Ajax
&JQuery视频教程课件
本套Java教程涵盖
Ajax
的实现原理,
XMLHttpRequest
实现
Ajax
,回调函数,
Ajax
数据交换格式(HTML、XML、JSON),
Ajax
发送GET和POST请求,
异步
编程模型和
同步
编程模型,解决
Ajax
的GET请求缓存问题,使用
Ajax
验证用户名是否可用、省和城市多级联动等案例。 jQuery是优秀的JavaScript框架,能使用户更方便地处理HTML Documents、events、实现动画效果,并且方便地为网站提供
Ajax
交互。本视频教程循序渐进地对jQuery的各种选择器、函数和方法调用进行了详细的讲解,更结合了大量的案例。
Ajax
课件学习(免费)
1浏览器的
同步
1.1说明 1、这是一个非常典型的浏览器
同步
交互图 2、步骤如下: 1、客户发出HTTP请求 2、服务器接受客户的请求并处理客户的请求 3、服务器相应客户的请求,返回客户所需要的页面 3、缺点: 1、每一次客户提交请求的时候,提交的是整个页面。也就是说不管这个页面的数据量大小,都要经过网络的传输。这样给网络造成了数据的压力。 2、在每次客户提交请求的时候,因为要提交整个数据,所以就要刷心整个页面。这样情况对于用户的交互性来说是很不好的。因为一提交以后用户当前的页面就成了白班,用户所做的事情只能是等待等待再等待。 3、在每次进行提交请求的时候,用户有可能让服务器处理的数据很少,比如163邮件系统的登陆,服务器端实际上只需要用户名和密码就可以了,没有必要把其他数据也传输到服务器上。但是
同步
是做不到这点的。 4、特别是在管理系统中,这些系统对客户界面的友好型要求是比较高的,而
同步
交互是不满足这样的特点的。 2浏览器的
异步
交互 2.1说明 1、这是一个非常典型的浏览器
异步
交互图 2、从图上可以看出来,客户端没有再发送http请求,而是用JavaScript调用一个叫
Ajax
engine来发送数据,所以不用提交整个页面。 3、从返回来看,返回的也不再是客户需要的页面,而是客户需要的数据 4、优点: 1、不用提交整个页面,而是用JavaScript提交具体的数据,这样就使一些没有必要在网络上传输的数据不用传输了。 2、因为只提交数据,所以每天提交请求的数据库不是很大,这样可以减轻网络传输数据的压力。 3、由于不用刷新整个页面,所以即便提交以后,展现在客户面前的页面还是不会消失的,这样对于客户的交互性特别好。 2.2web2.0应用 2.2.1 www.bjbus.com 3
Ajax
3.1
ajax
产生
Ajax
(Asynchronous JavaScript and Xml). 现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做
Ajax
.
AJAX
:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和
XMLHttpRequest
. •服务器端语言:服务器需要具备向浏览器发送特定信息的能力。
Ajax
与服务器端语言无关。 •XML (eXtensible Markup Language,可扩展标记语言) 是一种描述数据的格式。
AJAX
程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML 是其中的一种选择 •XHTML(eXtended Hypertext Markup Language,使用扩展超媒体标记语言)和 CSS(Cascading Style Sheet,级联样式单)标准化呈现; •DOM(Document Object Model,文档对象模型)实现动态显示和交互; •使用XMLHTTP组件
XMLHttpRequest
对象进行
异步
数据读取 •使用JavaScript绑定和处理所有数据 3.2
ajax
的核心
XmlHttpRequest
该对象是对 JavaScript 的一个扩展,可使网页与服务器进行通信。是创建
Ajax
应用的最佳选择。实际上通常把
Ajax
当成
XMLHttpRequest
对象的代名词. 该对象在Internet Explorer 5中首次引入,它是一种支持
异步
请求的技术。简而言之,
XmlHttpRequest
使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
XMLHttpRequest
是XMLHTTP组件的对象,通过这个对象,
AJAX
可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。 3.2.1
XmlHttpRequest
对象的初始化 3.2.2
XmlHttpRequest
对象的方法 3.2.3
XmlHttpRequest
对象的属性 3.2.4发送请求的方法和属性介绍 利用
XmlHttpRequest
让客户端与服务器之间进行通信,包含以下3个关键部分: 1、onreadystatechange事件处理函数 2、open方法 3、send方法 3.2.4.1onreadystatechange方法 1、该事件处理函数由服务器触发,而不是用户触发 2、在
ajax
执行过程中,服务器会通知客户端当前的通信状态。因为在web2.0的应用中,客户端的界面没有刷新,这样你就必须得告诉用户服务器端的各种状态,但是这种情况再web1中不存在,因为在web1中如果能返回页面那就是执行成功了,如果不能返回页面那执行失败。而web2.0的这种情况是靠服务器端更新
XMLHttpRequest
对象的readyState来实现的。改变readyState的属性时服务器端连接客户端的一种操作方式。 3、每次readyState属性的改变都有触发readystatechange事件。 3.2.4.2 open(method,url,asynch) 1、
XmlHttpRequest
对象的open方法允许程序员用一个
ajax
调用向服务器发送请求。 2、method表示请求类型。最常用的有get和post请求。如果不向服务器端发送数据,只是请求服务器端的数据,这个时候可以用get方法。如果要向服务器端发送数据用post方法。 3、在某些情况下,有些浏览器会把多个
XMLHttpRequest
请求的结果缓存到同一个URL。所以应该把能识别这次请求的标示加到URL后面,最常用的就是时间戳的方式。这样做能够保证url的唯一性。从而避免浏览器的缓存结果。 4、url指向服务器的那个地址。 5、asynch表示请求是否要
异步
传输。默认值为true(
异步
)。指定true,在读取后面的脚本之前,不需要等待服务器的相应。指定false,当脚本处理过程经过这点时,会停下来,一直等到
Ajax
请求执行完毕再继续执行。 3.2.4.3send(data) 1、 open 方法定义了
Ajax
请求的一些细节。send 方法可为已经待命的请求发送指令 2、data:将要传递给服务器的字符串。 3、若选用的是 GET 请求,则不会发送任何数据, 给 send 方法传递 null 即可:request.send(null); 4、当向send()方法提供参数时,要确保open()中指定的方法是POST,如果没有数据作为请求体的一部分发送,则使用null. 3.2.4.4setRequestHeader(header,value) 1、当浏览器向服务器请求页面时,它会伴随这个请求发送一组首部信息,这些首部信息是一系列描述请求的元数据。首部信息用来声明一个请求时get还是post. 2、在
ajax
请求中,发送首部信息的工作可以由setRequestHeader完成。 3、参数header:首部的名字 参数value:首部的值 4、如果用post请求向服务器发送数据,需要将”Content-type”的首部设置为”application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合url编码了。
下载资源悬赏专区
12,798
社区成员
12,338,224
社区内容
发帖
与我相关
我的任务
下载资源悬赏专区
CSDN 下载资源悬赏专区
复制链接
扫一扫
分享
社区描述
CSDN 下载资源悬赏专区
其他
技术论坛(原bbs)
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章