原生JS封裝Ajax外掛程式同域 jsonp跨域

丟擲乙個問題，其實所謂的熟悉原生js，怎樣的程度才是熟悉呢？

最近都在做原生js熟悉的練習。。。

用原生js封裝了乙個ajax外掛程式，引入一般的專案，傳傳資料，感覺還是可行的。。。簡單說說思路，如有不正確的地方，還望指正^_^

一、ajax核心，建立xhr物件

ajax技術的核心是xmlhttprequest物件（簡稱xhr），ie5是第一款引入xhr物件的瀏覽器，而ie5中的xhr物件是通過msxml庫中的乙個activex物件實現的，因此在ie中可能有3個版本，即msxml2.xmlhttp、msxml2.xmlhttp.3.0和msxml2.xmlhttp.6.0。所以建立xhr物件的時候要用相容性寫法：

createxhr:function()else if(typeof activexobject!='undefined')
}elseelse
}    }
}

注意：必須在呼叫open()方法之前指定onreadystatechange事件處理函式才能確保跨瀏覽器相容性。

三、同域傳送請求

①get請求

最常見的請求型別，常用於查詢某些資訊。通過將查詢的字串引數追加到url的末尾來將資訊傳送給伺服器。get方法請求需要注意的是，查詢字串中的每個引數名稱和值都必須使用encodeuricomponent()進行編碼，而且所有名-值對都必須由&號分割。

請求方法：

if((this.config.type=="get")||(this.config.type=="get"))
xhr.onreadystatechange=complete;
xhr.open(this.config.type,this.config.url,this.config.async);
xhr.send(null);
}

②post請求

序列化函式：

function
serialize(data)
return val.slice(0,val.length-1);
}

請求方法：

if(this.config.type=="post"||this.config.type=="post")
xhr.setrequestheader("content-type",this
.config.contenttype);
xhr.send(serialize(
this
.config.data));
}

兩個請求的一些區別：

①get請求把引數資料寫到url中，在url中可以看到，而post看不到，所以get不安全，post較安全。

②get傳送的資料量較小，不能大於2kb。post傳送的資料量較大，一般預設為不受限制。

③get伺服器端用request.querystring來獲取變數的值，post伺服器端用request.from來獲取。

④get將資料新增到url中來傳遞到伺服器，通常利用乙個？，後面的引數每乙個資料引數以「名稱=值」的形式出現，引數與引數之間利用乙個連線符&來區分。post的資料是放在http主體中的，其組織方式不只一種，有&鏈結方式，也有分隔符方式。可以隱藏引數，傳遞大批資料，比較方便。

三、jsonp跨域傳送請求

首先，跨域是神馬情況呢？

乙個網域名稱的組成：

協議子網域名稱主網域名稱埠號請求資源位址

~當協議、子網域名稱、主網域名稱、埠號中任意乙個不相同時，都算作不同域。

~不同域之間互相請求資源，就算作「跨域」。

所有的瀏覽器都遵守同源策略，這個策略能夠保證乙個源的動態指令碼不能讀取或操作其他源的http響應和cookie，這就使瀏覽器隔離了來自不同源的內容，防止它們互相操作。所謂同源是指協議、網域名稱和埠都一致的情況。瀏覽器會阻止ajax請求非同源的內容。

jsonp(json with padding) 是一種跨域請求方式。主要原理是利用了script 標籤可以跨域請求的特點，由其 src 屬性傳送請求到伺服器，伺服器返回 js **，網頁端接受響應，然後就直接執行了，這和通過 script 標籤引用外部檔案的原理是一樣的。但是jsonp跨域只支援get請求。

jsonp由兩部分組成：**函式和資料，**函式一般是由網頁端控制，作為引數發往伺服器端，伺服器端把該函式和資料拼成字串返回。

jsonp跨域主要需要考慮三個問題：

1、因為 script 標籤的 src 屬性只在第一次設定的時候起作用，導致 script 標籤沒法重用，所以每次完成操作之後要移除；

2、jsonp這種請求方式中，引數依舊需要編碼；

3、如果不設定超時，就無法得知此次請求是成功還是失敗；

由於**有點長，就放個計時器的**吧，完整**見ajaxplugin

//超時處理
if(params.time));
window[cbname]=null;
},params.time);
}

外掛程式詳細解析及使用方法見：

了解post跨域請求點這裡

原生JS封裝Ajax外掛程式同域 jsonp跨域

原生JS封裝AJAX

原生js封裝ajax，實現跨域請求

原生js封裝ajax，實現跨域請求

原生JS封裝Ajax外掛程式 同域 jsonp跨域

原生JS封裝AJAX

原生js封裝ajax，實現跨域請求

原生js封裝ajax，實現跨域請求

相關推薦

原生JS封裝Ajax外掛程式同域 jsonp跨域