這篇文章將為大家詳細(xì)講解有關(guān)原生JS如何實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站主營克拉瑪依網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app軟件開發(fā),克拉瑪依h5小程序開發(fā)搭建,克拉瑪依網(wǎng)站營銷推廣歡迎克拉瑪依等地區(qū)企業(yè)咨詢

什么是ajax

ajax是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可以通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實(shí)現(xiàn)異步更新。

一、原生JS實(shí)現(xiàn)ajax

第一步獲得XMLHttpRequest對(duì)象

第二步：設(shè)置狀態(tài)監(jiān)聽函數(shù)

第三步：open一個(gè)連接，true是異步請(qǐng)求

第四部：send一個(gè)請(qǐng)求，可以發(fā)送一個(gè)對(duì)象和字符串，不需要傳遞數(shù)據(jù)發(fā)送null

第五步：在監(jiān)聽函數(shù)中，判斷readyState=4&&status=200表示請(qǐng)求成功

第六步：使用responseText、responseXML接受響應(yīng)數(shù)據(jù)，并使用原生JS操作DOM進(jìn)行顯示

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的跨域請(qǐng)求

[跨域請(qǐng)求處理]由于在JS中存在同源策略。當(dāng)請(qǐng)求不同協(xié)議名，不同端口號(hào)，不同主機(jī)名下面的文件時(shí)，將會(huì)違背同源策略，無法請(qǐng)求成功！需要進(jìn)行跨域處理！

1、后臺(tái)PHP進(jìn)行設(shè)置：

前臺(tái)無需任何設(shè)置，在后臺(tái)被請(qǐng)求的PHP文件中，寫入一條header。

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

2、使用src屬性+JSONP實(shí)現(xiàn)跨域

①擁有src屬性的標(biāo)簽自帶跨域功能！所以可以使用script標(biāo)簽的src屬性請(qǐng)求后臺(tái)數(shù)據(jù)

②由于src在加載數(shù)據(jù)成功后，后直接將加載內(nèi)容放入到script標(biāo)簽中

所以，后臺(tái)直接返回JSON字符串將不能在script標(biāo)簽中解析

因此，后臺(tái)應(yīng)該返回給前臺(tái)一個(gè)回到函數(shù)名，并將JSON字符串作為參數(shù)傳入

后臺(tái)PHP文件中返回：

echo"callBack({$str})";

③前臺(tái)接收到返回的回到函數(shù)，將直接在script標(biāo)簽中調(diào)用。因此需要聲明這樣一個(gè)回調(diào)函數(shù)，作為請(qǐng)求成功的回調(diào)。

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

3、JQuery的ajax實(shí)現(xiàn)JSONP

① 在ajax請(qǐng)求時(shí)，設(shè)置dataType為"json"

② 后套返回時(shí)，依然需要返回回調(diào)函數(shù)。但是，ajax在發(fā)送請(qǐng)求時(shí)會(huì)默認(rèn)使用get請(qǐng)求將回到函數(shù)名發(fā)給后臺(tái)，后臺(tái)可以使用$_GET['callback']取出回調(diào)函數(shù)名：

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

③后臺(tái)返回以后，ajax依然可以用success作為成功的回調(diào)函數(shù)：

success:function(data){}

當(dāng)然后臺(tái)也可以隨便返回一個(gè)回調(diào)函數(shù)名。

echo"callBack({$str})";

關(guān)于“原生JS如何實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。