jQuery：JSON与AJAX基础

一.Ajax与JSON

（一）关于AJAX

1.什么是Ajax

Ajax的全称是Asynchronous JavaScript and XML（异步的JavaScript和XML）,它并不是一种新的编程语言，而是几种原有技术的结合体）。
ajax是一种无需重新加载整个网页的情况下，能够更新部分网页的技术。

2.Ajax的优缺点

优点：
（1）通过异步模式，提升了用户体验。
（2）优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。
（3）Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。
	   
缺点：
（1）不支持浏览器back按钮。
（2）安全问题AJAX暴露了与服务器交互的细节。
（3）对搜索引擎的支持比较弱。

（二）XMLHttpRequest对象

1.什么是XMLHttpRequest

是一种支持异步请求的技术，它是Ajax的核心。

2.XMLHttpRequest的作用

（1）可以向服务器提出请求并处理响应，而不阻塞用户。
（2）可以在页面加载以后进行页面的局部更新。

3.如何使用Ajax

（1）创建XMLHttpRequest对象，也就是创建一个异步调用对象。

//封装浏览器通用的xhr对象，兼容各个版本
        function createXHR(){
            //判断浏览器是否将XMLHttpRequest作为本地对象实现，
            //针对IE7,firefox,opera等
            if(typeof XMLHttpRequest !="undefined"){
                return new XMLHttpRequest();//返回实例
            }else if(typeof ActiveXObject!="undefined"){
                //将可能出现的ActiveXObject版本放在一个数组中
                var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0',
                'MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0',
                'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0']
                //遍历创建XMLHttpRequest
                var len=xhrArr.length,xhr;
                for(var i=0;i<len;i++){
                    try{
                        //创建XMLHttpRequest
                        xhr=new ActiveXObject(xhrArr[i]);
                        break;//支持就停
                    }
                    catch(ex){

                    }
                }
                return xhr;
            }else{
                throw new Error('No XHR object availabel.');//都不支持抛出错误信息
            }
        }
        //调用
        var xhr=createXHR();
        console.log(xhr);

（2）创建一个新的HTTP请求，并指定该HTTP请求的方法、URL。

