Ajax是一种技术方案,并不是什么新技术,Ajax请求使用XmlHttpRequest对象发送,

XmlHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。

最早,微软在IE 5引进了这个接口。因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生。

XmlHttpRequest Level1主要属性

  * xhr.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。

  * xhr.status:服务器返回的状态码,等于200表示一切正常。

  * xhr.responseText:服务器返回的文本数据

  * xhr.responseXML:服务器返回的XML格式的数据

  * xhr.statusText:服务器返回的状态文本。

主要缺点

  • 受同源策略的限制,不能发送跨域请求;

  • 不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;

  • 在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;

XmlHttpRequest Level2主要属性

在Level1的基础上增加以下内容

* xhr.timeout: 设置HTTP请求的时限,最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求

配套的回调函数 xhr.ontimeout = function(event){alert('请求超时!');}

* var formData = new FormData();formData.append('username', '张三');xhr.send(formData); 新加formData对象,可以直接传formData

* formData.append('files[]', files[i]);  xhr.send(formData); 上传文件

* xhr.open('GET', 'http://other.server/and/path/to/script'); 跨域资源共享CORS(IE9以上的支持)

* 接收二进制数据,参见阮老师的这篇文章

* 进度信息,包括上传的进度信息和下载的进度信息

xhr.onprogress = updateProgress; 下载

xhr.upload.onprogress = updateProgress;上传

function updateProgress(event) {

    if (event.lengthComputable) {

      var percentComplete = event.loaded / event.total;

    }

}

  * load事件:传输成功完成。

  * abort事件:传输被用户取消。

  * error事件:传输中出现错误。

  * loadstart事件:传输开始。

  * loadEnd事件:传输结束,但是不知道成功还是失败。

Level2新功能

  • 可以发送跨域请求,在服务端允许的情况下;

  • 支持发送和接收二进制数据;

  • 新增formData对象,支持发送表单数据;

  • 发送和获取数据时,可以获取进度信息;

  • 可以设置请求的超时时间;

xmlHttpRequest的使用

1、设置requestheadervar client = new XMLHttpRequest();

client.open('GET', 'demo.cgi');
client.setRequestHeader('X-Test', 'one');//必须在open之后,send之前,第一个参数不区分大小写,Content-Type/content-Type/content-type
client.setRequestHeader('X-Test', 'two'); //最终的值不会采用覆盖override的方式,而是采用追加append的方式,
最终request header中"X-Test"为: one, two
client.send();

2、获取ResponseHeader

getAllResponseHeaders
getResponseHeader(header) //只能拿到限制以外(即被视为safe)的header字段,而不是全部字段

3、设定response数据类型

level1  overrideMimeType
level2 xhr.responseType

4、获取response数据

xhr.response  ""
xhr.responseText ""
xhr.responseXML null

5、追踪状态

