深入浅出AJAX
一、什么是AJAX:
Asynchronous JavaScript And XML (异步 JavaScript 和 XML)。
原理: AJAX通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据。然后用 JavaScript来操作DOM更新页面。
二、基础知识回顾:
1.表单:数据的提交
action: 数据提交的地址,默认是当前页面;
method: 数据提交的方式,默认是get方式;
get: 把数据名称和数据值用=连接,如果有多个用&连接,把数据放在url?后面传到指定页面。
post: 理论上对数据长度无限制。
enctype: 提交的数据格式,默认为 application/x-www-form-urlencoded。
2.请求状态监控:
onreadystatechange事件:
(1)readyState属性:请求状态
0: (初始化)还没有调用open()方法;
1: (载入)已调用send()方法,正在发送请求;
2: (载入完成)send()方法完成,已收到全部响应内容;
3: (解析)正在解析响应内容;
4: (完成)响应内容解析完成,可以在客户端调用了。
(2)status属性: 服务器(请求资源)的状态。
(3)返回的内容:
responseText : 返回以文本形式的内容;
responseXML : 返回以XML形式的内容。
三、使用AJAX获取某一文本文件的内容,模拟打开浏览器浏览网页过程:
1.打开浏览器:
2.在地址栏输入地址:
3.提交,发送请求:
4.等待服务器返回内容:
四、在AJAX中get 与 post 的使用区别:
1.get方式:
xhr.open('get','2.get.php?username=leo&age=30&'+new Date().getTime(),true);
缓存: 在url?后面连接一个随机数,事件戳。
乱码: 编码 encodeURI , 如encodeURI('刘伟')。
2.post方式:
xhr.open('post','2.post.php',true);
post方式,数据放在send()里面作为参数传递。
设置申请发送的数据类型:
xhr.setRequestHeader('content-type','application-x-www-form-urlencoded');
post没有缓存问题,无需编码:
xhr.send('username=刘伟&age=30');
五、AJAX方法的封装:
1.创建一个AJAX对象,ie6以下new ActiveXObject('Microsoft.XMLHTTP')。
2.open()方法: 参数:1.打开方式 2.地址 3.是否异步
3.提交,发送请求 send()。
4.等待响应。
六、AJAX的优缺点:
优点:
1.无刷新更新数据;
2.异步方式与服务器通信,不需要打断用户操作,响应更加迅速;
3.前端与后端负载平衡;
4.基于标准被广泛支持;
5.AJAX使web中界面与应用分离,有利于分工合作。
缺点:
1.AJAX干掉了Back和History功能,即对浏览器机制的破坏;
2.AJAX不能很好地支持移动设备;
3.客户端过肥,太多客户端代码造成开发上的成本;
4.AJAX技术就如同对企业数据建立了一个直接通道,使得开发者在不经意间会暴露比以前 更多的数据和服务器逻辑;
5.对搜索引擎支持较弱,如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统 的性能;
6.违背了URL和资源定位的初衷。