AJAX的核心技术解析

最新推荐文章于 2023-10-10 15:41:34 发布
最新推荐文章于 2023-10-10 15:41:34 发布
阅读量748 收藏
点赞数
文章标签： ajax xmlhttprequest javascript 服务器 asynchronous 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aini5682/article/details/6331979
版权

ajax的核心技术解析

      读音：e:j^ks 。AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。Ajax：一种不用刷新整个页便可与服务器通讯的办法
    
Ajax的技术的产生
     Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.“Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。而 Ajax 这项技术，是 Google 在Google Labs发布Google Maps和Google Suggest后真正为人所认识。

 

同步交互和异步交互
举个例子：普通B/S模式(同步)       AJAX技术(异步)
    同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
    异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕
    同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。 
    异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式 
     
    易懂的理解:
    异步传输:   你传输吧，我去做我的事了，传输完了告诉我一声  
    同步传输:   你现在传输，我要亲眼看你传输完成，才去做别的事


不用刷新整个页面便可与服务器通讯的办法：
1、Flash
2、Java applet
3、框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面
隐藏的iframe
4、XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词

 

Ajax的工作原理

Ajax的核心是JavaScript对象XmlHttpRequest。
1、该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
2、AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
3、用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用JavaScript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
4、AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。 
5、使用AJAX，可以为JSP、开发人员、终端用户带来可见的便捷


Ajax工具包

Ajax并不是一项新技术，它实际上是几种技术，每种技术各尽其职，以一种全新的方式聚合在一起
服务器端语言：服务器需要具备向浏览器发送特定信息的能力。Ajax与服务器端语言无关。
1、XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。Aajx 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择
2、XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现；
3、DOM（Document Object Model,文档对象模型）实现动态显示和交互；
4、使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
5、使用JavaScript绑定和处理所有数据


AJAX的缺陷

AJAX不是完美的技术。也存在缺陷：
1    AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。 
2   AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。 
3    对流媒体的支持没有FLASH、Java Applet好。 
4    一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax。