利用onreadystatechange事件
0 UNSENT (初始状态,未打开) 此时xhr对象被成功构造,open()方法还未被调用
1 OPENED (已打开,未发送) open()方法已被成功调用,send()方法还未被调用。注意:只有xhr处于OPENED状态,才能调用xhr.setRequestHeader()xhr.send(),否则会报错
2 HEADERS_RECEIVED(已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回
3 LOADING (正在下载响应体) 响应体(response entity body)正在下载中,此状态下通过xhr.response可能已经有了响应数据
4 DONE (整个数据传输过程结束) 整个数据传输过程结束,不管本次请求是成功还是失败

6、设置超时时间

xhr.timeout

7、获取上传下载进度

8、可以发送的数据类型

  • ArrayBuffer

  • Blob

  • Document

  • DOMString

  • FormData

  • null

 
  • 如果data是 Document 类型,同时也是HTML Document类型,则content-type默认值为text/html;charset=UTF-8;否则为application/xml;charset=UTF-8

  • 如果data是 DOMString 类型,content-type默认值为text/plain;charset=UTF-8

  • 如果data是 FormData 类型,content-type默认值为multipart/form-data; boundary=[xxx]

  • 如果data是其他类型,则不会设置content-type的默认值

9、关于xhr.withCredentials

withCredentials默认为false,跨域时默认不能携带认证信息,例如Cookie,若需要,则设置为true,同时服务端Access-Control-Allow-Credentials要设置为true

Access-Control-Allow-Origin设置为请求页面的域名,不能写*

10、

onreadystatechange 每当xhr.readyState改变时触发;但xhr.readyState由非0值变为0时不触发。
onloadstart 调用xhr.send()方法后立即触发,若xhr.send()未被调用则不会触发此事件。
onprogress xhr.upload.onprogress在上传阶段(即xhr.send()之后,xhr.readystate=2之前)触发,每50ms触发一次;xhr.onprogress在下载阶段(即xhr.readystate=3时)触发,每50ms触发一次。
onload 当请求成功完成时触发,此时xhr.readystate=4
onloadend 当请求结束(包括请求成功和请求失败)时触发
onabort 当调用xhr.abort()后触发
ontimeout xhr.timeout不等于0,由请求开始即onloadstart开始算起,当到达xhr.timeout所设置时间请求还未结束即onloadend,则触发此事件。
onerror 在请求过程中,若发生Network error则会触发此事件(若发生Network error时,上传还没有结束,则会先触发xhr.upload.onerror,再触发xhr.onerror;若发生Network error时,上传已经结束,则只会触发xhr.onerror)。注意,只有发生了网络层级别的异常才会触发此事件,对于应用层级别的异常,如响应返回的xhr.statusCode4xx时,并不属于Network error,所以不会触发onerror事件,而是会触发onload事件。

11、事件触发顺序

    1. 触发xhr.onreadystatechange(之后每次readyState变化时,都会触发一次)

    2. 触发xhr.onloadstart
      //上传阶段开始:

    3. 触发xhr.upload.onloadstart

    4. 触发xhr.upload.onprogress

    5. 触发xhr.upload.onload

    6. 触发xhr.upload.onloadend
      //上传结束,下载阶段开始:

    7. 触发xhr.onprogress

    8. 触发xhr.onload

    9. 触发xhr.onloadend

Ajax探讨的更多相关文章

  1. 以短链服务为例,探讨免AppKey、免认证、Ajax跨域调用新浪微博API

    新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...

  2. 探讨Ajax中有关readyState(状态值)和status(状态码)的问题

    先看下面一段代码,然后给大家详细介绍,Ajax中有关readyState(状态值)和status(状态码)的问题,具体内容如下所示: var getXmlHttpRequest = function ...

  3. 关于IE下AJAX的问题探讨

    今天JS练手的时候,想封装一个发送AJAX请求的对象,当然,是想要兼容全浏览器的.代码如下: var Ajax = { xhr: null, callback: null, XMLHttp: func ...

  4. Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST AP ...

  5. Ajax语法浅析

    Ajax是目前很普遍的一门技术,也是很值得探讨和研究的一门技术.本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法. Ajax简介 Ajax全称为“Asy ...

  6. ASP.NET探讨:技术的学习顺序问题

    作者: シtearシ  来源: 博客园  发布时间: 2011-09-27 08:40  阅读: 7675 次  推荐: 25   原文链接   [收藏]   摘要:很多人对于ASP.NET的入门和学 ...

  7. Ajax完整篇(转载)

    Ajax 完整教程 第 1 页 Ajax 简介Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用 ...

  8. php和ajax 服务器端做轮询推送(定义)

    基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性. 一.什么是长连接.长轮询? 用通俗易 ...

  9. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

随机推荐

  1. vmware linux无法正常上网

    不知道自己怎么搞的整的vmware里面的fedora 12 不能正常上网,但是在宿主机上ping XXX,是正常的.当service network restart 的时候提示MAC有问题.网上百度了 ...

  2. Java Socket 爬虫

    # 地址 https://github.com/mofadeyunduo/crawler # 前言 1.代码不断优化更新. 2.有建议请留言. # 介绍 1.多线程,基于 ExcutorServcie ...

  3. 关于Socket的建立及连接

    最近在做一个东西,目前考虑的是采用Socket连接,从网上找了一个SuperSocket的socket通信框架.... 关于Socket连接,个人并不是搞得太懂,写的东西也全是个人理解,那么这里先整理 ...

  4. 在 Excel 中如何使用宏示例删除列表中的重复项

    概要:在 Microsoft Excel 中,可以创建宏来删除列表中的重复项.也可以创建宏来比较两个列表,并删除第二个列表中那些也出现在第一个(主)列表中的项目.如果您想将两个列表合并在一起,或者如果 ...

  5. LINQ查询表达式---------group子句

    LINQ查询表达式---------group子句 LINQ表达式必须以from子句开头,以select或group子句结束.使用guoup子句来返回元素分组后的结果.group 子句返回一个 IGr ...

  6. .gitignore 配置后无效

    利用.gitignore过滤文件,如编译过程中的中间文件,等等,这些文件不需要被追踪管理. 现象: 在.gitignore添加file1文件,以过滤该文件,但是通过Git status查看仍显示fil ...

  7. Android Java调用Qt写的so库

    有时候,我们反编译apk得到一个so库,如果直接使用这个so库的话,必须使用原来so库同样的package名字,才能用.这样人家反编译你的apk,就知道你侵犯了人家的版权.为了达到混淆的目的,我们可以 ...

  8. JavaScript 数据实用程序库:Datalib

    Datalib 是一个 JavaScript 数据实用程序库. 快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发M ...

  9. 完全卸载mysql免安装版

    使用以下命令 reg delete "HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\services\eventlog\Application\MySQL& ...

  10. 基于SAP HANA平台的多团队产品研发

    工欲善其事必先利其器.要提高多团队的开发效率,而且还是在SAP HANA平台上,建议大家还是本着“慢就是快”的原则,不要急功近利,在没有准备好团队开发的架构时就匆忙开始功能的开发.匆忙功能开发就算了, ...