web前端技術學習

$.ajax()

ajax數據請求方式，交互，跨域等相關問題

1、請求方式

1.$.ajax()

$.ajax({
type:"get",//請求方式「get」和「post」
url:"http://192.168.5.109/changda/public/api/news/getNews",//訪問數據庫地址，絕對地址，相對地址都行，前提都要是json類型的文件
async:true,
dataType: 'json', 
data:{
page_size:3//傳參數
},
success:function(resu){

//獲取成功數據，回調函數
console.log(resu);//控制檯輸出獲取的數據參數
var list= resu.result;//遍歷
var st='';
for (i=0;i<list.length;i++) {

//採用字符串拼接，渲染數據到頁面；也可以使用template模板，sea.js等渲染，後續會寫出相關代碼
st+='<div class="col-md-4 low col-xs-12">'
st+='<img src="'+list[i].main_img+'">'
st+='<h>'+list[i].title+'</h>'
st+='<p>'+list[i].content_text+'</p></div>',
}
$(".gg").append(st)//拼接的字符串添加到頁面所需數據的地方
},
error:function(){

//獲取數據失敗回調函數
alert("請求錯誤！！")
}
});

2.$.getJSON()

$.getJSON(){"http://1921.254.24.32/urlasd-cbt",data:{},funcution(){

//數據獲取成功的回調函數......和上面大體同樣

}

}

二.跨域問題

1.處理跨域的方法1 -- 代理

好比在北京（www.beijing.com/sever.php）和上海（www.shanghai.com/sever.php）各有一個服務器，北京的後端（www.beijing.com/sever.php）直接訪問上海的服務，而後把獲取的響應值返回給前端。也就是北京的服務在後臺作了一個代理，前端只須要訪問北京的服務器也就至關與訪問了上海的服務器。這種代理屬於後臺的技術，因此不展開敘述。

2.處理跨域的方法2 -- JSONP

假設在http://www.aaa.com/index.php這個頁面中向http://www.bbb.com/getinfo.php提交GET請求，那麼咱們在www.aaa.com頁面中添加以下代碼：

var eleScript= document.createElement("script"); //建立一個script元素

 

eleScript.type = "text/javascript" ; //聲明類型、

 

eleScript.src = "http://www.bbb.com/getinfo.php" ; //添加src屬性 引入跨域訪問的url

 

document.getElementsByTagName( "HEAD" )[0].appendChild(eleScript); //在頁面中添加新建立的script元素

當GET請求從http://www.bbb.com/getinfo.php返回時，能夠返回一段JavaScript代碼，這段代碼會自動執行，能夠用來負責調用http://www.aaa.com/index.php頁面中的一個callback函數。看下面一個列子：

在www.aaa.com頁面中：

 

  <script>

 

　　 function  jsonp( json ){

 

　　　　document.write( json.name ); //輸出周星馳

 

}

 

<script>

 

<script src= "http://www.bbb.com/getinfo.php" ></script>

在www.bbb.com頁面中：

　　jsonp({ "name":"周星馳","age":45 });

也就是在www.aaa.com頁面中聲明，在www.bbb.com頁面中調用。可是JSONP只支持 「GET」 請求，但不支持 「POST」 請求。

3.處理跨域的方法2 -- XHR2（推薦方法）

「XHR2」 全稱 「XMLHttpRequest Level2」 是HTML5提供的方法，對跨域訪問提供了很好的支持，而且還有一些新的功能。

* IE10一下的版本都不支持

* 只須要在服務器端頭部加上下面兩句代碼：

　　header( "Access-Control-Allow-Origin:*" );

　　header( "Access-Control-Allow-Methods:POST,GET" );

關於 「XHR2」 的更多信息你們能夠查看官方文檔，在這裏就不詳細敘述了，總之這是這個很好用的方法。

以上知識本人部分認識，但願能給你帶來用處，如描述錯誤，也請多多指點指點