前端程序员进阶篇——深入理解Ajax

2023-01-22 0 768

AJAX全名“Asynchronous JavaScript and XML”(触发器JavaScript和XML),是指一类建立互动式页面应用领域的页面开发设计。

它无机地包涵了下列三种控制技术:

如前所述web国际标准(standards-based presentation)XHTML+CSS的则表示;

采用 DOM(Document Object Model)展开实时处理及可视化;

采用 XML 和 XSLT 展开统计数据交换及有关操作方式; 采用 XMLHttpRequest 展开触发器统计数据查阅、索引;

采用 JavaScript 将大部份的小东西存取在一同。

Ajax的同时实现业务流程是什么样的?

前端程序员进阶篇——深入理解Ajax
建立XMLHttpRequest对象,也就DOM同时实现局部性创下。

基本上关键步骤:

var xhr =null;//codelet

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

}

xhr.open(“方式”,”地址”,”标志位”);//初始化请求 `请输入代码`

xhr.setRequestHeader(“”,””);//设置http头信息

xhr.onreadystatechange =function(){}//指定回调函数

xhr.send();//发送请求

默认情况下,在发送XHR请求的同时,还会发送下列头部信息

Accept: 浏览器能够处理的内容类型

Accept-Charset: 浏览器能够显示的字符集

Accept-Encoding: 浏览器能够处理的压缩编码

Accept-Language: 浏览器当前设置的语言

Connection: 浏览器与服务器之间连接的类型

Cookie: 当前页面设置的任何Cookie

Host: 发出请求的页面所在的域

User-Agent: 浏览器的用户代理字符串

Referer: 发出请求的页面的URI

1、open()方法的第一个参数用于指定发送请求的方式,这个字符串,不区分大小写,但通常采用大写字母。

“GET”和”POST”是得到广泛支持的”GET”用于常规请求,它适用于当URL完全指定请求资源,当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下。”POST”方法常用于HTML表单。它在请求主体中包涵额外统计数据且这些统计数据常存储到服务器上的统计数据库中。相同URL的重复POST请求从服务器得到的响应可能不同,同时不应该缓存采用这个方法的请求。除了”GET”和”POST”之外,参数还可以是”HEAD”、”OPTIONS”、”PUT”。而由于安全风险的原因,”CONNECT”、”TRACE”、”TRACK”被禁止采用。

2、open()方法的第二个参数是URL,该URL相对于执行代码的当前页面,且只能向同一个域中采用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误。

3、open()方法的第三个参数是则表示是否触发器发送请求的布尔值,如果不填写,默认为true,则表示触发器发送。

4、如果请求一个受密码保护的URL,把用于认证的用户名和密码作为第4和第5个参数传递给open()方法。

send()

  send()方法接收一个参数,即要作为请求主体发送的统计数据。调用send()方法后,请求被分派到服务器。

如果是GET方法,send()方法无参数,或参数为null;如果是POST方法,send()方法的参数为要发送的统计数据。

前端程序员进阶篇——深入理解Ajax

什么是同步请求:(false)

同步请求即是当前发出请求后,浏览器什么都不能做,必须得等到请求完成返回统计数据之后,才会执行后续的代码,相当于是排队,前一个人办理完自己的事务,下一个人才能接着办。也就是说,当JS代码加载到当前AJAX的时候会把页面里大部份的代码停止加载,页面处于一个假死状态,当这个Ajax执行完毕后才会继续运行其他代码页面解除假死状态(即当Ajax返回统计数据后,才执行后面的function)。

什么是触发器请求:(true)

触发器请求就当发出请求的同时,浏览器可以继续做任何事,Ajax发送请求并不会影响页面的加载与用户的操作方式,相当于是在两条线上,各走各的,互不影响。

一般默认值为true,触发器。触发器请求可以完全不影响用户的体验效果,无论请求的时间长或者短,用户都在专心的操作方式页面的其他内容,并不会有等待的感觉。

下面来区别一下同步和触发器有什么不同:

触发器:在触发器模式下,当我们采用Ajax发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了触发器执行方式,大部份包涵Ajax请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。

同步:在同步模式下,当我们采用Ajax发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包涵请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,直到解除阻塞,余下的代码才会继续执行。

前端程序员进阶篇——深入理解Ajax

Ajax的优点:

最大的一点是页面无创下,用户的体验非常好。采用触发器方式与服务器通信,具有更加迅速的响应能力。。可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,Ajax的原则是“按需取统计数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。如前所述国际标准化的并被广泛支持的控制技术,不需要下载插件或者小程序。Ajax可使因特网应用领域程序更小、更快,更友好。

Ajax的缺点:

Ajax不支持浏览器back按钮。安全问题Ajax暴露了与服务器可视化的细节。对搜索引擎的支持比较弱。破坏了程序的异常机制。

分享 IT 控制技术和行业经验,请关注-控制技术学派

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务