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

這篇文章將為大家詳細講解有關原生JS如何實現ajax與ajax的跨域請求實例，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

什么是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","h61701.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})";

關于“原生JS如何實現ajax與ajax的跨域請求實例”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。