AJAX优势、跨域方案及JSON数据格式和浏览器中JSON对象
ajax 不重新加载整个网页的情况下，更新部分网页的技术
注意：ajax只有在服务器上运行才能生效，我在本地一般用phpstudy
优点：
1、优化用户体验
2、承担了一部分本该服务器端的工作，减轻了服务器端的压力
3、优化了服务器端和浏览器端的传输，减少了带宽占用
缺点：
1、不支持回退按钮
2、对搜索引擎的支持比较弱
3、安全问题，暴露了与服务器端交互的细节
XMLHttpRequest 对象
1、可以向服务器端发起请求并处理响应，而不阻塞用户
2、可以在不更新整个网页的的情况下，更新部分内容
如何使用ajax
1、创建XMLHttpRequest 对象
2、创建一个HTTP请求，并指定方式、URL（必填）
3、设置响应HTTP请求状态变化的函数
4、发起请求
创建XMLHttpRequest 对象的两种方式：(兼容各浏览器）
1、完整版
//封装兼容各浏览器的xhr对象 function createXhr(){ //IE7+，其他浏览器 if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest();//返回xhr对象的实例 }else if(typeof ActiveXObject!="undefined"){ //IE7及以下 //所有可能出现的ActiveXObject版本 var arr=["Microsoft.XMLHTTP","MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP.2.0"]; var xhr; //循环 for(var i=0,len=arr.length;i<len;i++){ try{ xhr=new ActiveXObject(arr[i]);//任意一个版本支持，即可退出循环 break; }catch(e){ } } return xhr;//返回创建的ActiveXObject对象 }else{ //都不支持 throw new Error("您的浏览器不支持XHR对象！"); } }
2、简略版
function createXhr(){ //IE7+，其他浏览器 if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ //IE7以下 return new ActiveXObject("Microsoft.XMLHTTP"); } }
测试是否创建成功
//创建XMLHttpRequest对象 var xhr=createXhr(); console.log(xhr);
.open(method, url, async) 初始化请求并准备发送（只能对同一个域中使用相同端口和协议的URL发送请求）
method ：get 或者 post（ get 更快更简单，但不能发送大量数据，无法使用缓存文件，而且没有 post 稳定和可靠）
url ：必填（文件在服务器上的位置，可以是任何类型，如.txt .xml .asp .php）
async：是否异步，true 异步，false 同步（同步时，服务器处理完成之间浏览器必须等待；异步时，服务器未处理完成前，浏览器可以进行其他操作）
get 准备请求直接加上参数，post 准备请求不在此加参数
//2、get创建请求 xhr.open("get","./server/slider.json?user=cyy&age=25",true); //post创建请求 xhr.open("post","./server/slider.json",true);
响应XMLHttpRequest 对象状态变化的函数
.onreadystatechange 检测状态变化的函数
.readyState==4 响应内容解析完成
.status>=2==&&.status<300 异步调用成功
.status==304 请求资源没有被修改，可以使用浏览器的缓存
发送请求.send()
发送post请求需要传入参数（以对象形式），发送get请求不需要，可以传入null
post请求需要添加HTTP头
.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
//get发送请求 xhr.send(null); //post发送请求 xhr.send({user:"cyy",age:25}); //设置post请求头 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
获取到服务器返回的数据
responseText 服务器返回的数据的字符串形式
responseXML 服务器返回的数据的兼容DOM的文档数据对象（XML形式）
status 返回的状态码（如404表示没找到，200表示已就绪）
status Text 状态码的字符串信息
//获取服务器端返回的数据 console.log(xhr.responseText);
查看network状态
json 数据格式
全称是javascript对象表示法，目的是为了取代笨重的XML格式
json 可以表示以下三种类型的值：
1、简单值
与js语法相同，可以是字符串、数值、布尔值、null，但不支持undefined
字符串必须用双引号表示，不能用单引号
数值必须是十进制，不能是 NaN 和 Infinity
2、对象
键名必须放在双引号中
同一个对象不应该出现两个同名属性
3、数组
数组或者对象最后一个成员，后面不能加逗号
示例：slider.json
{ "code": 0, "slider": [ { "linkUrl": "http://www.baidu.com", "picUrl": "img/cat1.jpg" }, { "linkUrl": "http://www.baidu.com", "picUrl": "img/cat2.jpg" }, { "linkUrl": "http://www.baidu.com", "picUrl": "img/cat3.jpg" }, { "linkUrl": "http://www.baidu.com", "picUrl": "img/cat4.jpg" } ] }
.responseText 返回的数据是字符串，因此需要先转为对象
使用.eval() 函数
//获取服务器端返回的数据 console.log(typeof xhr.responseText);//string //把字符串转为对象 console.log(eval("("+xhr.responseText+")"));
eval("("+xhr.responseText+")"); 的意思是强制转化成json对象，之所以写成 eval“("("+data+")");这种格式，原因是由于json是以”{}”的方式来开始以及结束的。在JavaScript中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式，加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式转化为对象，而不是作为语句来执行，举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句，所以下面两个执行结果是不同的：
console.log(eval("{}"));//undefined
console.log(eval("({})"));//{}
还有 json 对象的两个方法：
1、 JSON.parse() 用于将json字符串转为对象
2、JSON.stringify 将一个值转为JSON字符串
由于eval() 可以执行不符合json格式的代码，有可能会包含恶意代码，所以不推荐使用，建议还是使用.parse()
data=JSON.parse(xhr.responseText);
console.log(data.slider);
最后一步，渲染数据到页面中
放出文件index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{margin:0;padding:0;} .wrap{width:250px;height:250px;margin:50px auto;overflow:hidden;} .banner{height:250px;width:1000px;} .banner a{width:250px;height:250px;display: block;float: left;} .banner a img{width:250px;height:250px;display: block;} </style> <script src="jquery.js"></script> </head> <body> <div class="wrap"> <div class="banner" id="banner"></div> </div> <script> //封装兼容各浏览器的xhr对象 function createXhr(){ //IE7+，其他浏览器 if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest();//返回xhr对象的实例 }else if(typeof ActiveXObject!="undefined"){ //IE7及以下 //所有可能出现的ActiveXObject版本 var arr=["Microsoft.XMLHTTP","MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP.2.0"]; var xhr; //循环 for(var i=0,len=arr.length;i<len;i++){ try{ xhr=new ActiveXObject(arr[i]);//任意一个版本支持，即可退出循环 break; }catch(e){ } } return xhr;//返回创建的ActiveXObject对象 }else{ //都不支持 throw new Error("您的浏览器不支持XHR对象！"); } } //1、创建XMLHttpRequest对象 var xhr=createXhr(),data; //响应XMLHttpRequest状态变化的函数 //onreadystatechange监测状态变化 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//响应内容解析完成 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ //xhr.status>=200&&xhr.status<300 表示交易成功 //xhr.status==304 表示缓存后未发生改变，因此可以从缓存中读取 //获取服务器端返回的数据 //console.log(typeof xhr.responseText);//string //把字符串转为对象 data=JSON.parse(xhr.responseText); //console.log(data.slider); //渲染数据 renderData(); } } } //2、get创建请求 xhr.open("get","./server/slider.json?user=cyy&age=25",true); //get发送请求 xhr.send(null); //post创建请求 //xhr.open("post","./server/slider.json",true); //post发送请求 //xhr.send({user:"cyy",age:25}); //设置post请求头 //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //渲染数据 function renderData(){ var imgs=data.slider,str=""; var banner=document.getElementById("banner"); for(var i=0,len=imgs.length;i<len;i++){ //console.log(imgs[i]); str+="<a href='"+imgs[i].linkUrl+"'><img src='"+imgs[i].picUrl+"'></a>"; } console.log(str); banner.innerHTML=str; } </script> </body> </html>
效果图（大概就是模拟获取轮播图）
jquery的ajax方法：
$.ajax()
$.get()
$.post()
$.getJson()
//jquery的$.ajax() $.ajax({ url:"./server/slider.json", //请求地址 type:"post", //请求方式，默认是get async:true, //异步同步，默认是true异步 dataType:"json", //返回的数据格式 success:function(data){ //响应成功的操作 JQRenderData(data.slider); //data是返回的数据 } }); function JQRenderData(data){ var str=""; $.each(data,function(index,obj){ str+="<a href='"+obj.linkUrl+"'><img src='"+obj.picUrl+"'></a>"; }); $("#banner2").html(str); }
$.each( obj, function(index, value){ } ) 方法，遍历对象或数组
index 数组索引或者对象属性名
value 数组项或者对象属性值
以下是用javascript 和 jqeury 两种方式实现的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> *{margin:0;padding:0;} .wrap{width:250px;height:250px;margin:50px auto;overflow:hidden;} .banner{height:250px;width:1000px;} .banner a{width:250px;height:250px;display: block;float: left;} .banner a img{width:250px;height:250px;display: block;} </style> <script src="jquery.js"></script> </head> <body> <div class="wrap"> <div class="banner" id="banner"></div> </div> <div class="wrap"> <div class="banner" id="banner2"></div> </div> <script> //封装兼容各浏览器的xhr对象 function createXhr(){ //IE7+，其他浏览器 if(typeof XMLHttpRequest!="undefined"){ return new XMLHttpRequest();//返回xhr对象的实例 }else if(typeof ActiveXObject!="undefined"){ //IE7及以下 //所有可能出现的ActiveXObject版本 var arr=["Microsoft.XMLHTTP","MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP.2.0"]; var xhr; //循环 for(var i=0,len=arr.length;i<len;i++){ try{ xhr=new ActiveXObject(arr[i]);//任意一个版本支持，即可退出循环 break; }catch(e){ } } return xhr;//返回创建的ActiveXObject对象 }else{ //都不支持 throw new Error("您的浏览器不支持XHR对象！"); } } //1、创建XMLHttpRequest对象 var xhr=createXhr(),data; //响应XMLHttpRequest状态变化的函数 //onreadystatechange监测状态变化 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//响应内容解析完成 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ //xhr.status>=200&&xhr.status<300 表示交易成功 //xhr.status==304 表示缓存后未发生改变，因此可以从缓存中读取 //获取服务器端返回的数据 //console.log(typeof xhr.responseText);//string //把字符串转为对象 data=JSON.parse(xhr.responseText); //console.log(data.slider); //渲染数据 renderData(); } } } //2、get创建请求 xhr.open("get","./server/slider.json?user=cyy&age=25",true); //get发送请求 xhr.send(null); //post创建请求 //xhr.open("post","./server/slider.json",true); //post发送请求 //xhr.send({user:"cyy",age:25}); //设置post请求头 //xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //渲染数据 function renderData(){ var imgs=data.slider,str=""; var banner=document.getElementById("banner"); for(var i=0,len=imgs.length;i<len;i++){ //console.log(imgs[i]); str+="<a href='"+imgs[i].linkUrl+"'><img src='"+imgs[i].picUrl+"'></a>"; } console.log(str); banner.innerHTML=str; } </script> <script> //jquery的$.ajax() $.ajax({ url:"./server/slider.json", //请求地址 type:"post", //请求方式，默认是get async:true, //异步同步，默认是true异步 dataType:"json", //返回的数据格式 success:function(data){ //响应成功的操作 JQRenderData(data.slider); //data是返回的数据 } }); function JQRenderData(data){ var str=""; $.each(data,function(index,obj){ str+="<a href='"+obj.linkUrl+"'><img src='"+obj.picUrl+"'></a>"; }); $("#banner2").html(str); } </script> </body> </html>
什么是跨域：
同源策略：域名、协议、端口都相同
不符合同源策略的请求，就是跨域
跨域常用的解决方式：JSONP
JSONP ：JSON with padding （填充式json）
JSONP的原理：
直接用XMLHttpRequest 访问不同域上的数据是不可以的，但是可以在页面上引入不同域的 js 脚本（如 src 或者 href ）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="jquery.js"></script> </head> <body> <script> /* 封装JSONP 浏览器端给服务器端发送请求： http://www.baidu.com?jsonp=abc 服务器端响应请求： abc(json数据) */ function myJSONP(url,callback){ if(!url) return;//如果没有url，则停止 //用数组存储10个字母 var arr=["a","b","c","d","e","f","g","h","i","j"], i1=Math.floor(Math.random()*arr.length),//随机生成索引 i2=Math.floor(Math.random()*arr.length), i3=Math.floor(Math.random()*arr.length), name="mydata"+arr[i1]+arr[i2]+arr[i3];//随机生成的请求函数名（属性名） cbname="myJSONP."+name;//必须是函数名.请求函数名 //跨域url处理 //将请求函数名作为最后一个参数传递 if(url.indexOf("?")===-1){ //原来没有参数 url+="?jsonp="+cbname;//参数名可自定义（此处是jsonp） }else{ //原来有参数 url+="&jsonp="+cbname; } console.log(url); //动态创建script标签 var script=document.createElement("script"); //定义被脚本执行的回调函数 myJSONP[name]=function(data){ try{ callback && callback(data);//如果有回调，则执行回调 }catch(e){ //报错时 }finally{ //由于每次请求都会生成函数和script标签，长此以往会污染函数 //因此每次结束时都要删除函数及变量 delete myJSONP[name]; script.parentNode.removeChild(script); } } script.src=url; document.getElementsByTagName("head")[0].appendChild(script); } //发送跨域请求 myJSONP("http://class.imooc.com/api/jsonp",function(data){ console.log(data); }); </script> </body> </html>
页面返回的数据
url演示
