AJAX工作原理及优缺点详解

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

一、ajax所包含的技术

大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。

使用CSS和XHTML来表示。

使用DOM模型来交互和动态显示。

使用XMLHttpRequest来和服务器进行异步通信。

使用javascript来绑定和调用。

在上面几中技术中,除了XmlHttpRequest对象以外,其它所有的技术都是基于web标准并且已经得到了广泛使用的,XMLHttpRequest虽然目前还没有被W3C所采纳,但是它已经是一个事实的标准,因为目前几乎所有的主流浏览器都支持它。

二、怎样创建ajax

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。原生创建ajax可分为以下四步。

1、创建XMLHttpRequest对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2、准备请求

初始化该XMLHttpRequest对象,接受三个参数:

xhr.open(method,url,async);

第一个参数表示请求类型的字符串,其值可以是GET或者POST。

GET请求:

xhr.open("GET",demo.php?name=tsrot&age=24,true);

POST请求:

xhr.open("POST",demo.php,true);

第二个参数是要作为请求发送目标的URL。

第三个参数是true或false,表示请求是以异步还是同步的模式发出。(默认为true,一般不建议为false)

false:同步模式发出的请求会暂停所有javascript代码的执行,知道服务器获得响应为止,如果浏览器在连接网络时或者在下载文件时出了故障,页面就会一直挂起。
true:异步模式发出的请求,请求对象收发数据的同时,浏览器可以继续加载页面,执行其他javascript代码

3、发送请求

xhr.send();

一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到open方法的url参数中,此时send方法的参数为null或为空。

GET请求:

xhr.open("GET",demo.php?name=tsrot&age=24,true);
xhr.send(null);

POST请求:

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xhr.open("POST",demo.php,true);
xhr.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("name="+userName+"&age="+userAge);

4、处理响应

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}

onreadystatechange 事件:

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState属性:

0:已经创建对象,但还没有调用open()方法。

1:已经调用open()方法,但还没有发送请求。

2:请求已经发送,标题和状态已经收到,并可用。

3:接收到来自服务器的响应。

4:接收完请求数据,表示已经完成请求。

status属性:

200:”OK”

404: 未找到页面

responseText:获得字符串形式的响应数据

responseXML:获得 XML 形式的响应数据

返回值一般为json字符串,可以用JSON.parse(xhr.responseText)转化为JSON对象。

5、完整例子

demo.html

var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
};
xhr.open("GET","./data.json",true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(JSON.parse(xhr.responseText).name);
}
}

data.json

{
"name":"tsrot",
"age":24
}

三、ajax应用场景

场景 1. 数据验证

场景 2. 按需取数据

场景 3. 自动更新页面

四、ajax优缺点

优点:

1、页面无刷新,用户体验好。

2、异步通信,更加快的响应能力。

3、减少冗余请求,减轻了服务器负担

4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

缺点:

1、ajax干掉了back按钮,即对浏览器后退机制的破坏。

2、存在一定的安全问题。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。

5、无法用URL直接访问。

以上所述是小编给大家介绍的AJAX工作原理及优缺点详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2016-11-22

在Thinkphp中使用ajax实现无刷新分页的方法

在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK IT ] // +---------------------------------------------------------------

jQuery插件ajaxFileUpload异步上传文件

ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能

Ajax的概述与实现过程

一.ajax概述 1.Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的简写,不是一门新技术,而是对现有技术的综合利用.这一技术能够向服务器请求额外数据而无需刷新页面,带来了更好的用户体验 2.Ajax技术的核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性.在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架. 3.XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.

Ajax的使用代码解析

Ajax 简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 . 通常不用刷新网页而与服务器通讯的方法: Flash 框架 Frameset:如果使用一组框架构造了一个网页,可以只更新其中一个框架,而不必惊动整个页面 X

jstree创建无限分级树的方法【基于ajax动态创建子节点】

本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

JS 拦截全局ajax请求实例解析

