精选文章 AJAX产生的原因、请求的五个步骤及优缺点

AJAX产生的原因、请求的五个步骤及优缺点

作者:DOM曼珠沙华 时间: 2020-04-18 11:24:25
DOM曼珠沙华 2020-04-18 11:24:25

AJAX产生

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。这一技术能够向服务器请求额外的数据据而无须卸载页面,会带来更好的用户体验。

使用AJAX的原因:

如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit”按钮,表单开始提交,浏览器就会刷新页面,然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因,就会得到一个404页面。

这就是Web的运作原理:一次HTTP请求对应一个页面。

如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。

 

     AJAX的核心技术是XMLHttpRequest对象(简称XHR),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口,即可以使用XHR对象取得新数据,然后通过DOM将新数据插入到页面中。虽然名字中包含XML成分,但AJAX通讯与数据格式无关:这种技术就是无须刷新页面即可从服务器取得数据,但不一定是XML数据。

AJAX请求的五个步骤

AJAX主要依赖XMLHttpRequest对象。

Ajax执行流程的五个步骤:

  1. 创建并获取xmlhttprequest对象
  2. 使用onreadystatechange属性设置对象状态改变的时候要调用的函数
  3. 使用open方法对xmlhttprequest对象进行设置
  4. 使用send方法发送请求
  5. 客户端接收来自于服务器端的响应,然后处理响应 

下面代码是对这个流程的实现过程:

下方的是原生代码:

function createXHR() {
	var xhr = null;
	if(window.XMLHttpRequest) {
		xhr = new XMLHttpRequest(); //主流浏览器均支持;
	}
	else if(window.ActiveXObject) {
		try {
			//IE6+
			xhr = new ActiveXObject('Msxml2.XMLHttp'); //不支持则会报一个异常,catch捕获
		} catch(e) {
			xhr = new ActiveXObject('Microsoft.XMLHttp');
		   }
    }
	return xhr;
}
function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

// 1. 新建XMLHttpRequest对象
//var request = new XMLHttpRequest(); 
//另一种创建方式,兼容
var request = createXHR();
 
