(一)AJAX同步异步 (为什么存在AJAX)

本文探讨了AJAX如何通过异步数据传输改善用户交互体验,特别是在用户注册过程中的实时验证,减轻服务器负担,增强应用程序响应速度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

       曾经在博客中写过关于Ajax的三篇博客, 主要是介绍了什么是AJAX, AJAX的核心对象以及工作原理, 以及AJAX无刷新验证用户是

否存在的例子. 这是在vs中在学习网页的一些技术时对AJAX的总结.

       这次,在j2ee项目中再次用到AJAX .  有些些许的熟悉, 还是有必要再次的复习一下的.

 

问题驱动AJAX的出现:

 

          我们开始对用户输入的用户代码验证的方法是, 等用户填写完注册信息的时候, 再点击注册按钮的时候进行验证判断, 是否已

经注册. 这样验证会出现一系列的问题:

 

         1  所有的信息全部填写完后进行提交, 会一起把用户填写的信息进行提交, 再验证填写的信息, 如果我们验证的不只是注册时的用

户代码, 而且要验证邮箱等等选项, 那同时提交给服务器端的时候, 给服务器带来巨大的压力, 需要等待的时间也比较长. 让用户等待,

就等于浪费用户的时间, 俗话说:Time is Money!

 

         我们不可以把一些需要验证是否存在的信息, 在用户开始输入的时候就进行验证呢? 这样节省了很多时间.  就像制造飞机的工厂一

样, 为什么要等到整个飞机成形之后再去验证这个必须的零件是否合格呢?  我们可以在制作零件的过程中去验证了. 这样飞机即使有

问题 ,也不会是零件问题, 会是其他的组装等问题.  

         于是我们想办法去解决这一问题, 随着用户的输入, 随之检验输入的是否合法. 这样也增强了用户体验度.

 

         2  接着上述的问题, 我们是必须要填写完这个选项的信息, 才能填写那个选项的信息吗? 回答是否定的, 这就说到了同步和异步.  

 

        同步, 些许的熟悉, java线程同步问题, 线程同步可能带来的一些列问题, 例如线程的死锁, 还记得那个经典的例子"哲学家进餐问

题" ,线程同步经典的问题,  是如何解决的? 是wait了?还是sleep了?还是synchronized 了? 同步, 就是做一件事,需要对前一件事进行判

断, 他们因为某些原因紧密相连, 可能一件事是另一件事的条件, 可能是共同使用一个资源, 但必须排队等候.

 

         异步: 和同步相反, 两件事情是独立的两件事, 没有什么联系, 可以同一时间进行 . 就像制造飞机一样, 制造不同的零件可以同时

进行. 说说在计算机中, 在这里的异步, 用户提交的信息, 不用最后再去验证, 可以边填写边验证, 这两件事是可以同时进行的.

 

         在用户注册信息时,我们采用的是ajax的异步传输, 很明显, 我们填写前一项信息时不是后一项的必要条件, 所以可以用ajax的异步

传输来提高效率, 减少用户等待时间, 提高用户体验度.

 

 

问题出现了,并且已经有人解决了,我们需要的是学习.

 

        AJAX成长史:

 

         基于上述的问题的存在, 该技术在我出生八年(1998) 前后得到了应用. 允许客户端脚本发送http请求(XMLHTTP), 该组件原属于微

软的Exchange server, 并迅速的成为IE 4.0一部分 .我15岁的时候, 2005年初许多事件使得AJAX被大众接受, AJAX(Asynchronous

JavaScript and XML)异步的javascript和XML, 这个词由<Ajax :ANew Approach to Web Applications> 所创, 迅速提高了人们对这项技

术的意识.

 

          传统WEB模型和AJAX应用模型:

        传统:

       

 

        

 

        AJAX应用模型:

 

 

 

       从这两个模型中我们一眼就能看到他们的不同之处, AJAX应用模型多了一个Ajax engine, 这是他. 正是他, (ˇˍˇ) 像一个中间人一样, 一下子让我们不需要提交表单就可以验证了. 具体的原理, 就不在这里详细解释了,  下一篇我们将讲述    AJAX同步和异步传

输(采用非匿名函数和匿名函数) 实例.

 

 

 

      

 

         

       

         

 

 

### AJAX 同步异步请求的区别及工作原理 #### 1. 基本概念 AJAX(Asynchronous JavaScript and XML)是种用于创建快速动态网页的技术,允许浏览器在不重新加载整个页面的情况下更新部分数据。其核心功能通过 `XMLHttpRequest` 对象实现。 - **同步请求**是指客户端发起请求后,必须等待服务器返回结果才能继续执行后续代码[^3]。 - **异步请求**则是指客户端可以在发出请求的同时继续执行其他操作,而无需阻塞当前线程直到收到响应[^2]。 --- #### 2. 工作原理 ##### (1)同步请求的工作流程 当设置 `async=false` 参数时,JavaScript 的主线程会被阻塞,直到服务器完成响应并返回数据为止。这意味着,在此期间任何用户交互或其他脚本逻辑都无法被执行[^3]。 示例代码: ```javascript var xhr = new XMLHttpRequest(); xhr.open("GET", "/example.php", false); // 设置为同步请求 xhr.send(); if (xhr.status === 200) { console.log(xhr.responseText); } ``` ##### (2)异步请求的工作流程 对于异步请求 (`async=true`)旦调用了 `send()` 方法,JavaScript 将立即释放控制权给事件循环,并监听来自服务器的响应。只有当接收到实际的数据时才会触发回调函数来处理这些数据[^2]。 示例代码: ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.open("GET", "/example.php", true); // 设置为异步请求 xhr.send(); ``` --- #### 3. 主要区别 | 特性 | 同步请求 | 异步请求 | |--------------------|---------------------------------------|-----------------------------------------| | 执行顺序 | 阻塞式 | 非阻塞式 | | 用户体验影响 | 可能导致界面冻结 | 提供更流畅的操作 | | 使用场景 | 极少使用 | 广泛应用于现代Web开发 | 具体而言, - 在同步模式下,所有的进程都会暂停直至获取到远程资源的结果; - 而采用异步方法则不会干扰用户的正常浏览活动,因此更加适合大多数应用场景下的需求[^2]。 --- #### 4. 使用场景分析 ##### (1)适用同步的情况 尽管同步请求通常被认为是个较差的选择因为它们会影响性能和用户体验,但在某些特定情况下还是有用的,比如表单验证或者初始化阶段的小型查询等简单任务中可能会考虑使用[^1]。 注意:随着技术的发展,许多开发者建议完全避免使用同步XHR调用,尤其是在移动设备上,因为它可能导致应用无响应甚至崩溃的风险增加[^4]。 ##### (2)推荐使用的异步情形 几乎所有的实时互动都需要依赖于高效的异步通信机制,例如聊天室消息推送、社交媒体状态更新等功能均需借助于此种方式达成即时反馈效果。 --- ### 结论 综上所述,虽然理论上存在两种类型的Ajax请求形式——即同步异步,但从实践角度来看,后者显然占据主导地位因其具备更好的兼容性和灵活性特点。 问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值