你是否有过下面的需求:需要给所有ajax请求添加统一签名.需要统计某个接口被请求的次数.需要限制http请求的方法必须为get或post.需要分析别人网络协议等等,那么如何做?想想,如果能够拦截所有ajax请求,那么问题就会变的很简单!

AJAX请求队列实现

AJAX在使用的过程中会遇到一个问题,当用户短时间内执行了多个异步请求的时候,如果前一个请求没完成,将会被取消执行最新的一个请求,大多数情况下,不会有什么影响,例如请求了一个新的列表,旧的请求也就没什么必要了 ,但是,当我们的WEB程序需要同时异步调用多个请求,或者需要用户请求的是不同类型的数据,都需要执行完成的时候就出现问题 了,于是,将用户的请求记录下来,并按顺序执行. 不同的浏览器,允许同时执行的线程不同,通常IE允许两个线程,于是,当同时执行的异步请求超过两个时,就会变成只执行最新的两个

使用Ajax生成的Excel文件并下载的实例

很久沒有寫文章啦,今天分享一個如何在ASP.NET MVC里使用Ajax下載生成文件的方法,以下只是個人心得: 大家都應該知道,在ASP.NET MVC里,如果通過Ajax調用后臺控制器時,可以返回一個JSON對象,但并不能直接返回文件(除非刷新頁面,那就不是Ajax啦),所以如果想用Ajax生成文件并下載的話,那只要將生成的文件先保存到服務器上,然後再將文件路徑通過JSON返回,之後才可以進行下載,當然由於是暫時性存放,所以當下載完后就需要馬上刪除相應的文件. 以下是做法以動態生成Excel為

Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)

