Ajax—初识

前端之家收集整理的这篇文章主要介绍了Ajax—初识前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

DRP的过程,重新学习了一遍Ajax,更深刻的体会到了Ajax所具有的魅力。Ajax是一种技术或者方法,更是一


种艺术。它让我们的程序以一种更完美的姿态呈现在用户面前。下面就让我们一起走进Ajax的世界。


简介


全名:


AsynchronousJavaScript and XML。


工作原理:


Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不

是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读

取新数据时再由Ajax引擎代为向服务器提交请求。

通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新

页面


核心技术:


异步


主要成员:


JavaScriptXMLHTTPRequestDOM


应用:


新浪微博、Google地图等


同步与异步

提到Ajax,必然会提到同步和异步。


同步:可以理解为单线程,也可以理解为“死心眼”。也就是在执行完一个函数方法之后,一直等待系统返回

值或消息,这时程序是出于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令。


异步:可以理解为多线程(异步肯定是多线程)。执行完函数方法后,不必阻塞性地等待返回值或消息,只需

要向系统委托一个异步过程,那么当系统接收到返回值或消息时,系统会自动触发委托的异步过程,从而完成一个完

整的流程。

还不懂?同步就是你叫我去吃饭,我听到了就和你去吃饭;如果没有听到,你就不停的叫,直到我告诉你听到

了,才一起去吃饭。异步就是你叫我,然后自己去吃饭,我得到消息后可能立即走,也可能等到下班才去吃饭。

以,要我请你吃饭就用同步的方法,要请我吃饭就用异步的方法,这样你可以省钱。

而我们的Ajax只要就应用了异步,来展现自己的魅力,提高用户的体验度。说到这里就不得不提Ajax的核心对象

XMLHttpRequest。正是它的存在才可以让Ajax向世人展现它强大的功能

XMLHttpRequest介绍


这里不详细介绍XMLHttpRequest的属性方法,我们大致说一下XMLHttpRequest的工作过程:

  1. 为得到XMLHttpRequest对象实例的一个引用,可以创建一个新的实例,也可以访问包含有XMLHttpRequest实例的一个变量。
  2. 告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变,为此要把对象onreadystatechange属性设置为指向JavaScript函数的指针。
  3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数:一个是指示所方法(通常是GET或POST)的串;一个是表示目标资源URL的串;一个是Boolean值,指示请求是否是异步的。
  4. 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数,通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时,要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送,则使用null。

这些步骤很直观:你需要XMLHttpRequest对象的一个实例,要告诉它如果状态有变化该怎么做,还要告诉它向哪

里发送请求以及如何发送请求,最后还需要指导XMLHttpRequest发送请求。再简单点就是:创建出一个实例,告诉他

他需要做什么,为谁服务。


优缺点

任何一件艺术品都有不是完美的,Ajax也一样,自从Ajax出现之后,对它的讨论就没有停止过。优点显而易见:

  1. 局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验
  2. 减轻服务器的负担,按需取数据,最大程度的减少冗余请求
  3. 基于xml标准化,并被广泛支持,不需安装插件
  4. 进一步促进页面和数据的分离

但它的缺点也很明显,有人总结出Ajax“七宗罪”,这里我们就不详细说了,我大致总结一下它的缺点:

  1. ajax干掉了back按钮,即对浏览器后退机制的破坏。
  2. 搜索引擎的支持比较弱。
  3. 破坏异常处理机制

总结:

这是一篇帮助大家了解Ajax文章,没有太多详细的技术讲解,Ajax是一门非常实用的技术,它可以很好的提高

客户的体验度,但它也不是完美的,很多场景下并不适合使用它,比如:需要替换大量文本的情况下。

原文链接:https://www.f2er.com/ajax/164637.html

猜你在找的Ajax相关文章