本文主要為大家分享一篇原生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屬性請求後台資料
<scriptsrc="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條的②③步
相關推薦：
#以上是原生JS實作ajax與ajax的跨域請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！