废话不多说了,直接给大家贴代码了,具体代码如下所示: $.ajax({ url: "/business/findpersons.json", dataType: "json", type:"GET", success: function(doc) { var objs=eval(doc); for (var i = 0; i < objs.length; i++){ var personid=objs[i].personId; var na

JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成

浅析Ajax语法

Ajax是目前很普遍的一门技术,也是很值得探讨和研究的一门技术.本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法. Ajax简介 Ajax全称为"Asynchronous Javascript And XML", 即"异步JavaScript和XML"的意思.通过Ajax我们可以向服务器发送请,在不阻塞页面的情况下进行数据交互,也可以理解为异步数据传输.在Ajax的帮助下我们的网页只需局部刷新即可更新数据的显示,减少了

AngularJS实现ajax请求的方法

本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &

Ajax读取txt并对txt内容进行分页显示功能

下文给大家分享了ajax读取txt并对txt内容进行分页显示的核心代码,废话不多说了,直接贴代码了. function TransferString(content) { var string = content; try{ string=string.replace(/\r\n/g,"<BR>") string=string.replace(/\n/g,"<BR>"); string=string.replace(/[ ]/g,"

PHP AjaxForm提交图片上传并显示图片源码

本文实例为大家分享了PHP AjaxForm提交图片上传并显示图片的具体代码,供大家参考,具体内容如下 PHP dofile.php 文件上传源码 <?php $file_upload = "upload/"; $file_allow_ext='gif|jpg|jpeg|png|gif|zip|rar|ppt|xls|pdf|pptx|xlsx|docx'; $file_allow_size = 5*1024*1024; if($_POST['submit']=="上传

AndroidStudio上传本地项目到码云的方法步骤(OSChina)

本文介绍了AndroidStudio上传本地项目到码云的方法步骤(OSChina),分享给大家,具体如下: 1.安装Git 2.注册oschina账户.设置ssh等等 在码云创建仓库 打开本地项目,添加Git管理 选你想要管理的目录,一般选项目最外层 此时所有的文件变成红色 右键项目名称点击git -> add 然后所有文件变绿色 点击提交 然后推送 复制你刚才在码云创建的地址,复制HTTPS的 定义默认的远程地址,点OK后输入密码 如果发现没有Define remote 可以在这里设置 点击

java使用ffmpeg实现上传视频的转码提取视频的截图等功能(代码操作)

ffmpeg视频采集功能非常强大,不仅可以采集视频采集卡或USB摄像头的图像,还可以进行屏幕录制,同时还支持以RTP方式将视频流传送给支持RTSP的流媒体服务器,支持直播应用.ffmpeg能解析的格式和不能解析的格式都一一给大家说明了,具体内容详情跟随一起看看吧, 1.能支持的格式 ffmpeg能解析的格式:(asx,asf,mpg,wmv,3gp,mp4,mov,avi,flv等) 2.不能支持的格式 对ffmpeg无法解析的文件格式(wmv9,rm,rmvb等),可以先用别的工具(menco

node.js使用express框架进行文件上传详解

关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究. 目前的研究算是取得的比较好的进展. Settings-Sync中通过快捷键上传文件,其实主要还是请求后端接口. 于是我便使用node.js模拟一个服务,这个服务其实就相当于github api(Settings-Sync实际请求的接口,比如token验证,gist存储创建等都是来自github 对应的api). 话不多说,直接代码贴起讲解: 1.创建一个node.js项目(这里我以ex

SpringMVC 文件上传配置,多文件上传,使用的MultipartFile的实例

基本的SpringMVC的搭建在我的上一篇文章里已经写过了,这篇文章主要说明一下如何使用SpringMVC进行表单上的文件上传以及多个文件同时上传的步骤 文件上传项目的源码下载地址:demo 一.配置文件: SpringMVC 用的是 的MultipartFile来进行文件上传 所以我们首先要配置MultipartResolver:用于处理表单中的file <!-- 配置MultipartResolver 用于文件上传 使用spring的CommosMultipartResolver -->

PHP上传文件参考配置大文件上传

PHP用超级全局变量数组$_FILES来记录文件上传相关信息的,在php文件上传之前,可通过调节php.ini中相关配置指令,来控制上传相关细节. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本最大执行时间,超过这个时间就会报错 3.memory_limit=50M 设置脚本可以分配的最大内存量,防止失控脚本占用过多内存,此指令只有在编译时设置了    --enable-memory-limit标志的情况下才

Spring Cloud中FeignClient实现文件上传功能

项目概况:Spring Cloud搭的微服务,使用了eureka,FeignClient,现在遇到FeignClient调用接口时不支持上传文件, 百度到两种方案,一种是使用feign-form和feign-form-spring库来做,源码地址. 具体的使用方法是加入maven依赖 <dependency> <groupId>io.github.openfeign.form</groupId> <artifactId>feign-form-spring&l

PHP实现文件分片上传的实例代码

PHP用超级全局变量数组$_FILES来记录文件上传相关信息的. 1.file_uploads=on/off 是否允许通过http方式上传文件 2.max_execution_time=30 允许脚本最大执行时间,超过这个时间就会报错 3.memory_limit=50M 设置脚本可以分配的最大内存量,防止失控脚本占用过多内存,此指令只有在编译时设置了. --enable-memory-limit标志的情况下才生效 4.upload_max_filesize=20M 允许上传文件的最大大小,此指

基于ASP.NET+EasyUI框架实现图片上传提交表单功能(js提交图片)

我的风格,先给大家展示下效果图,具体效果图如下所示,如果大家感觉还不错很满意请参考实现代码. HTML的代码: <form id="ff" runat="server" method="post"> <div id="content" style="margin-left:50px;"> <table style="width:300px;" id=&quo

springMVC结合AjaxForm上传文件

最近在项目中需要上传文件文件,之前一直都是form提交的,尝试了一下AjaxForm,感觉还比较好用,写篇随笔mark下,供以后使用. 准备工作: 下载jquery-form.js 相关jar: commons-fileupload-1.1.1.jar commons-io-1.3.2.jar 在spring-servlet.xml进行multipartResolver配置: <bean id="multipartResolver" class="org.springf