标签：
1. 什么是Ajax ?
a) 无刷新的从服务器上读取数据；
2. 关于浏览器缓存：
a) 缓存机制：根据地址来缓存，同样地址只读一次；可以通过Math.random()或new Date().getTime()解决。
b) 解决缓存困扰：在文件名后加上一个时间戳参数；保存每次读取文件的路径都不一样，这样浏览器就不会去缓存中拿而去读新的；
3. Ajax请求动态数据：
a) 请求JSON文件；
b) Ajax 从服务器上所读取的所有东西都是以文本的形式存在的；
c) eval的使用，将返回的string转换成arr,或json;
d) 配合DOM使用；
4. eval(str):
a) 接受一个字符串作为参数(服务器读取的数据都是string类型)，这个字符串里面可以放任何JS代码；
b) eval可以计算字符串里的值；对于json要加();
<script> window.onload=function(){ var oBtn=document.getElementById("btn"); oBtn.onclick=function(){ //无刷新的从服务器中取数据 ajax(‘b.txt?t=‘+Math.random(),function(str){ //Math.random()解决缓存，success成功之后的回调函数 var json=eval(‘(‘+str+‘)‘); //str--json console.log(json.a); },function(){ //error失败之后的回调函数 alert(‘失败了‘); }); }; } </script>
5. Ajax的原理：
a) HTTP 请求：
i. GET方式：安全性低、容量小，有缓存，适于分享，适合获取数据；（如： 浏览帖子）
ii. POST方法：安全性稍好,容量2G,无缓存,适合上传数据；（如：用户注册）
6. Ajax请求服务器数据的4个步骤：
a) 创建一个Ajax对象 （买个手机）；
i. 非IE6 ： new XMLHttpRequest();
ii. IE6 : new ActiveXObject("Microsoft XMLHTTP");
b) 连接服务器（拨号）；
c) 发送请求，告诉服务器要什么（说话）；
d) 接收返回值（听）；
7. Ajax对象创建的兼容处理：
a) 用if (window.XMLHttpRequest) 取代if (XMLHttpRequest)
b) 原理：
i. 用一个不存在的变量： 出错；
ii. 用一个不存在的属性：undefined；
8. Ajax连接服务器：
a) oAjax.open(方法，url, 是否为异步);
b) 方法：大多用”Get”;
c) 同步与异步：
i. 同步：任何两件事不能一块儿做；
ii. 异步： 多件事儿可以一起进行；Ajax天生就该工作在异步模式下的；
9. Ajax发送请求：
a) oAjax.send();
10.Ajax接收服务器的返回信息：
a) oAjax.onreadystatechange 事件：
i. 它类似于window.onload;
ii. 用来监控请求状态；
iii. 是当客户端和服务器那边有通信发生或有状态变化的时候会来调用；
iv. 客户端和服务器的通信不是一步就完成的；
v. oAjax.readyState属性：告诉我们客户端和服务器的通信发生到哪一步了； 4 代表完成；
vi. oAjax.readyState == 4 ， 只代表完成，不代表成功；
vii. oAjax.status == 200 ， 代表成功；
viii. oAjax.status , 400多是客户端错误， 500多是服务器错误， 300多是重定向；
ix. oAjax.responseText , 就是取得服务器返回的内容；
11.完整的ajax.js:
function json2str(json){ //将json转str json.t=Math.random(); var arr=[]; for(var name in json){ arr.push(name+‘=‘+encodeURIComponent(json[name])); //encodeURIComponent兼容汉字 } return arr.join(‘&‘); } function ajax(url,data,success,error){ //data是url？后面的东西 //success成功之后的回调函数 //1.创建一个ajax对象 if(window.XMLHttpRequest){//可以用undefined作为判断条件,但不能用error作为判断条件;变量不定义,加window相当于undefinded; var oAjax = new XMLHttpRequest(); //用于非ie6 }else{ var oAjax = new ActiveXObject(‘Microsoft.XMLHttp‘);//用于ie6;Microsoft公司的插件 } //2.建立连接 是否异步 oAjax.open(‘GET‘,url+‘?‘+json2str(data),true); //3.发送 oAjax.send(); //4.接收 oAjax.onreadystatechange = function(){ //网络状态readyState if(oAjax.readyState == 4){ //接收完成 0,初始化1,建立连接2.发送3.接收4.完成 //http的状态status if(oAjax.status>=200&&oAjax.status<300||oAjax.status == 304){ //接收成功 200-300接收成功 304未修改 404未找到 //从服务器返回的文本 success&&success(oAjax.responseText); //如果成功,服务器返回的文本内容 }else{ error&&error(oAjax.status);//如果错误,服务器返回的错误码 } } }; }
标签：
原文地址：http://www.cnblogs.com/yang0902/p/5719964.html