如何创建http请求：
语法：open(method,url,async)
功能：创建HTTP请求，规定请求的类型、URL及是否异步处理请求。
参数说明：
①method：请求类型，GET或POST。
②url:文件在服务器上的位置。
③async:true（异步)或false(同步）。

注意事项：
①open方法不会向服务器发送真正请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错。
②url参数是open()方法中唯一一个必须要指定的参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如.txt和.xml，或者服务器脚本文件，如.asp和.php（在传回响应之前，能够在服务器上执行任务）。
③传输方式：GET与POST的区别
与POST相比，GET更简单也更快（默认请求方法），并且在大部分情况下都能用。
然而，在以下情况中，必须使用POST请求：
	a.无法使用缓存文件（更新服务器上的文件或数据库）。
	b.向服务器发送大量数据（POST没有数据量限制）。
	c.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。
④同步与异步的区别：
同步：提交请求———>等待服务器处理———>处理完毕返回（这个期间客户端浏览器不能干任何事）
异步：请求通过事件触发——>服务器处理（这时浏览器仍然可以做其它事情）——>处理完毕
说明：async是一个布尔值。如果是异步通信方式（true），客户机就不等待服务器的响应；如果是同步方式（false），客户机就要等到服务器返回消息后才去执行其他操作。

xhr.open("get","./server/jsonxiaxie.txt");

（3）设置响应HTTP请求状态变化的函数。

在ajax中有状态值和状态码readyState，和状态码status

①readyState是XMLHttpRequest对象的一个属性，用来标识当前XMLHttpRequest对象处于什么状态。
readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义。
	0：初始化，XMLHttpRequest对象还没有完成初始化。
	1：载入，XMLHttpRequest对象开始发送请求。
	2：载入完成，XMLHttpRequest对象的请求发送完成。
	3：解析，XMLHttpRequest对象开始读取服务器的响应。
	4：完成，XMLHttpRequest对象读取服务器响应结束。

②status是XMLHttpRequest对象的一个属性，表示响应的HTTP状态码，就是下面我举的哪些常用状态码
 常见的状态码：
	200（成功） :服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
	304（未修改）:自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。如果网页自请求者上次请求后再也没有更改过，您应当将服务器配置为返回此响应。
	404（未找到）:服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。

③二者的区别：
readyState，是指运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤，使用“ajax.readyState”获得。
status，是指无论AJAX访问是否成功，由HTTP协议根据所提交的信息，服务器所返回的HTTP头信息代码，使用“ajax.status”获得。

//响应XMLHttpRequest对象状态变化的函数
        //onreadystatechange在readyState属性发生改变时触发
        xhr.onreadystatechange=function(){
            //异步调用成功,响应内容解析完成，可以在客户端调用
            if(xhr.readyState===4){//响应内容解析完成
                //异步调用成功,304表示自从上次请求后，请求的网页未被修改过
                if((xhr.status>=200 && xhr.status<300)||xhr.status===304){
                    //获取服务器返回的数据
                    
                }
            }
        }

（4）发送HTTP请求。

如何发送请求：

 - 语法：send(string) 
 - 功能：将请求发送到服务器 
 - 参数说明：string仅用于post请求
 - 注意事项：仅在POST请求时可以传入参数，不需要则发送null,在调用send方法之后请求被发往服务器。

在使用post请求的时候，需要添加HTTP头：

 - 如果需要像HTML表单那样post数据，需使用setRequestHeader()来添加HTTP头，然后在send()方法中规定希望发送的数据。
 - 语法：xmlhttp.setRequestHeader(header,value)
 - 使用：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");--写死的值

//创建请求
        xhr.open("post","./server/jsonxiaxie.txt",true);
        //发送请求
        xhr.send(null);
        // xhr.send({user:'zhangsan',id6});// 如果创建的是类型的请求，传参字段写在地址后面，用？分隔
       //设置http头部信息
        // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  

（5）获取异步调用返回的数据。

在设置响应HTTP请求状态变化的函数中去写。

在收到响应后响应数据会填充到XHR对象的属性，有四个相关属性会被填充：
responseText：从服务器进程返回数据的字符串形式。（用这个字符串的形式比较多）
responseXML：从服务器进程返回的DOM兼容的文档数据对象。
status：从服务器返回的数字代码，如404（未找到）和200（已就绪）。
status Text：伴随状态码的字符串信息。

 xhr.onreadystatechange=function(){
            //异步调用成功,响应内容解析完成，可以在客户端调用
            if(xhr.readyState===4){//响应内容解析完成
                //异步调用成功,304表示自从上次请求后，请求的网页未被修改过
                if((xhr.status>=200 && xhr.status<300)||xhr.status===304){
                    //获取服务器返回的数据
                    data=eval("("+xhr.responseText+")");
                    console.log(data.slider);

                }
            }
        }

（6）使用JavaScript和DOM实现局部刷新。

 xhr.onreadystatechange=function(){
            //异步调用成功,响应内容解析完成，可以在客户端调用
            if(xhr.readyState===4){//响应内容解析完成
                //异步调用成功,304表示自从上次请求后，请求的网页未被修改过
                if((xhr.status>=200 && xhr.status<300)||xhr.status===304){
                    //获取服务器返回的数据
                    data=JSON.parse(xhr.responseText);
                    //渲染数据到页面中
                    renderDataToDom();
                }
            }
        }

//渲染数据
        function renderDataToDom(){
            var img=data.slider,i,str="",
                len=img.length;
                banner=document.getElementById("banner");
            for(var i=0;i<len;i++){
                str+='<a href="'+img[i].linkUrl+'"><img src="'+img[i].picUrl+'"></a>';
                banner.innerHTML=str;
            }
        }

（三）json

1.什么是JSON

JSON(javascript object notation)全称是javascript对象表示法，它是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据，2001年由Douglas Crockford提出，目的是取代繁琐笨重的XML格式。

2.JSON的语法规则

json的语法可以表示以下三种类型的值：
（1）简单值：

①简单值使用与JavaScript相同的语法，可以在JSON中表示字符串、数值、布尔值和null。
②字符串必须使用双引号表示，不能使用单引号，数值必须以十进制表示，且不能使用NaN和Infinity。

说明：JSON不支持JavaScript中的特殊值undefined。

（2）对象：

①对象作为一种复杂数据类型，表示的是一组有序的键值对儿，而每个键值对儿中的值可以是简单值，也可以是复杂数据类型的值。
②JSON中对象的键名必须放在双引号里面，因为JSON不是javascript语句，所以没有末尾的分号。

说明：同一个对象中不应该出现两个同名属性。

（3）数组：

数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。

说明：数组或对象最后一个成员的后面，不能加逗号。

3.JSON对象

JSON对象提供了两个方法，用来进行字符串和对象之间的转换：
(1)parse()

语法：JSON.parse()
功能：用于将JSON字符串转化成对象。

(2)stringify()

语法：JSON.stringify()
功能：用于将一个值转为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原。

xhr.onreadystatechange=function(){
            //异步调用成功,响应内容解析完成，可以在客户端调用
            if(xhr.readyState===4){//响应内容解析完成
                //异步调用成功,304表示自从上次请求后，请求的网页未被修改过
                if((xhr.status>=200 && xhr.status<300)||xhr.status===304){
                    //获取服务器返回的数据
                    data=JSON.parse(xhr.responseText);
                    //渲染数据到页面中
                    renderDataToDom();
                }
            }
        }

总结：

①JSON之所以流行，是因为可以把JSON数据结构解析为有用的javascript对象。
②JSON对象的stringify()和parse()这两个方法可以分别把用于Javascript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值。
③JavaScript的eval()类似于JSON.parse()方法，可以把json字符串转换为json对象，但是，eval()可以执行不符合JSON格式的代码，有可能会包含恶意代码，所以尽量少用。

（四）JQuery的Ajax方法

• $.ajax()

//jquery的$.ajax()
    $.ajax({
        url:"./server/jsonxiaxie.json",//请求地址
        type:"post",                   //请求方式
        async:true,                    //同步异步
        dataType:'json',               //数据格式
        success:function(imgData){            //请求成功的回调
            JQrenderDataToDom(imgData.slider);
        }
    })
    //渲染数据
    function JQrenderDataToDom(data){
        var str="";
        $.each(data,function(index,obj){
            str+='<a href="'+obj.linkUrl+'"><img src="'+obj.picUrl+'"></a>';
        })
        $("#banner_jq").html(str);
    }

• $.get()
• $.post()
• $.getJson()

二.JSONP跨域

(一)关于跨域

1.什么是同源策略

所谓同源是指：域名、协议、端口均相同

2.什么是跨域

跨域是指从一个域名的网页去请求另一个域名的资源，严格一点的定义是：只要协议、域名、端口有任何一个的不同，就被当做跨域。

3.如何解决跨域

• 跨资源共享（CORS）
• 使用JSONP(常用)
• 修改document.domain
• 使用window.name

(二)如何使用JSONP解决跨域

1.什么是JSONP

JSONP是JSON with Padding(填充式json)的简写，是应用JSON的一种新方法，也是一种跨域解决方案。

2.JSONP的组成

JSONP由两部分组成：回调函数和数据。
回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

3.JSONP的原理

直接用XMLHttpRequest请求不同域上的数据时，是不可以的。
但是，在页面上引入不同域上的js脚本却是可以的，jsonp正是利用这个特性来实现的。

(三)JSONP跨域的实现

1.跨域其实就是利用可以访问别的域名下的属性来实现的，比如src和href，这些属性是不分同源不同源的。
动态创建一个script标签，通过script标签的src属性引入url，来实现动态的跨域。

jsonp是json数据的外边填充了一个回调函数。
在jsonp的函数中要传入url地址，这个url地址要稍做处理，后面要加上json的回调函数名称，比如callback=abc。
callback这个名称可以任意取，后面的值是回调函数名称，为了避免冲突，需要随机生成。

//封装JSONP
 function getJSONP(url,callback) {
       if(!url){
           return;
       }
       //http://www.baidu.com?id=6$callback=def
        //http://www.baidu.com?callback=def
        //def(json数据)

       //声明数组来随机生成函数名
       var a=['a','b','c','d','e','f','g','h','i','j'],
            r1=Math.floor(Math.random()*10),
            r2=Math.floor(Math.random()*10),
            r3=Math.floor(Math.random()*10),
            name='getJSONP'+a[r1]+a[r2]+a[r3],
            cbname='getJSONP.'+name;

2.随机生成函数名是为了确保唯一性。因为 JSONP 的回调实际上是创建了一个临时的函数供加载的 js 调用。
如果回调函数不是随机的，那在连续JSONP请求时，后发出的请求回调函数会覆盖掉之前的，返回的数据会出问题。

name上加的前缀可以任意取名，这里加的前缀是getJSONP和函数同名了，但是不是说一定要和函数名一致，而是可以任意命名。
回调函数名传给服务器之后，这个回调函数名是要作为getJSONP函数的一个属性的
所以cbname=‘getJSONP.’+name; 
回调函数名前面拼接的一定得是‘getJSONP.’和getJSONP函数同命，表示获取getJSONP函数的属性。

//封装JSONP
   function getJSONP(url,callback) {
       if(!url){
           return;
       }
       //http://www.baidu.com?id=6$callback=def
        //http://www.baidu.com?callback=def
        //def(json数据)

       //声明数组来随机生成函数名
       var a=['a','b','c','d','e','f','g','h','i','j'],
            r1=Math.floor(Math.random()*10),
            r2=Math.floor(Math.random()*10),
            r3=Math.floor(Math.random()*10),
            name='getJS'+a[r1]+a[r2]+a[r3],
            cbname='getJSONP.'+name;
            //判断url地址中是否含有？号
            if(url.indexOf('?')===-1){
                url+='?jsonp='+cbname;
            }else{
                url+='&jsonp='+cbname;
            }

3.需要对url地址判断一下是否含有问号，然后分别决定怎么拼接上回调函数名称。

getJSONP函数的精华在于定义被脚本执行的回调函数，定义完之后要被销毁。	
函数内不要进行if判断，而是用try catch来尝试执行更好。
每跨域一次，都要生成一个回调函数，跨域多了生成的回调函数也多，会污染环境，所以在跨域执行完之后要把回调函数删掉。所以用try catch会更适合。
finally 语句在 try 和 catch 之后无论有无异常都会执行。这里不管函数有没有执行成功，都要删除回调函数和script标签，避免污染环境。
注意： catch 和 finally 语句在语法上都是可选的，但你在使用 try 语句时必须至少使用一个。

//封装JSONP
   function getJSONP(url,callback) {
       if(!url){
           return;
       }
       //http://www.baidu.com?id=6$callback=def
        //http://www.baidu.com?callback=def
        //def(json数据)

       //声明数组来随机生成函数名
       var a=['a','b','c','d','e','f','g','h','i','j'],
            r1=Math.floor(Math.random()*10),
            r2=Math.floor(Math.random()*10),
            r3=Math.floor(Math.random()*10),
            name='getJS'+a[r1]+a[r2]+a[r3],
            cbname='getJSONP.'+name;
            //判断url地址中是否含有？号
            if(url.indexOf('?')===-1){
                url+='?jsonp='+cbname;
            }else{
                url+='&jsonp='+cbname;
            }
            //动态创建script标签
            var script=document.createElement('script');
            //定义被脚本执行的回调函数
            getJSONP[name]=function(data){
                try{
                    callback && callback(data);
                }catch(e){
                    //
                }
                finally{
                    //最后删除该函数及script标签
                    delete getJSONP[name];
                    script.parentNode.removeChild(script);
                }
            }
            //定义script中的src
            script.src=url;
            document.getElementsByTagName("head")[0].appendChild(script);

   }

   getJSONP("http://class.imooc.com/api/jsonp",function(data){
        console.log(data)
   });

ajax和jsonp的区别：

相同点：都是请求一个url

不同点：①ajax的核心是通过xmlHttpRequest获取内容
	    ②jsonp的核心则是动态添加<script>标签来调用服务器 提供的js脚本。