每次在学习的过程中遇到ajax就会卡壳,不知道为什么到最后已经见到就躲,一度让我产生出一种我并不适合学习前端的念头。今天我就是来克服困难的。既然阻挡我,我就要把他彻底的征服。(接下来就是刨根问底,揭祖坟)
在研究ajax的时候,我们先去想一下,ajax是什么,他是干什么用的,为什么要用它,他的原理是什么,由什么组成的。
我们来一点一点揭露ajax的。(我要彻底的把他搞清楚)
官方给的解释 ajax(Asynchronous Javascript And XML)异步JavaScript和XML(什么鬼除了javascript其他的是啥 .! 我就想问问Jesse James Garrettajax的发明人
你当时是咋想的)他在05年一篇文章中提到,Ajax提供与服务器异步通信的能力,一个最简单的应用是无需刷新整个页面而在网页中更新一部分数据。听起来好像挺厉害的,其实在发明前只是因为对flash的不熟悉而想到可以结合XML来代替。在这之前我们发现有两个词需要我们了解异步
,XML
。
有异步就有同步,那到底哪个好,或者到底什么时候用同步,什么时候用异步。这很重要因为并不是所有的网站都需要用ajax的。
ajax的原理是什么?
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。
XMLHttpRequest工作原理是什么?
XMLHttpRequest在IE5中首先引入,并且微软之前已经开始在它的一些产品中应用,比如说MSDN网站菜单中的一些应用。但是微软并没有加以发展和推广,而是将它搁置起来。
我们看下它的属性
属性 | 类型 | 描述 |
---|---|---|
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) | 终端读取操作 |