aini5682
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX应用中必须要掌握的重点知识(分享)
12-10
AJAX是什么? 是Asynchronous Javascript And XML的首字母的缩写， 它不是一门的新的语言，而是对现有技术的综合利用。 其本质是在HTTP协议的基础上以异步的方式与服务器进行通信。 异步的概念? 指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。 异步的作用? 其优势在于不阻塞程序的执行，从而提升整体执行效率。 AJAX的核心? XMLHTTPRequest，简写XHR，Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局
jQuery_Ajax_实例_全解析(原作者版)
09-18
快速把握jQuery_Ajax核心技术，成为软件开发达人！
Ajax定义浅要剖析
01-08
首先我们来看一看Ajax的定义： Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。   个人理解： 触发某个事件->向服务端发起请求->返回响应（数据）->局部更新 在一般的通讯方式当中，我们是通过在浏览器地址栏输入相关链接，完成客户端与服务器的通讯。 输入网址->请求一个网页->返回相关资源文件->浏览器解析资源文件，完成页面渲染。 假设，目前我们在浏览器上看到的页面，某些按钮（事件），是绑定了Ajax请求的。   Ajax的核心： XMLHttpRequest 对象 初始化XMLHttpRequest对象–>创建对象实例（通过该对象发送请求） open()方法指定载入
Ajax的概述与实现过程
11-27
一、ajax概述 1、Ajax是Asynchronous（[ə’sɪŋkrənəs） JavaScript XML的简写，不是一门新技术，而是对现有技术的综合利用。这一技术能够向服务器请求额外数据而无需刷新页面，带来了更好的用户体验 2、Ajax技术的核心是XMLHttpRequest对象（简称XHR），这是由微软首先引入的一个特性。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。 3、XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多的信息，意味着用户单击后，可以不必刷新页面也能获取新数据。也就是说可
PHP培训教程之AJAX技术.docx
12-25
1、AJAX初步认识 AJAX的全称AsynchronousJavaScriptAndXML. AJAX2005年由Google发起并流行起来的编程方法，AJAX不一个新的编程语言，但它一个使用已有标准的新的编程技术。一种创建交互式网页应用的网页发技术。 使用AJAX可以创建更好，更快，更用户界面友好的Web应用。 AJAX技术基于Javascript和HTTPRequest. Ajax包含下列技术： 基于web标准（standards-basedpresentation）XHTML+CSS的表示； 使用DOM（DocumentObjectModel）进行动态显示及交互； 使用XML和XSLT进行数据交换及相关操作； 使用XMLHttpRequest进行异步数据查询、检索； 使用JavaScript将所有的东西绑定在。 2、使用Ajax的好处 1、通过异步模式，提升了用户体验 2、优化了浏览器和器之间的传输，减少不必要的数据往返，减少了带宽占用 3、Ajax引擎在客户端运行，承担了一部分本来由器承担的工作，从而减少了用户量下的器负载。 3、AJAX的特 Ajax可以实现动态不刷新（局部刷新） 就能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上那些没有改变过的信息。 4、XMLhttprequest对象。 Ajax的核心JavaScript对象XmlHttpRequest。该对象在InternetExplorer5中首次引入，它一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web发人员可以在页面加载以后进行页面的局部更新。 5、AJAX技术体系的组成部分有哪些？ HTML，css，dom，xml，xmlHttpRequest，javascript 6、AJAX应用和传统Web应用有什么不同。 在传统的Javascript编程中，如果想得到器端数据库或文件上的信息，或者客户端信息到器，需要建立一个HTMLform然后GET或者POST数据到器端。用户需要击"Submit"按钮来或者接受数据信息，然后等待器响应请求，页面重新加载。 因为器每次都会返回一个新的页面，所以传统的web应用有可能很慢而且用户交互不友好。 PHP培训教程之AJAX技术全文共3页，当前为第1页。使用AJAX技术，就可以使Javascript通过XMLHttpRequest对象直接与器进行交互。 PHP培训教程之AJAX技术全文共3页，当前为第1页。 通过HTTPRequest，一个web页面可以一个请求到web器并且接受web器返回的信息(不用重新加载页面)，展示给用户的还通一个页面，用户感觉页面刷新，也看不到到Javascript后台进行的请求和接受响应。 7、AJAX请求总共有多少种CALLBACK Ajax请求总共有八种Callback onSuccess onFailure onUninitialized onLoading onLoaded onInteractive onComplete onException 8.Ajax和javascript的区别 javascript一种在浏览器端执行的脚本语言，Ajax一种创建交互式网页应用的发技术，它利用了一系列相关的技术其中就包括javascript。 Javascript由网景发的一种脚本语言，它和sun的java语言没有任何关系的，它们相似的名称只一种行销策略。 在一般的web发中，javascript在浏览器端执行的，们可以用javascript控制浏览器的行为和内容。 9、在Ajax应用中信息如何在浏览器和器之间传递的 通过XML数据或者字符串 10、在浏览器端如何得到器端响应的XML数据。 XMLHttpRequest对象的responseXMl属性 12、XMLHttpRequest对象在IE和Firefox中创建的不同 有，IE中通过newActiveXObject()得到，Firefox中通过newXMLHttpRequest()得到10、介绍一下XMLHttpRequest对象的常用方法和属性。 open("method","URL")建立对器的调用，个参数HTTP请求可以为GET，POST或任何器所支持的您想调用的。 第二个参数请求页面的URL。 send()方法，具体请求 abort()方法，停止当前请求！ readyState属性请求的状态有5个可取值0=未初始化，1=正在加载，2=以加载，3=交互中，4=完成 responseText属性器的响应，表示为一个串 reponseXML属性器的响应，表示为XML
AJAX技术汇总
bailutuo7403的博客
09-17 159
来源：维基百科 CSDN蓝色理想 ---------------------------------------------------------------------AJAXAJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几...
ajax的核心技术解析
年轻就是资本，加油小飞！
04-18 237
 ajax的核心技术解析      读音：e:j^ks 。AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。Ajax：一种不用刷新整个页便可与服务器通讯的办法    Ajax的技术的产生     Ajax被认为是(As...
Ajax的核心
胡小胖爱生活的专栏
10-14 1473
Ajax的核心  Ajax的简介是当前web技术火的一门新兴技术，一些大型网站都号称提供对Ajax的支持。其实质，Ajax并不是一种技术，他是由几种蓬勃发展的技术以新的强大方式组合起来的，它使浏览器可以为用户提供更为自然的浏览体验。  一、什么是Ajax:1.在学习任何一种新知识时，首先最需要决绝的问题就是：他是什么，他是怎么样的。2005年2月，Adaptive Path
Ajax是什么以及Ajax交互原理（详，图文并茂，原理篇）
weixin_53353693的博客
01-08 5355
本博，以图文并茂的方式，详细讲解了Ajax技术是什么，以及他的传输原理
使用XMLHttpRequest进行浏览器和服务器的交互
andrewleeeeee的专栏
10-30 2230
注意： 1.使用javascript发出HTTP请求时，需要用到XMLHttpRequest对象 2.HTTP相应包括一个相应码，指示是否有错误，request.status == 200 为正常 3.应用中无需重新加载页面，即所谓的AJAX 4.注意XMLHttpRequest的兼容性，1.0和2.0版本都要兼顾，ie8以下只支持1.0，所以使用时要注意， 使用request.onre
Ajax和跨域问题深入解析
01-19
什么是ajax Ajax(Asynchronous JavaScript and XML),是一种可以向服务器请求额外的数据并且无需刷新页面的技术,ajax的出现带来了更好的用户体验. Ajax的核心就是XMLHttpRequest(XHR)对象.XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.可以使用XHR对象获取新数据,通过DOM将新数据插入到页面.虽然名字中包含XML,但是ajax通信和数据格式无关;这种技术就是可以不用刷新就从服务器获取数据,但是不一定是XML数据,也可以是json. XMLHttpRequest对象 XHR的用法 1.创建一个XMLHttpReques
ajax核心技术讲解
08-12
Ajax最核心的技术，所有Ajax实现的效果都是运用这种核心技术做成的。
JS 实现 ajax 异步浏览器兼容问题
10-20
本文通过实例代码给大家讲解了js实现ajax异步浏览器兼容问题，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
JS第五周知识点总结
qq_44930306的博客
08-07 390
本文总结了PHP、Cookie、Ajax、Promise相关的基础知识点，希望大家可以互相学习！
面试题/经验积累
最新发布
Yilia.C 's Blog
10-10 4286
es6 以前，都是用 var 关键字来标识，这样有个变量提升的坑。在 es6 中，添加了 let 和 const 两个关键字，let 定义变量，const 定义常量，并且添加了块级作用域。ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。const声明一个只读的常量。当使用 @import 导入 CSS 时，会导致某些页面在 IE 出现奇怪的现象： 没有样式的页面内容显示瞬间闪烁，这种现象称为“文档样式短暂失效”，简称为FOUC。产生原因。
XMLHttpRequest对象工作流程
LIUHONGLIAN
06-26 1793
    1. XMLHttpRequest用于在后台与服务器交换数据，是AJAX之所以能对网页进行局部刷新的核心,同时Ajax技术离开了XMLHttpRequest对象将失去与服务器异步通信的能力。     2. XMLHttpRequest对象是通过JavaScript创建的，代码如下： var xmlhttp=null; if(window.XMLHttpRequest) { //...
与服务器进行数据交互的方法——ajax，axios,fetch
热门推荐
weixin_52703987的博客
03-08 2万+
与服务器进行数据交互的方法——ajax，axios,fetch 一，与服务器交互的类型 同步交互： 理解1：同步是阻塞模式，同步交互时，两个线程的运行是相关的，a线程在运行时，b线程要阻塞等待，直到a线程运行完毕 理解2：同步交互时，客户端发出请求后，需要等待服务器相应结束以后，才能发出第二个请求。 例：再做用户登录功能时，必须检测用户名密码都正确以后才能进入系统。 异步交互： 理解1：异步是非阻塞模式，异步交互时，两个线程的运行不相关，a线程运行时，b线程也正常运行。 理解2：异步交互时，客户端发出请求后
ajax技术的实质是什么意思,什么是Ajax？Ajax的原理是什么？Ajax的核心技术是什么？Ajax的优缺点是什么？...
weixin_42360953的博客
08-05 339
Ajax是一种无需重新加载整个网页，能够更新部分网页的技术。Asynchronous JavaScript and XML的缩写，是JavaScript、XML、CSS、DOM等多个技术的组合。Ajax工作原理是一个页面的指定位置可以加载另一个页面所有的输出内容，这样就实现了一个静态页面也能获取到数据库中的返回数据信息了。所以Ajax实现了一个静态网页在不刷新整个页面的情况下与服务器通信，减少了用...
使用XMLHttpRequest（XHR）对象与服务器交互
Amelian的博客
12-09 600
说明： 使用XMLHttpRequest（XML）对象可以与服务器进行交互，你可以从URL获取数据，而无需让整个页面刷新。这允许网页在不影响用户的操作下更新页面的局部能容，在AJAX编程中，XMLHttpRequest被大量的使用； XMLHttpRequest----->XMLHttpRequestEventTarget------->EventTarget 一般http请求与ajax请求的区别 1.ajax请求时一种特殊的htt请求 2.对服务器来说，没有任何区别，区别在浏览器端 3.浏览器
评论区点赞功能用ajax怎么实现，有2层循环
08-23
### 回答1： 实现评论区点赞功能，可以使用AJAX实现异步请求。具体实现步骤如下： 1. 在页面上为点赞按钮添加一个点击事件，并且在事件处理程序中使用AJAX发送异步请求： ``` $('.like-btn').click(function() { var commentId = $(this).data('comment-id'); $.ajax({ url: '/like-comment', type: 'POST', data: { commentId: commentId }, success: function(res) { // 更新点赞数 $('.like-count[data-comment-id="' + commentId + '"]').text(res.likes); }, error: function(err) { console.error(err); } }); }); ``` 2. 服务器接收到请求后，查询数据库并更新评论的点赞数，然后将更新后的点赞数返回给客户端： ``` app.post('/like-comment', function(req, res) { var commentId = req.body.commentId; // 查询数据库并更新点赞数 var likes = 100; // 假设查询到的点赞数为100 res.json({ likes: likes }); }); ``` 由于评论区可能会有多个评论，因此需要使用两层循环来遍历所有的评论和点赞按钮。示例代码如下： ``` <!-- 评论列表 --> <ul class="comment-list"> <!-- 第一条评论 --> <li> <div class="comment-body"> <p>这是第一条评论</p> <div> <!-- 点赞按钮 --> <button class="like-btn" data-comment-id="1">点赞</button> <!-- 点赞数 --> <span class="like-count" data-comment-id="1">100</span> </div> </div> <!-- 第一条评论的回复列表 --> <ul class="comment-reply-list"> <!-- 第一条回复 --> <li> <div class="comment-body"> <p>这是第一条回复</p> <div> <!-- 点赞按钮 --> <button class="like-btn" data-comment-id="2">点赞</button> <!-- 点赞数 --> <span class="like-count" data-comment-id="2">50</span> </div> </div> </li> <!-- 第二条回复 --> <li> <div class="comment-body"> <p>这是第二条回复</p> <div> <!-- 点赞按钮 --> <button class="like-btn" data-comment-id="3">点赞</button> <!-- 点赞数 --> <span class="like-count" data-comment-id="3">20</span> </div> </div> </li> </ul> </li> <!-- 第二条评论 --> <li> <div class="comment-body"> <p>这是第二条评论</p> <div> <!-- 点赞按钮 --> <button class="like-btn" data-comment-id="4">点赞</button> <!-- 点赞数 --> <span class="like-count" data-comment-id="4">10</span> </div> </div> </li> </ul> <script> // 遍历所有的点赞按钮 $('.like-btn').each(function() { // 为每个点赞按钮添加点击事件 $(this).click(function() { var commentId = $(this).data('comment-id'); $.ajax({ url: '/like-comment', type: 'POST', data: { commentId: commentId }, success: function(res) { // 更新点赞数 $('.like-count[data-comment-id="' + commentId + '"]').text(res.likes); }, error: function(err) { console.error(err); } }); }); }); </script> ``` 这样就可以实现评论区点赞功能，并且支持多个评论和回复。 ### 回答2： 评论区点赞功能使用Ajax实现，需要进行二层循环。 首先，需要在页面上展示评论列表，每个评论条目都需要包含一个点赞按钮。当用户点击点赞按钮时，会发起Ajax请求。 第一层循环是遍历所有评论条目，为每个点赞按钮绑定点击事件。当点击点赞按钮时，触发点击事件。 点击事件中，将获取到当前点击的评论的唯一标识（比如评论的ID），作为参数传递给Ajax请求。 接下来，发起Ajax请求，将评论的唯一标识作为参数传递给后端。后端根据评论的唯一标识，对该评论的点赞数进行更新操作。 在Ajax的success回调函数中，更新该评论条目的点赞数，在页面上展示点赞数的变化。 第二层循环是循环遍历返回的评论数据，为每个评论条目的点赞按钮赋予正确的点赞数和状态。根据后端返回的数据，判断当前用户是否已经点赞了该评论，如果已经点赞，则将点赞按钮样式修改为已点赞状态。 通过以上两层循环，实现了评论区点赞功能。用户可以点击点赞按钮对评论进行点赞，通过Ajax请求将点赞信息传递给后端进行处理，并及时更新页面上的点赞数及状态。 ### 回答3： 评论区点赞功能可以使用Ajax来实现。Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下与服务器进行数据交互的技术，通过它可以实现网页的异步更新。 针对评论区点赞功能，可以通过以下步骤来使用Ajax实现： 1. 在页面中，为每个评论的点赞按钮添加一个点击事件。 2. 当用户点击点赞按钮时，通过Ajax向服务器发送请求，告知服务器用户的点赞行为。 3. 服务器接收到请求后，将用户的点赞记录更新到数据库中。可以使用2层循环遍历评论区的所有评论，找到用户点赞的评论。 4. 服务器处理完成后，返回一个响应给前端，告知点赞行为是否成功。 5. 前端接收到服务器的响应后，根据响应结果更新页面显示。可以通过修改点赞按钮的样式，比如改变按钮的颜色或样式，来表示点赞已成功。 需要注意的是，为了避免页面频繁请求服务器，在用户点击点赞按钮后可以将按钮设置为不可点击状态，等待服务器的响应返回后再将按钮设置为可点击状态。 此外，为了提高性能可以使用2层循环来遍历评论区的评论，第一层循环用于遍历每一个评论，第二层循环用于判断当前评论是否是用户点赞的评论。这样可以减少数据库的查询次数，提高效率。 总结而言，使用Ajax可以实现评论区点赞功能，通过向服务器发送请求和接收响应来实现点赞记录的更新和页面的异步更新，使用2层循环可以提高性能和效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值