ajax技术 前端使用vue和ajax的区别

我是孙鑫，专注于软件开发和IT教育的老师。我出版过很多计算机书籍，包括Ja Web开发详解，VC++详解，Struts 2详解，Servlet/JSP详解，XML详解，XML Schema，XSLT 2.0和XQuery开发，HTML5，CSS和JaScript开发，Vue。

如果你喜欢我的文章，请关注，转发，评论，喜欢，收藏。我会经常和大家分享关于IT技术和编程语言的文章和教学视频。目前《Vue.js从入门到实战》、《Ja无难事》完整教学视频已经发布，《Vue.js 3.0从入门到实战》教学视频正在发布中。

现在学习前端开发的学生很多，很多JaScript库和框架都封装了Ajax调用，但是初学者不知道Ajax的原理，导致学习的时候一知半解。为此，我将之前写的书中的章节发表出来，帮助大家更好地理解和学习前端开发。

Ajax简介

Ajax的全称是异步JaScript和XML，即异步JaScript和XML。Ajax最初是由Adaptive Path公司的顾问杰西·詹姆斯·加勒特(Jesse James Garrett)于2005年2月提出的。Garrett专门写了一篇关于Ajax的文章，Ajax是一种新的Web应用程序方法。感兴趣的读者可以从以下网站看到这篇文章:

http://www . adaptive path . com/ideas/essays/archives/000385 . PHP

加勒特称XHTML和CSS，DOM，XML和XSLT，XMLHttpRequest和JaScript Ajax的综合应用。换句话说，Ajax不是一种技术，而是多种技术的结合，包括:

使用XHTML和CSS呈现数据；

使用DOM实现动态显示和交互；

使用XML和XSLT实现数据交换和操作；

使用XMLHttpRequest发送和接收异步数据；

使用JaScript绑定XHTML、DOM、XML和XMLHttpRequest。

事实上，早在Garrett发表一篇名为Ajax的文章之前，Ajax就已经在一些Web系统中得到应用。Google是最早采用Ajax的公司之一。它已经在一些产品中使用了Ajax，比如Google Suggest、Google Maps和Gmail。正是由于Ajax在这些产品中的成功应用，极大地鼓舞了开发者在Web系统中使用Ajax的信心，使得Ajax得以迅速普及。

Ajax带给用户更好的用户体验。在传统的Web应用程序中，用户向服务器发送请求，然后等待，服务器处理用户的请求，然后返回响应。这是一种同步处理方法。如果服务器处理请求的时间很长，用户就要等很长时间，盯着空白色的浏览器窗口。☺

传统的Web应用模型及其同步传输机制分别如图1和图2所示。

图1 传统的Web应用程序模型图1传统Web应用程序模型

长期以来，我们已经习惯了这种Web交互方式，以为Web就是这样使用的，直到Ajax的出现。

与传统的Web应用不同，Ajax采用异步交互机制，从而避免了用户的请求-等待-响应交互模式的缺点。Ajax应用在用户和服务器之间引入了一个中间层——Ajax引擎，用JaScript编写，运行在一个隐藏的框架中。Ajax引擎负责呈现用户界面，并代表用户与服务器进行交互。Ajax引擎允许用户与服务器端Web程序的交互异步进行，这样用户就不必“呆呆”地看着白色的浏览器窗口和沙漏图标，等待服务器返回响应页面。使用Ajax的Web应用程序模型及其异步传输机制分别如图3和图4所示。

DOMDOM是Document Object Model的缩写，是W3C组织推荐的处理XML的标准接口。2004年4月7日，W3C发布了DOM Level3 Core推荐标准，关于DOM的技术报告可以在http://www.w3.org/DOM/DOMTR.html.上查看

DOM独立于编程语言，W3C组织以IDL(接口定义语言)的形式在DOM中定义接口。为了在编程语言中实现DOM，有必要将DOM接口转换成语言中适当的结构。为了保证不同语言的不同DOM之间的广泛兼容性，W3C在DOM规范的附录中提供了Ja和ECMAScript之间的语言绑定。

DOM中的核心概念是节点。当DOM分析HTML和XML文档时，它映射所有部分(元素、属性、文本、注释等。)将HTML和XML文档组成一个对象，这个对象称为节点。在内存中，这些节点形成一个文档树。整棵树是一个节点，树中的每个节点也是一棵树(子树)。可以说DOM就是这棵树的对象描述，我们通过访问树中的节点来访问HTML和XML文档的内容。

使用DOM，我们不仅可以访问HTML的节点，还可以编辑HTML文档的内容，从而创建动态页面。

例如，一个HTML页面有一个表，表中的代码如示例1所示。

示例1显示图书信息的表格

& lt表& gt& lttbody id = & # 34书体& # 34；& gt& lttr & gt& ltth & gt标题

示例2使用DOM动态提交图书信息

& lt脚本类型= & # 34；文本/JaScript & # 34；& gtvar row = document . createelement(& # 34；tr & # 34);cell = createCellWithText(& # 34；《Vue.js 3.0从入门到精通》& # 34；);//将单元格作为子节点添加到

XMLHttpRequest

XMLHttpRequest对象是整个Ajax技术的核心，也正是因为有了这个对象，异步交互才成为可能。XMLHttpRequest最初是作为ActiveX组件在IE 5中实现的。它可以直接向服务器传输数据，而无需从页面发送请求，也可以直接从服务器接收响应，而无需刷新页面。

IE将XMLHttpRequest实现为ActiveX对象，而其他浏览器(Firefox、Safari和Opera)将其实现为本地JaScript对象。因此，为了兼容不同的浏览器，您需要创建XMLHttpRequest对象，如示例3所示。

示例3如何创建与不同浏览器兼容的XMLHttpRequest对象

var xmlHttp函数createXMLHttpRequest(){ if(window。ActiveX object){ xmlHttp = new ActiveX object(& # 34；微软。XMLHTTP & # 34);}else if(窗口。XMLHttpRequest){ xmlHttp = new XMLHttpRequest()；}}XMLHttpRequest的方法如表1所示。

表1 XMLHttpRequest的方法

平方方法

说清楚

中止()

终止当前请求

getAllResponseHeaders()

以字符串形式返回所有响应头。

getResponseHeader(字符串头)

获取指定响应标头的值。

open(字符串方法，字符串uri)

建立对服务器的呼叫。方法参数可以是GET、POST或HEAD。url参数可以是相对URL或绝对URL。该方法还有三个可选参数。

发送(内容)

向服务器发送请求

setRequestHeader(字符串头，字符串值)

设置请求的标题信息。在设置任何头之前，必须调用open()方法。

XMLHttpRequest的属性如表2所示。

表2 xmlhttprequest的属性

种

说清楚

onreadystatechange

这个事件处理程序在每次状态改变时被触发，通常是一个JaScript函数。

就绪状态

请求的状态。有五种可能的值:0(未初始化)、1(请求已建立，但尚未发送)、2(请求已发送，但尚未接收)、3(正在接收，通常响应中的部分数据可用，但未完全接收)、4(响应已完成)。

响应文本

服务器的响应，以文本内容表示。

responseXML

服务器的响应，用XML表示。这个对象可以被解析成一个DOM对象。

状态

服务器的HTTP状态码，比如200对应OK，404对应找不到等。该属性仅在readyState值为3或4时可用。

状态文本

HTTP状态代码的描述文本，如OK、Not Found等。该属性仅在readyState值为3或4时可用。

状态文本

HTTP状态代码的描述文本，如OK、Not Found等。该属性仅在readyState值为3或4时可用。

让我们看一个使用XMLHttpRequest发送请求和接收响应的例子。代码如示例4所示。

示例4使用XMLHttpRequest发送请求和接收响应的示例

var xmlHttp如果(窗口。ActiveX object){ xmlHttp = new ActiveX object(& # 34；微软。XMLHTTP & # 34);}else if(窗口。XMLHttpRequest){ xmlHttp = new XMLHttpRequest()；} var email = document . getelementbyid(& # 34；电子邮件& # 34；);var url =验证？电子邮件= & # 34；+escape(email . value)；xmlhttp . open(& # 34；获取& # 34；，网址)；xmlhttp . onreadystatechange = handleStateChange；xmlhttp . send(null)；//处理服务器响应的回调函数函数Handle State Change {//判断响应是否完成if(xmlHttp.readyState == 4) {//判断响应是否成功if(xmlhttp . status = = 200){ alert(xmlhttp . responsetext)；} } } XMLHttpRequest Level 2 XMLHttpRequest API使得Ajax技术的实现成为可能。作为XMLHttpRequest的改进版本，XMLHttpRequest Level 2在功能上有了很大的提升，主要包括:

跨源XMLHttpRequest进度事件（Progress event）

跨源HTTP请求包括一个Origin头，它为服务器提供HTTP请求的源信息。标题受浏览器保护，不能被应用程序代码更改。

跨源XMLHttpRequest可用于构建基于非同源服务的Web应用程序。

1.添加新事件

事件名称

解释

负载启动

当请求开始时

进步

在发送和加载数据期间

流产

请求已被终止。比如调用abort()方法。

错误

当请求失败时

负荷

当请求成功完成时

超时

请求完成前指定的超时值已达到。

负载端

当请求完成时(无论成功还是失败)

2.检查浏览器对XMLHttpRequest2的支持。

var xhr = new XMLHttpRequest()；如果(xhr的类型。with credentials = = undefined){//您的浏览器不支持跨源XMLHttpRequest}3。例子

<!DOCTYPE html><html><head><meta charset="GBK"><title>跨源上传</title><script> var xmlHttp; function checkSupport(){ xmlHttp = window.XDomainRequest ? new XDomainRequest : new XMLHttpRequest; if(typeof xmlHttp.withCredentials == undefined){ alert("您的浏览器不支持跨源的XMLHttpReqeust"); } } checkSupport(); function upload(){ xmlHttp.onprogress = function(e){ var radio = e.loaded / e.total; displayProgress(radio + "% 上传"); } xmlHttp.onload = function(e){ displayProgress(xmlHttp.responseText); } xmlHttp.onerror = function(e){ displayProgress("出错了"); } var targetLocation = "http://example.com:8080/upload.jsp"; var data = document.getElementById("data").value; xmlHttp.open("POST", targetLocation, true); xmlHttp.send(data); } function displayProgress(info){ document.getElementById("state").innerHTML = info; }</script></head><body><p>上传消息：<input type="text" id="data" placeholder="输入要上传的数据"><button id="sendButton" onclick="upload();">发送数据</button></p><p>状态：<span id="state">准备</span></p></body></html>