http://www.imooc.com/code/13468 基础练习
http://www.imooc.com/video/5644 !ajax!
常用 for in循环 for(var x in json)
var json = JSON.parse(str); //把字符串解析成 JSON对象
var json = eval("(" + str + ")"); //把括号内字符当代码运行
var str1 = JSON.stringify(json); //将JSON转换成字符串
JSON.parse/eval():把它当成一段代码来看,来运行或者可以把字符串中的数组转换成真的数组;在要运行的东西里面加括号就会把它当成一个对象来看(在解析json时) 例:eval("("+json+")");
ajax:读取服务器下的文件
乱码:由于html和文件编码不一致
作用:与服务器做交互 在不刷新界面的情况下更改页面内容
异步:ture 全部刷新 有缓存
同步: false 一个一个刷新 (默认)
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true
get:让数据在地址栏显示出来 不安全 数据量 2K 分享和调试时用get
post:不让数据显示出来 相对安全 数据量:基本无限制
*在IE下有时候会出现只有第一次读取的值正常,后面的值都不正常,是因为AJAX缓存的问题
解决方法如下:
1、在服务端加 header("Cache-Control: no-cache, must-revalidate");(如php中)
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0");
3、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache");
4、在 Ajax 的 URL 参数后加个随机数 如 url=url+"&"+Math.random();
5、第五种方法和第四种类似,在 URL 参数后加上 "?timestamp=" + new Date().getTime();
6、用POST替代GET:不推荐
这样每次请求的url都不一样(ajax的缓存便不起作用)确保每次加载的数据是最新的。
AJAX
1 function ajax(method, url, data, fn, fn2) { 2 3 // 1 创建http请求对象 4 5 var oAjax = null; 6 7 if (window.XMLHttpRequest) { 8 9 oAjax = new XMLHttpRequest(); //IE7+, Firefox, Chrome, Opera, Safari 10 11 } else { 12 13 oAjax = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 14 15 } 16 17 // 2 连接服务器 18 19 oAjax.open(method, url + "?" + data, true); 20 21 // 3 发送 22 23 if (method == "post") { 24 25 oAjax.send(data); 26 27 } else { 28 29 oAjax.send(); 30 31 } 32 33 // 4 处理响应结果 34 35 oAjax.onreadystatechange = function () { 36 37 // on readystate change 当 状态值 改变 的时候发生的事件 38 39 if (oAjax.readyState == 4) { 40 41 //readtState:Ajax的工作状态 有5个值(0初始化,1载入,2载入完成,3解析,4完 成) 42 43 if (oAjax.status == 200) { //status:服务器状态 HTTP状态码 44 45 fn(oAjax.responseText);//请求成功函数 46 47 //responseText: ajax请求返回的值就存放到这个属性下面 48 49 responseXML: 解析XML shi 50 51 } else { 52 53 if (fn2) {//请求失败函数 54 55 fn2(); 56 57 } 58 59 } 60 61 } 62 63 } 64 65 }
AJAX 传网页中数据 到后台
防止用户重复提交
对于ajax请求时用户体验的改善, -loading
beforeSend()
Complete()