原生JS實現ajax與ajax的跨域請求


一、原生JS實現ajax

第一步獲得XMLHttpRequest對象

第二步:設置狀態監聽函數

第三步:open一個連接,true是異步請求

第四部:send一個請求,可以發送一個對象和字符串,不需要傳遞數據發送null

第五步:在監聽函數中,判斷readyState=4&&status=200表示請求成功

第六步:使用responseText、responseXML接受響應數據,並使用原生JS操作DOM進行顯示

var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(){ console.log(ajax.readyState); console.log(ajax.status); if(ajax.readyState==4 && ajax.status==200){ console.log(ajax.responseText); console.log(ajax.responseXML);//返回不是XML,顯示null
 console.log(JSON.parse(ajax.responseText)); console.log(eval("("+ajax.responseText+")")); } } ajax.open("GET","h51701.json",true); ajax.send(null);

二、ajax的跨域請求

[跨域請求處理]由於在JS中存在同源策略。當請求不同協議名,不同端口號,不同主機名下面的文件時,將會違背同源策略,無法請求成功!需要進行跨域處理! 

 1、后台PHP進行設置:
 前台無需任何設置,在后台被請求的PHP文件中,寫入一條header。

 header("Access-Control-Allow-Origin:*");//表示允許哪些域名請求這個PHP文件,*表示所有域名都允許

 2、使用src屬性+JSONP實現跨域

 ① 擁有src屬性的標簽自帶跨域功能!所以可以使用script標簽的src屬性請求后台數據

 <script src="http://127.0.0.1/json.php" type="text/javascript" charset="utf-8"></ script>

 ② 由於src在加載數據成功后,后直接將加載內容放入到script標簽中

 所以,后台直接返回JSON字符串將不能在script標簽中解析
 因此,后台應該返回給前台一個回到函數名,並將JSON字符串作為參數傳入

 后台PHP文件中返回:

echo "callBack({$str})";

 ③ 前台接收到返回的回到函數,將直接在script標簽中調用。因此需要聲明這樣一個回調函數,作為請求成功的回調。

 function callBack(data){ alert("請求成功"); console.log(data); }

 3、JQuery的ajax實現JSONP

 ① 在ajax請求時,設置dataType為"json"
 ② 后套返回時,依然需要返回回調函數。但是,ajax在發送請求時會默認使用get請求將回到函數名發給后台,后台可以使用$_GET['callback']取出回調函數名:

 echo "{$_GET['callback']}({$str})";

 ③ 后台返回以后,ajax依然可以用success作為成功的回調函數:

 success:function(data){}

 當然后台也可以隨便返回一個回調函數名。

echo "callBack({$str})";

 前台只要請求成功,就會自動調用這個函數。類似於第2條的② ③步


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM