什么是ajax?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

ajax的优缺点:

优点:

  • 1.局部刷新、

    ​ AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。

  • 2.异步加载

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

  • 3.前端和后端负载平衡

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

  • 4.基于标准被广泛支持

    ​ AJAX基于标准化的并被广泛支持的技术,不需要下载浏览器插件或者小程序,但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。

  • 界面与应用分离

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

    缺点:

  • ajax干掉了back和history功能,即对浏览器机制的破坏

    ​ 在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在Ajax应用程序中,这将无法实现。

  • ajax的安全问题

    ​ AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

  • 对搜索引擎支持较弱

    ​ 不利于SEO优化,对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能

  • 破坏程序的异常处理机制

    ​ 难以调试

    ajax的语法

    分为四个步骤(不再兼容IE低版本):

    1.创建xhr对象
    
    var xhr=new XMLHttpRequest();
    
    2.打开服务流
    2.1 get方式:
    xhr.open("GET","ajax_info.txt?username='zhangsan&gender='男'",true);
    2.2 post方式:
    xhr.open("POST","ajax_info.txt?",true);
    
    小结:
    open()中三个参数:open(method,url,async)
    规定请求的类型、URL 以及是否异步处理请求。
    - method:请求的类型;GET 或 POST
    - url:文件在服务器上的位置
    - async:true(异步)或 false(同步)
    
    get和post方式的差异:
    get的参数直接坠在url中,post方式在send()中传递
    
    3.向服务器发送请求
    3.1 get方式
    xhr.send();
    3.2 post方式
    xhr.send("username='zhangsan&gender='男'");
    
    4.服务器响应
    xhr.onreadystatechange=function()
    {
        if (xhr.readyState==4 && xmlhttp.status==200)
        {
            console.log(xhr.resposeText);
        }
    }
  • 参数介绍: 属性 描述 onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
    readyState	
     存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
     0: 请求未初始化
     1: 服务器连接已建立
     2: 请求已接收
     3: 请求处理中
     4: 请求已完成,且响应已就绪
     status	200: "OK"
     404: 未找到页面

ajax技术介绍的更多相关文章

  1. 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. HTML5 Web缓存和运用程序缓存(cookie,session)

    这篇文章主要介绍了HTML5 Web缓存和运用程序缓存(cookie,session),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. ios – Objective-C中的Google用户serverAuthCode nil

    我正在尝试将GoogleSignIn框架集成到iOS应用程序中,并对服务器上的用户进行身份验证.我设法登录用户,但在–(void)signIn:(GIDSignIn*)signIndidSignInForUser:(GIDGoogleUser*)用户withError:(NSError*)错误委托方法,user.serverAuthCode为nil,我需要通过此服务器身份验证代码,嗯,验证服务器上

  4. ios – CloudKit – 如何保存记录如果不存在

    我正在尝试创建一个包含唯一值的记录类型,并将作为另一个记录类型的目标引用对象.例如,录制类型–电影将包含用户提交的唯一电影列表.而且FavoriteMovies将包含用户参考和电影参考.用户可以从现有电影列表中进行选择,也可以向其中添加新电影.如果我创建一个新的电影记录,而另一个用户创建一个具有相同名称的新记录(在我检索电影列表之后,但在我尝试添加新电影之前),则会出现问题.这两个新记录被认为是具

  5. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗?

  6. 让你真正明白cinder与swift、glance的区别

    Cinder——提供块存储,类似于Amazon的EBS块存储服务,目前仅给虚机挂载使用。Cinder包含以下三个主要组成部分APIservice:Cinder-api是主要服务接口,负责接受和处理外界的API请求,并将请求放入RabbitMQ队列,交由后端执行。Cinder目前提供VolumeAPIV2Schedulerservice:处理任务队列的任务,并根据预定策略选择合适的VolumeService节点来执行任务。目前版本的cinder仅仅提供了一个SimpleScheduler,该调度器选择卷数量

  7. swift – 如何编码非托管到base64以发送到另一台服务器?

    我正在尝试使用密钥对加密来验证我的应用程序和我的PHP服务器之间的身份.为此,我需要在我的应用程序中生成公钥后将公钥发送到服务器.publicKey的类型为Unmanaged.我在上面的代码中得到的错误是:调用中的额外参数’base64EncodedData’我该怎么办?有没有更好的办法?编辑:这是密钥对的生成方式:编辑2:所以问题是SecKey不是NSData,所以我的问题应该是:如何将publicKey:SecKey转换为NSData?您似乎可以将密钥临时存储到钥匙串,然后将其恢复并将其转换为数据:

  8. 如何在android中设置多个SMTP服务器?

    我的问题是如何设置多个SMTP服务器在Android中发送邮件,如:雅虎,hotmail,gmail,rediff任何类型的域名将在发送邮件时起作用.任何人都可以建议任何网站或任何想法吗?请帮帮我,谢谢你.解决方法以下是GMail,Yahoo!的测试设置.和Hotmail.使用适用于Android的JavaxMail端口进行测试.

  9. 如何在Android服务器上发布大型视频?

    我想发布一个大视频.我正在使用FTP将视频发送到服务器,但上传会在一段时间后停止.在服务器上视频崩溃,但我可以上传较小的视频.我还使用HTTP将视频发送到服务器,作为Base64编码字符串发送,但编码时出现内存不足异常.我试图将视频上传为文件,但没有成功.将大型视频上传到服务器的最佳方法是什么?

  10. android rest客户端不支持的媒体类型

    我尝试从android模拟器发送请求到一个安静的服务器.但我总是得到错误:415UnsupportedMediaType.客户代码:服务器的代码:解决方法问题是服务器不知道客户端请求的媒体类型.在客户端代码中尝试这样的事情:request.setHeader(“Content-Type”,“application/json”);

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到<input>中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部