聊聊Ajax那些事
Posted DotNet资源分享
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了聊聊Ajax那些事相关的知识,希望对你有一定的参考价值。
了解Ajax的起源、概念及特点
-
起源 该技术在1998年前后得到了应用。 允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成。 该组件原属于微软Exchange Server,并且迅速地成为了Internet Explorer 4.0的一部分。 部分观察家认为,Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序,并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。 2005年初,许多事件使得Ajax被大众所接受。 Google在它著名的交互应用程序中使用了异步通信,如Google讨论组、Google地图、Google搜索建议、Gmail等。 对Mozilla/Gecko的支持使得该技术走向成熟,变得更为易用。 -
概念 Ajax是一种技术方案,但并不是一种新技术。 它依赖的是现有的CSS/html/javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。 -
特点(以toutiao.com做示例来讲) -
伪造ajax请求。 【缺点】 -
如果你使用身份验证, 确定你在请求页上检查! -
为 SQL 注入检查 -
保留商务逻辑在服务器上! -
不要假设每个请求是真实的! -
数据校验和合理的加密解密 -
无刷新更新数据 √ AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。 这使得Web应用程序更为迅捷地响应用户交互,并避免了在网络上发送那些没有改变的信息,减少用户等待时间,带来非常好的用户体验。 -
异步与服务器通信 √ AJAX使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。 优化了Browser和Server之间的沟通,减少不必要的数据传输、时间及降低网络上数据流量。 -
前端和后端负载平衡 √ AJAX可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。 并且减轻服务器的负担,AJAX的原则是“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担,提升站点性能 -
浏览器机制的破坏
在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面 -
安全问题 -
对搜索引擎支持较弱
理解Ajax通信的原理及兼容性
-
总结 一句话描述: 使用XMLHttpRequest发送http请求并接收响应。 -
知识点 -
XMLHttpRequest是一个js对象,可以使用js对象的方法、事件 -
流程 -
发起请求 发起一个http请求,方法GET、POST、PUT、DELETE、UPDATE -
发送数据 客户端向服务端发送数据 -
监听状态 监听整个连接的状态 -
接收响应 接收服务端返回的数据
-
兼容性 -
【Level1】受同源策略的限制,不能发送跨域请求; -
【Level1】不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据; -
【Level1】在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成; -
【Level2】可以发送跨域请求,在服务端允许的情况下; -
【Level2】支持发送和接收二进制数据; -
【Level2】新增formData对象,支持发送表单数据; -
【Level2】发送和获取数据时,可以获取进度信息; -
【Level2】可以设置请求的超时时间; -
XMLHttpRequest -
ActiveXObject("Microsoft.XMLHTTP") -
IE和其他浏览器的实现 -
XMLHttpRequest规范的升级
掌握XmlHttpRequest的属性及方法【重点】
-
属性 -
onreadystatechange 设置状态监听函数 -
readyState 连接状态【状态值为1、2、3、4之一】 -
responseText 响应的文本 -
responseXML 响应的XML -
status 状态码,如404,200 -
statusText 状态文本描述,如NOT FOUND -
方法 -
abort() 取消请求 -
getAllResponseHeaders() 获取所有响应头 -
getResponseHeader( headerName ) 获取指定响应头 -
open( method, URL, async, userName, password ) 建立一个连接 -
send( content ) 发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回 【注】所有事件的绑定需要在send之前绑定才可以 -
setRequestHeader( label, value ) 发送请求头在send之前 -
事件 -
loadstart -
progress -
abort -
error -
load -
timeout -
loadend -
readystatechange -
难点 -
readystatechange 每当xhr.readyState改变时触发; 但xhr.readyState由非0值变为0时不触发。 -
loadstart 调用xhr.send()方法后立即触发,若xhr.send()未被调用则不会触发此事件。 -
progress xhr.upload.onprogress在上传阶段(即xhr.send()之后,xhr.readystate=2之前)触发,每50ms触发一次; xhr.onprogress在下载阶段(即xhr.readystate=3时)触发,每50ms触发一次。 -
load 当请求成功完成时触发,此时xhr.readystate=4 -
loadend 当请求结束(包括请求成功和请求失败)时触发 -
abort 当调用xhr.abort()后触发 -
timeout xhr.timeout不等于0,由请求开始即onloadstart开始算起,当到达xhr.timeout所设置时间请求还未结束即onloadend,则触发此事件 -
error 在请求过程中,若发生Network error则会触发此事件(若发生Network error时,上传还没有结束,则会先触发xhr.upload.onerror,再触发xhr.onerror; 若发生Network error时,上传已经结束,则只会触发xhr.onerror)。 注意,只有发生了网络层级别的异常才会触发此事件,对于应用层级别的异常,如响应返回的xhr.statusCode是4xx时,并不属于Network error,所以不会触发onerror事件,而是会触发onload事件 -
事件触发条件 -
事件触发顺序 -
触发xhr.onreadystatechange(之后每次readyState变化时,都会触发一次) -
触发xhr.onloadstart -
触发xhr.upload.onloadstart【上传开始】 -
触发xhr.upload.onprogress -
触发xhr.upload.onload -
触发xhr.upload.onloadend【上传结束】 -
触发xhr.onprogress -
触发xhr.onload -
触发xhr.onloadend -
举例 使用原生JavaScript构造一个Ajax实例
var ajax = function(param) {
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
var type = (param.type || 'get').toUpperCase();
var url = param.url;
if (!url) {
return
}
var data = param.data,
dataArr = [];
for (var k in data) {
dataArr.push(k + '=' + data[k]);
}
dataArr.push('_=' + Math.random());
if (type == 'GET') {
url = url + '?' + dataArr.join('&');
xhr.open(type, url);
xhr.send();
} else {
xhr.open(type, url);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(dataArr.join('&'));
}
xhr.onload = function() {
if (xhr.status == 200 || xhr.status == 304) {
var res;
if (param.success && param.success instanceof Function) {
res = xhr.responseText;
if (typeof res === 'string') {
res = JSON.parse(res);
param.success.call(xhr, res);
}
}
}
};
};
思考与练习
-
请自己用XMLHttpRequest实现与服务端的通信实例 -
请思考如何结合XMLHttpRequest实现JavaScript文件的加载
以上是关于聊聊Ajax那些事的主要内容,如果未能解决你的问题,请参考以下文章