一、什么是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和资源定位的初衷。
网友评论