摘要：之所以不能跨域其實(shí)是因?yàn)槭艿酵床呗缘南拗?，只能讓它訪問同源下的數(shù)據(jù)，不能訪問不同源下的數(shù)據(jù)同源策略每個(gè)網(wǎng)站只能讀取同一來源的數(shù)據(jù)，這里的同一來源指的是主機(jī)名域名協(xié)議和端口號(hào)的組合。

一、Ajax的概念

Ajax是一種技術(shù)方案，但并不是一種新技術(shù)。它依賴的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對(duì)象，是這個(gè)對(duì)象使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)。

Ajax:Asynchronous JavaScript and XML(異步j(luò)s和XML)

異步j(luò)s：js的代碼都是至到而下執(zhí)行的，如果一塊代碼沒有執(zhí)行完畢，那后面的代碼就不會(huì)執(zhí)行。異步就是ajax可以做到不按順序執(zhí)行;

ajax不光能夠處理XML格式的數(shù)據(jù)，還可以處理json、數(shù)組、字符串類型的數(shù)據(jù);

XML：存儲(chǔ)數(shù)據(jù)的一種格式:

//XML的格式類型；
大力丸
18
714206204
daliwan@126.com

ajax到底能干嘛：

js與后端進(jìn)行數(shù)據(jù)交互的一種技術(shù)，通過請(qǐng)求協(xié)商好的接口，來獲取到想要的數(shù)據(jù)

優(yōu)點(diǎn)

傳輸數(shù)據(jù)時(shí)候會(huì)在本頁面請(qǐng)求服務(wù)器，不用跳轉(zhuǎn)頁面，從而減輕服務(wù)器壓力。做到實(shí)時(shí)驗(yàn)證，減少用戶返工率并且優(yōu)化用戶體驗(yàn)

二、Ajax數(shù)據(jù)交互流程

創(chuàng)建一個(gè)ajax對(duì)象；

var val=inputs[0].value;
//下面這個(gè)是ajax對(duì)象；
var ajax=new XMLHttpRequest;

填寫請(qǐng)求地址；

//open是ajax對(duì)象上的一個(gè)方法；

ajax.open("get","php/get.php?user="+val,true);

//第一個(gè)參數(shù)決定是get還是post方式；
//第二個(gè)參數(shù)是請(qǐng)求地址，并且把要提交的加上去；
//第三個(gè)參數(shù)true代表異步，false代表同步；

發(fā)送請(qǐng)求；

ajax.send();

等待服務(wù)器響應(yīng)；

ajax.onload=function(){
    //響應(yīng)好了就接受數(shù)據(jù)；
    span.innerHTML=ajax.responseText;
}

接收數(shù)據(jù)；

三、返回的數(shù)據(jù)類型

ajax.responseText這是服務(wù)器返回的值：
1.肯定是字符串，有的看起來是對(duì)象，其實(shí)是json的形式；

2.用JSON的方法：JSON.parse(aja.responseText)轉(zhuǎn)成真正的對(duì)象就可以用對(duì)象操作的方法去操作了；

四、XHR的兼容問題

XMLHttpRequest是標(biāo)準(zhǔn)瀏覽器下的升級(jí)版本，IE6這些瀏覽器不支持；

IE6下用ActiveXObject(Microsoft.XMLHTTP)

//寫一個(gè)兼容性的函數(shù)，實(shí)現(xiàn)跨瀏覽器；
var ajax=null;

if(window.XMLHttpRequest){
    ajax=new XMLHttpRequest;
}else{
    ajax=new ActiveXObject(Microsoft.XMLHTTP)
};

五、get和post的區(qū)別

get方式

通過地址欄信息進(jìn)行數(shù)據(jù)傳輸，傳輸?shù)拇笮∮邢拗疲?/p>

不安全，用戶的所有信息都會(huì)暴露出來；

拼接數(shù)據(jù)的時(shí)候要用encodeURI轉(zhuǎn)一下碼，不然有中文就會(huì)亂碼；

> `encodeURI`把文字轉(zhuǎn)成符號(hào)；

decodeURI把符號(hào)轉(zhuǎn)成文字；

不用設(shè)置請(qǐng)求頭；

數(shù)據(jù)拼接在open方法里；

會(huì)有緩存問題；

post方式

通過send向服務(wù)器傳輸數(shù)據(jù)，理論上來說是沒有長(zhǎng)度或體積限制；

相對(duì)來說安全，因?yàn)椴恢苯颖┞队脩粜畔ⅲ?/p>

不用轉(zhuǎn)碼，已經(jīng)通過請(qǐng)求頭設(shè)置了數(shù)據(jù)格式，不會(huì)有亂碼；

數(shù)據(jù)要拼接在send方法里;

沒有緩存問題

在send()的前面需要設(shè)置一個(gè)請(qǐng)求頭（不設(shè)置要出錯(cuò)）；

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//創(chuàng)建對(duì)象；
var ajax=null;
if(window.XMLHttpRequest){
    ajax=new XMLHttpRequest;
}else{
    ajax=new ActiveXObject(Microsoft.XMLHTTP)
};
//填寫請(qǐng)求地址；
ajax.open("post","php/post.php",true);
//發(fā)送請(qǐng)求，要在send前設(shè)置一下請(qǐng)求頭；
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("user="+val)
//下面的步驟和get方法是一樣的；

六、同步與異步

同步

1、當(dāng)send()方法調(diào)用后會(huì)等待服務(wù)器返回信息，如果服務(wù)器一直沒有響應(yīng)，就會(huì)阻塞后面的代碼，后面的代碼就不會(huì)執(zhí)行
2、后面的代碼執(zhí)行受前面代碼的影響，前面的代碼沒跑通，后面的代碼就不會(huì)執(zhí)行

異步

1、當(dāng)send()方法調(diào)用后，就會(huì)執(zhí)行后面的代碼，不用等待服務(wù)器的響應(yīng)
2、后面的代碼執(zhí)行不受前面代碼的影響

七、onreadystatechange與onload

ajax.readStateajax的運(yùn)行步驟（第一步捕捉不到）

它的值為4的話說明AJAX已經(jīng)運(yùn)行完畢；

0 代表初始化，還沒調(diào)用open方法；

1 代表載入，已經(jīng)調(diào)用send方法，正在發(fā)送請(qǐng)求；

2 代表載入完成，send方法已完成，已收到全部響應(yīng)內(nèi)容；

3 代表正在解析響應(yīng)內(nèi)容；

4 代表響應(yīng)完成，可以在客戶端調(diào)用了；

ajax.status(狀態(tài)碼)

200是成功的；

404是錯(cuò)誤的；

onreadStateChange

readstate的值發(fā)生變化就會(huì)觸發(fā)這個(gè)事件；

onload

所有請(qǐng)求成功完成后觸發(fā)，此時(shí)的readstata的值為4
IE(6,7,8)不支持

現(xiàn)在這個(gè)方法逐漸取代onreadstatechange這個(gè)方法了

ajax.onreadstatechange=function(){
    if(ajax.readstate==4){          //服務(wù)區(qū)響應(yīng)完成了；
        if(ajax.status==200){       //服務(wù)器正常；
            //這里放要執(zhí)行的代碼；
        }
    }
}

八、封裝ajax函數(shù)

封裝ajax函數(shù)，傳進(jìn)函數(shù)里面的參數(shù)其實(shí)是一個(gè)對(duì)象；

對(duì)象中包包含以下幾種數(shù)據(jù)，包含在一個(gè)對(duì)象里面：

URL：發(fā)送請(qǐng)求的地址，需要把請(qǐng)求發(fā)給誰；

method：發(fā)送請(qǐng)求的方法：get或者post；

dataType：響應(yīng)之后返回的數(shù)據(jù)類型：JSON,XML,STRING；

data：請(qǐng)求的時(shí)候傳的數(shù)據(jù)（它是一個(gè)對(duì)象需要處理格式）；

succ：成功之后的callback；

fail：失敗后的callback；

