每次在学习的过程中遇到ajax就会卡壳，不知道为什么到最后已经见到就躲，一度让我产生出一种我并不适合学习前端的念头。今天我就是来克服困难的。既然阻挡我，我就要把他彻底的征服。（接下来就是刨根问底，揭祖坟）
Ajax
在研究ajax的时候，我们先去想一下，ajax是什么，他是干什么用的，为什么要用它，他的原理是什么，由什么组成的。
我们来一点一点揭露ajax的。（我要彻底的把他搞清楚）
官方给的解释 ajax（Asynchronous Javascript And XML）异步JavaScript和XML（什么鬼除了javascript其他的是啥 .! 我就想问问Jesse James Garrettajax的发明人你当时是咋想的）他在05年一篇文章中提到，Ajax提供与服务器异步通信的能力，一个最简单的应用是无需刷新整个页面而在网页中更新一部分数据。听起来好像挺厉害的，其实在发明前只是因为对flash的不熟悉而想到可以结合XML来代替。在这之前我们发现有两个词需要我们了解异步,XML。
有异步就有同步，那到底哪个好，或者到底什么时候用同步，什么时候用异步。这很重要因为并不是所有的网站都需要用ajax的。
传统Web应用模型(左)与Ajax模型的比较(右)
ajax的原理是什么?
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest工作原理是什么？
XMLHttpRequest在IE5中首先引入，并且微软之前已经开始在它的一些产品中应用，比如说MSDN网站菜单中的一些应用。但是微软并没有加以发展和推广，而是将它搁置起来。
我们看下它的属性
XMLHttpRequest的属性
| 属性 | 类型 | 描述 |
|---|---|---|
| onreadystatechange | Function? | 每次状态改变所触发事件的事件处理程序 |
| readyState | unsigned short | 对象状态值 |
| response | varies | 将文件读取为DataURL |
| responseText | DOMString | 从服务器进程返回数据的字符串形式 |
| responseType | XMLHttpRequestResponseType | 将文件读取为二进制编码 |
| responseXML | Document? | 从服务器进程返回的DOM兼容的文档数据对象。 |
| status | unsigned short | 该请求的响应状态码 (例如, 状态码200 表示一个成功的请求) |
| statusText | DOMString | 伴随状态码的字符串信息 |
| upload | XMLHttpRequestUpload | 可以在 upload 上添加一个事件监听来跟踪上传过程。 |
| withCredentials | boolean | 表明在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或授权的header)。 默认为 false。 |
| 事件 | 描述 |
|---|---|
| onabort | 中断 |
| onerror | 出错 |
| onloadstart | 开始 |
| onprogress | 正在读取 |
| onload | 成功读取 |
| onloadend | 读取完成，无论成功失败 |
| 方法名 | 参数 | 描述 |
|---|---|---|
| readAsBinaryString | file | 将文件读取为二进制编码 |
| readAsText | file,[encoding] | 将文件读取为文本 |
| readAsDataURL | file | 将文件读取为DataURL |
| abort | (none) | 终端读取操作 |
网友评论