// 2. 事件监听状态变化
request.onreadystatechange = function () { // 状态发生变化时,函数被回调
	// 5. 客户端接收来自于服务器端的响应,然后处理响应
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status >= 200 && request.status < 300 || request.status == 304) {
            // 成功,通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败,根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 3. 设置请求方式及url
request.open('GET', '/api/categories');
// 4. 发送请求
request.send();

alert('请求已发送,请等待响应...');

request.abort();

低版本的浏览器为ActiveXObject对象。

通过检测window对象是否有XMLHttpRequest属性来确定浏览器是否支持标准的XMLHttpRequest

当创建了XMLHttpRequest对象后,要先设置onreadystatechange的回调函数。在回调函数中,通常我们只需通过readyState === 4判断请求是否完成,如果已完成,再根据status === 200判断是否是一个成功的响应。

对上面五个步骤的分步解析

open()

request.open('GET', '/api/categories', true);

XMLHttpRequest对象的open()方法有3个参数,第一个参数指定是GET还是POST,第二个参数指定URL地址,第三个参数指定是否使用异步,默认是true,可以不用写。

需要说明的是:一是URL相对于执行代码的当前页面(当然也可以是绝对路径);二是调用open()方法并不会真正发送请求,而是启动一个请求,以备发送。

注意,千万不要把第三个参数指定为false,否则浏览器将停止响应,直到AJAX请求完成。如果这个请求耗时10秒,那么10秒内你会发现浏览器处于“假死”状态。

send()

调用send()方法才真正发送请求GET请求不需要参数,POST请求需要把body部分以字符串或者FormData对象传进去。

URL

只能向同一个域中使用相同的端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误。

上面代码的URL使用的是相对路径。如果你把它改为'http://www.sina.com.cn/',再运行,肯定报错。在Chrome的控制台里,还可以看到错误信息。

这是因为浏览器的同源策略导致的。默认情况下,JavaScript在发送AJAX请求时,URL的域名必须和当前页面完全一致。

完全一致的意思是,域名要相同(www.example.comexample.com不同),协议要相同(httphttps不同),端口号要相同(默认是:80端口,它和:8080就不同)。有的浏览器口子松一点,允许端口不同,大多数浏览器都会严格遵守这个限制。

这里就涉及到跨域请求。

这里需要有一个跨域的blog

 

响应处理

在收到响应后,响应的数据会自动填充XHR对象的属性,相关的属性简介如下:

  • responseText:作为响应主体被返回的文本。
  • responseXML:如果响应的内容类型为是"text/xml"或"application/xml",这个属性中将保存包含着响应数据的XMLDOM文档。
  • status:响应的HTTP状态。
  • statusText:HTTP状态的说明。

在收到响应后,第一步检查status属性,以确定响应已经成功返回。一般来说,可以将HTTP状态码为200作为成功的标志。此时,responseText属性的内容已经准备就绪,而且在内容类型正确的情况下,responseXML也应该可以访问了。此时,状态码为304表示请求的资源没有被修改,可以直接使用浏览器缓存的版本,当然,也意味着响应是有效的。为了确保收到适当的响应,应该像上述实例检查状态码:

if (request.status >= 200 && request.status < 300 || request.status == 304) {
	// 成功,通过responseText拿到响应的文本:
	return success(request.responseText);
} else {
	// 失败,根据响应码判断失败原因:
	return fail(request.status);
}

readyState属性

Ajax请求的时候一般采用异步请求,才能让Javascript执行,不必等待。可以检测XHR对象的readyState属性,该属性表示请求响应过程的当前活动阶段。这个属性可取的值:

  • 0:未初始化。尚未调用open()方法。
  • 1:启动。已经调用open()方法,但未调用send()方法。
  • 2:发送。已经调用send()方法,但尚未接收到响应。
  • 3:接收。已经接收到部分请求数据。
  • 4:完成。已经接收到全部响应数据,而且已经可以在客户端使用。

只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readystate的值。通常,我们只对readyState为4的阶段感兴趣,因为这时所有的数据都已经就绪。

不过必须调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

在接收响应之前还可以调用 abort() 方法来取消异步请求,如下:

request.abort();

调用这个方法之后,XHR对象会停止触发事件,而且不再允许访问任何与响应相关的对象属性,在终止请求后,还应该对XHR对象进行解引用操作。由于内存问题,不建议重用XHR。

JQuery实现Ajax

在使用前需要引入jquery.js文件,下面的是简单的过程:

$.ajax({
	url:urlRequestAdd,
	type:"get",
	dataType:"json",
	success:function(getCode){
		if(getCode== "success"){
			alert("验证码发送成功");
		}
	},
	error:function(getCode){
		alert("验证码发送失败");
	}
});

 

AJAX的优点

(1)无刷新更新数据。

AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。
(2)异步与服务器通信。

AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。

(3)前端和后端负载平衡。

AJAX可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能。
(4)基于标准被广泛支持。

AJAX 基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。

(5)界面与应用分离。

Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

AJAX的缺点

(1)AJAX干掉了Back和History功能,即对浏览器机制的破坏。

大部分都使用URL片断标识符(通常被称为锚点,即URL中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应 用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论。
(2)AJAX的安全问题。

AJAX 技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比 以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知 的安全弱点,诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
(3)对搜索引擎支持较弱。

对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能。
(4)破坏程序的异常处理机制。

给调试带来了很大的困难。
(5)违背URL和资源定位的初衷。
例如,我给你一个URL地址,如果采用了Ajax技术,也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
(6)AJAX不能很好支持移动设备。

一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax。
(7)客户端过肥,太多客户端代码造成开发上的成本。

编写复杂、容易出错;冗余代码比较多(层层包含js文件是AJAX的通病,再加上以往的很多服务端代码现在放到了客户端);破坏了Web的原有标准。

 

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:php反序列化漏洞

下一篇:CommonServiceLocator/Microsoft.Practices.ServiceLocation的变化过程

您可能感兴趣

  • 「鹿班智能设计平台」是如何工作的

    目录 商业设计大脑的三大挑战 可控的视觉生成过程 机器如何学习设计 组成一,设计框架。 组成二,元素中心。 组成三,行动器。 组成四,评估网络。 视觉设计的四个层次 最基础的:临摹拓展。 第二层:场景表达。 第三层:创意洞见。 最后一层:创造趋势。 商业设计大脑的三大挑战 在开始做事情之前,我们遇到了三个比较严峻的挑战。 第一个挑战,缺少标注数据。今天所有的人工智能都基于大量的结构化标注数据...

  • 计算机必备专用英语词汇

    非常好的单词整理,转载一下当作笔记 1.单词说明:   command n. 命令,指令 [kə'mɑ:nd]   单词拼写 名词 单词含义 音标(发音)   提示:着重记忆单词对应的意思,有能力最好词性也记忆。 2.词性说明: n v vi vt conj prep pron adj adv 名词 动词 非及物动词 及物动词 连词 介词 代词 形容词 副词 3.单词列表: 1.file,n...

  • JAVA面试(全)

    Java 八大基本数据类型 八大基本类型 Byte,short,long,int,double,float,boolean,char 占用大小及其长度 数据类型 空间(字节B) 取值范围 byte 1 -2^7 ~ 2^7-1 short 2 -2^15~ 2^15-1 char 2 0 ~ 2^16-1 char无需符号位 int 4 -2^31 ~ 2^31-1 float 4 -2^3...

  • 新职业教育的三节课,凭什么做到今天这样

    历时7天、翻遍15个平台渠道、访谈25位参与课程的从业者、挖掘了136条推文的标题和内容,我们得到了12500字的拆解。可以点击右上角☝:收藏、分享、在看,不用担心看一半,找不到文章。 本文信息公开来源:三节课官方公众号、虎嗅网、36氪、深网、东方财富网、新榜、知乎、简书、增长黑盒、短书··· 我们认为,这可能比任何官方复盘更能诠释:「三节课」是如何在3年内,做到互联网职业教育(Almost...

  • 如何28天完成等级保护测评全流程?

    目前数字经济建设浪潮一浪高过一浪,与此同时我国的网络安全法也逐渐得到普及,支撑网络安全法的网络安全等级保护相关标准规范也不断更新和完善。 落实网络安全等级保护制度是网络运营者(指网络的所有者、管理者和网络服务提供者)的责任与义务。通常情况,无论是在建或已运行的系统,完成一次等级保护测评的全流程需要2-3个月时间,有的需要半年甚至超过1年的也不在少数。 以北京为例,等级保护备案阶段:申请与受理...

  • 《重新定义公司》读书笔记

    激励偏向的是事成之后的利益分享,而赋能强调的,是激起创意人的兴趣与动力,给予挑战。唯有发自内心的志趣,才能激发持续的创造,命令则不适用于他们。因此,组织的职能不再是分派任务和监工,而更多的是让员工的专长、兴趣和客户的问题有更好的匹配,这往往要求更多的员工自主性、更高的流动性和更灵活的组织。我们甚至可以说,是员工使用了组织的公共服务,而不是公司雇用了员工。两者的根本关系发生了颠倒。 年少时,第...

  • 江苏谋定特色小镇-农业大健康·万祥军:旅游理念经营产业

    江苏谋定特色小镇-农业大健康·万祥军:旅游理念经营产业 新闻中国采编网 中国新闻采编网 谋定研究中国智库网 经信研究 国研智库 国情讲坛 哲商对话 万赢信采编 :“希望各地会后抓紧时间对培育建设对象进行梳理,根据标准推荐重点对象,有计划、有步骤地组织实施,努力打造富有鲜明个性、成效显著的特色旅游小镇。”特色旅游小镇培育工作座谈会江苏省旅游局局领导詹庚庆表示,江苏省计划通过“十三五”的努力,加...

  • Hasor Dataway使用教程

    绝了!这款工具让SpringBoot不再需要Controller、Service、DAO、Mapper! 来自:开源中国,作者:哈库纳 链接:https://my.oschina.net/ta8210/blog/3234639 Dataway介绍 Dataway 是基于 DataQL 服务聚合能力,为应用提供的一个接口配置工具,使得使用者无需开发任何代码就配置一个满足需求的接口。整个接口配置...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。