在JS中如何實現ajax與ajax的跨域請求

下面小編就為大家分享一篇原生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條的②③步

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在javascript中如何實現非同步圖片上傳

在jquery中如何實作隱藏元素功能

在jQuery如何實作驗證表單密碼一致性

#在JS中有關陣列函數如何使用

在微信小程式中有關如何使用picker元件

以上是在JS中如何實現ajax與ajax的跨域請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！