原生JS發送Ajax請求、JSONP
<script type="text/javascript">
//調用ajax函數
ajax({
url:'./TestXHR.aspx',
type:'POST',
dataType:'json',
data:{name:"馬各馬它",age:18},
success:function(response,xml){
//請求成功后執行的代碼
},
error:function(status){
//失敗后執行的代碼
}
});
//創建ajax函數
function ajax(options){
options=options||{};
optoins.type=(options.type||'GET').toUpperCase();
options.dataType=options.dataType||'json';
params=formatParams(options.data);
//創建-第一步
var xhr;
//非IE6
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
//ie6及其以下版本瀏覽器
xhr=ActiveXObject('Microsoft.XMLHTTP');
}
//接收-第三步
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
var status=xhr.status;
if(status>=200&&status<300){
options.success&&options.success(xhr.responseText,xhr.responseXML);
}else{
options.error&&options.error(status);
}
}
}
//連接和發送-第二步
if(options.type=='GET'){
xhr.open('GET',options.url+'?'+params,true);
xhr.send(null);
}else if(options.type=='POST'){
xhr.open('POST',options.url,true);
//設置表單提交時的內容類型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(params);
}
}
//格式化參數
function formatParams(data){
var arr=[];
for(var name in data){
arr.push(encodeURIComponent(name)+'='+encodeURIComponent(data[name]));
}
arr.push(('v='Math.random()).replace('.',''));
return arr.join('&');
}
</script>
1.創建創建沒什么好說的，兼容各個版本的瀏覽器。2.連接和發送2.1、open(method,url,async)：規定請求類型（POST或GET）、請求地址url、異步（true）同步（false）.大多都是異步；通過 AJAX，JavaScript 無需等待服務器的響應，而是：
在等待服務器響應時執行其他腳本
當響應就緒后對響應進行處理
2.2、GET請求方式是通過URL參數將數據提交到服務器的，POST則是通過將數據作為send的參數提交到服務器；2.3、POST請求中，在發送數據之前，要設置表單提交的內容類型；2.4、提交到服務器的參數必須經過encodeURIComponent()方法進行編碼，實際上在參數列表“key=value”的形式中，key和value都需要進行編碼，因為胡包含特殊字符。每次請求的時候都會在參數列表中拼入一個“v=xx”的隨機字符串，這樣是為了拒絕緩存，每次都直接請求到服務器上。encodeURI():用於整個URI的編碼，不會對本身屬於URI的特殊字符串進行編碼，如 : / ? # 其對應的解碼函數decodeURI();encodeURIComponent():用於對URI中的某一部分進行編碼，會對它發現的任何非標准字符進行編碼；其他對應的解碼函數decodeURIComponent();2.5、setRequestHeader(header,value):向請求添加請求頭。header:規定頭的名稱，value:規定頭的值 3.接收3.1、接收到響應后，響應的數據會自動填充XHR對象，相關屬性如下responseText:獲得字符串形式的響應數據；responseXML:獲得XML形式的響應數據；status:響應的HTTP狀態碼；statusText:HTTP狀態的說明；3.2、XHR對象的readyState屬性表示請求/響應過程的當前活動階段，這個屬性的值如下0-未初始化，尚未調用open()方法；1-啟動，調用了open()方法，未調用send()方法； 服務器連接已建立；2-發送，已經調用了send()方法，未接收到響應； 請求已接收；3-接收，已經接收到部分響應數據； 請求處理中；4-完成，已經接收到全部響應數據； 請求已完成；只要 readyState 的值變化，就會調用 readystatechange 事件，(其實為了邏輯上通順，可以把readystatechange放到send之后，因為send時請求服務器，會進行網絡通信，需要時間，在send之后指定readystatechange事件處理程序也是可以的，我一般都是這樣用，但為了規范和跨瀏覽器兼容性，還是在open之前進行指定吧)。3.3、在readystatechange事件中，先判斷響應是否接收完成，然后判斷服務器是否成功處理請求，xhr.status 是狀態碼，狀態碼以2開頭的都是成功，304表示從緩存中獲取，上面的代碼在每次請求的時候都加入了隨機數，所以不會從緩存中取值，故該狀態不需判斷。4、ajax請求是不能跨域的！ 二、JSONPJSONP(JSON with Padding) 是一種跨域請求方式。主要原理是利用了script 標簽可以跨域請求的特點，由其 src 屬性發送請求到服務器，服務器返回 js 代碼，網頁端接受響應，然后就直接執行了，這和通過 script 標簽引用外部文件的原理是一樣的。JSONP由兩部分組成：回調函數和數據，回調函數一般是由網頁端控制，作為參數發往服務器端，服務器端把要返回的數據拼成字符串作為函數的參數傳入。比如網頁端創建一個 script 標簽，並給其 src 賦值為 http://www.example.com/json/?callback=process， 此時網頁端就發起一個請求。服務端將要返回的數據拼好最為函數的參數傳入，服務端返回的數據格式類似”process({‘name’:’example’})”，網頁端接收到了響應值，因為請求者是 script，所以相當於直接調用 process 方法，並且傳入了一個參數。單看響應返回的數據，JSONP 比 ajax 方式就多了一個回調函數。 function jsonp(options) {
options = options || {};
if (!options.url || !options.callback) {
throw new Error("參數不合法");
}
//創建 script 標簽並加入到頁面中
var callbackName = ('jsonp_' + Math.random()).replace(".", "");
var oHead = document.getElementsByTagName('head')[0];
options.data[options.callback] = callbackName;
var params = formatParams(options.data);
var oS = document.createElement('script');
oHead.appendChild(oS);
//創建jsonp回調函數
window[callbackName] = function (json) {
oHead.removeChild(oS);
clearTimeout(oS.timer);
window[callbackName] = null;
options.success && options.success(json);
};
//發送請求
oS.src = options.url + '?' + params;
//超時處理
if (options.time) {
oS.timer = setTimeout(function () {
window[callbackName] = null;
oHead.removeChild(oS);
options.fail && options.fail({ message: "超時" });
}, time);
}
};
//格式化參數
function formatParams(data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
1、因為 script 標簽的 src 屬性只在第一次設置的時候起作用，導致 script 標簽沒法重用，所以每次完成操作之后要移除；2、JSONP這種請求方式中，參數依舊需要編碼；3、如果不設置超時，就無法得知此次請求是成功還是失敗；
原生js實現http請求
有時頁面用到請求，但又不想引入jquery，那不使用ajax情況下，可以直接使用原生js進行封裝函數。原生的js通過XMLHttpRequest 對象進行的的。具體可查閱W3school的XMLHttpRequest 對象。
1、封裝可供請求調用的函數：
function httpRequest(paramObj,fun,errFun) {
var xmlhttp = null;
/*創建XMLHttpRequest對象，
*老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 對象：new ActiveXObject("Microsoft.XMLHTTP")
* */
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
/*判斷是否支持請求*/
if(xmlhttp == null) {
alert('你的瀏覽器不支持XMLHttp');
return;
}
/*請求方式，並且轉換為大寫*/
var httpType = (paramObj.type || 'GET').toUpperCase();
/*數據類型*/
var dataType = paramObj.dataType || 'json';
/*請求接口*/
var httpUrl = paramObj.httpUrl || '';
/*是否異步請求*/
var async = paramObj.async || true;
/*請求參數--post請求參數格式為：foo=bar&lorem=ipsum*/
var paramData = paramObj.data || [];
var requestData = '';
for(var name in paramData) {
requestData += name + '='+ paramData[name] + '&';
}
requestData = requestData == '' ? '' : requestData.substring(0,requestData.length - 1);
console.log(requestData)
/*請求接收*/
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
/*成功回調函數*/
fun(xmlhttp.responseText);
}else{
/*失敗回調函數*/
errFun;
}
}
/*接口連接，先判斷連接類型是post還是get*/
if(httpType == 'GET') {
xmlhttp.open("GET",httpUrl,async);
xmlhttp.send(null);
}else if(httpType == 'POST'){
xmlhttp.open("POST",httpUrl,async);
//發送合適的請求頭信息
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(requestData);
}
}
調用方法：
/*請求參數*/
var paramObj = {
httpUrl : '',
type : 'post',
data : {
name : 'sss',
sex : '男'
}
}
/*請求調用*/
httpRequest(paramObj,function(respondDada) {
//這里編寫成功的回調函數
console.log(respondDada)
},function() {
alert('網絡錯誤')
});