function ajax(json){
    //默認(rèn)參數(shù)；
    var settings={
        url:"",
        method:"get",
        data:{},
        dataType:"json",
        succ:null,
        fail:null
    }
    
    //用戶傳的參數(shù)覆蓋默認(rèn)參數(shù)；
    for (var attr in json){
        settings[attr]=json[attr];
    }
    
    //把data拼成正確的格式；
    var arr=[];
    for (var attr in settings.data){
        arr.push(attr+"="+settings.data[attr]);
    }
    settings.data=arr.join("&");
    
    //聲明變量；
    var ajax=window.XMLHttpRequest?new XMLHttpRequest():ActiveXObject("Microsoft.XMLHTTP");
    
    //設(shè)置請(qǐng)求方式；
    //請(qǐng)求地址里面的new Date()方法，是為了設(shè)置不同的時(shí)間戳去解決緩存的問題；
    if(settings.method.toLocalLowCase==="get"){
        ajax.open("get",settings.url+"?"+settings.data+"&"+new Date().getTime(),true);
        ajax.send();
    }else{
        ajax.open("post",settings.url,true);
        //注意要設(shè)置一個(gè)請(qǐng)求頭；
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        ajax.send(settings.data);
    }
    
    //設(shè)置完成時(shí)間的兼容性；IE6下是沒有ajax.onload方法的；
    if(typeof ajax.onload==="undefined"){
        ajax.onreadystatechange=ready;
    }else{
        ajax.onload=ready;
    }
    
    //封裝一個(gè)ready()函數(shù)；
    function ready(){
        if(ajax.readystate==4){
            if(ajax.status==200){
                //用一個(gè)switch判斷返回值得類型；
                switch(settings.dataType.toLocalLowCase()){
                    case "string"   : 
                        settings.succ(ajax.responseText);
                        break;
                    case "json"     :
                        //把responsetext轉(zhuǎn)成json格式；
                        setting.succ(JSON.parse(ajax.responseText));
                        break;
                    case "xml"      :
                        settings.succ(ajax.responseXml);
                        break;
                }
            }else{
                settings.fail(ajax.status);
            }
        }
    }
}

要注意第57行的JSON.parse在低版本的瀏覽器中是不兼容的，需要下載一個(gè)json2.js的文件解決這個(gè)問題；

九、ajax上傳

上傳只能用 post 的方法，后臺(tái)要處理中文相關(guān)的問題；

ajax.upload.onprogress 上傳的進(jìn)度事件；就是上傳的時(shí)候要做的事情；

ev.loaded 已經(jīng)上傳的文件大??；

ev.total 總的文件大??；

通過這個(gè)可以做出來一個(gè)上傳的進(jìn)度條；
用H5中的這個(gè)API;

files 上傳的選中的文件列表；

1.包括文件大小、類型、最后修改的時(shí)間等等；

FormData 用來創(chuàng)建與表單格式相同的數(shù)據(jù)，它是XHR的二級(jí)定義，是一個(gè)二進(jìn)制的數(shù)據(jù)；低版本的瀏覽器不支持；

**我自己對(duì)于FormData的理解：
FormDate可以new出來一個(gè)實(shí)例，這個(gè)實(shí)例可以繼承它身上的append方法；這個(gè)操作放在ajax.open和ajax.send之間**

var formdata=new FormData();

    //下面通過循環(huán)把選中的文件里面的額東西添加到這個(gè)對(duì)象身上；

for(var i=0;i
十、跨域的問題
概念：
兩個(gè)不同域名下的數(shù)據(jù)進(jìn)行交互。Ajax之所以不能跨域其實(shí)是因?yàn)閄MLHttpRequest受到同源策略的限制，只能讓它訪問同源下的數(shù)據(jù)，不能訪問不同源下的數(shù)據(jù);
同源策略：
每個(gè)網(wǎng)站只能讀取同一來源的數(shù)據(jù)，這里的同一來源指的是主機(jī)名(域名)、協(xié)議(http/https)和端口號(hào)的組合。在沒明確授權(quán)的情況下，不能讀寫對(duì)方的資源，它是瀏覽器最核心也最基本的安全功能；
只要有一個(gè)不一樣就跨域；

解決跨域的方法：

在標(biāo)準(zhǔn)瀏覽器下XMLHttpRequest配合后端設(shè)置一個(gè)請(qǐng)求權(quán)限，在php里寫上    header("Access-Control-Allow-Origin:*");
服務(wù)器代理，缺點(diǎn)是后端開發(fā)的成本大；
iframe、flash、postMessage、WebSocket；


這些方法都不是最優(yōu)的，下面提供一種方法叫做 jsonp
十一、jsonp

jsonp的概念（json+padding）

通過script標(biāo)簽引入某些數(shù)據(jù)，是同步模式的，用script標(biāo)簽做跨域的時(shí)候，不建議將數(shù)據(jù)提前加載，需要按需加載；
當(dāng)需要數(shù)據(jù)的時(shí)候創(chuàng)建一個(gè)script標(biāo)簽，將需要的數(shù)據(jù)放在src中，通過onload去監(jiān)聽是否請(qǐng)求過來，請(qǐng)求完畢就調(diào)用傳回來的數(shù)據(jù)（異步加載）；
jsonp不能用post請(qǐng)求，只能是get請(qǐng)求；


帶src屬性的