同源策略是瀏覽器的一種安全策略，所謂同源指的是 請(qǐng)求URL地址中的 協(xié)議, 域名 和 端口 都相同，只要其中之一不相同就是跨域

同源策略主要為了保證瀏覽器的安全性

在同源策略下，瀏覽器 不允許 Ajax跨域獲取服務(wù)器數(shù)據(jù)

http://www.example.com/detail.html

跨域請(qǐng)求：

• http://api.example.com/detail.html 域名不同
• http://www.example.com:8080/detail.html 端口不同
• http://api.example.com:8080/detail.html 域名、端口不同
• https://api.example.com/detail.html 協(xié)議、域名不同
• https://www.example.com:8080/detail.html 端口、協(xié)議不同

ajax的基本概念

了解這個(gè)概念，首先得先知道同步交互與異步交互

• 同步交互：客戶端瀏覽器給服務(wù)器發(fā)送一個(gè)請(qǐng)求，服務(wù)器返回一個(gè)頁(yè)面，返回的頁(yè)面會(huì)把之前的頁(yè)面覆蓋掉，我們把這種交互方式稱為同步交互
• 異步交互：就是可會(huì)斷瀏覽器給服務(wù)器發(fā)送一個(gè)請(qǐng)求，服務(wù)器返回?cái)?shù)據(jù)，返回的數(shù)據(jù)不會(huì)把之前的頁(yè)面覆蓋掉，我們把這種交互方式稱之為異步交互

ajax主要的應(yīng)用場(chǎng)景：頁(yè)面不刷新，就可以與服務(wù)器進(jìn)行動(dòng)態(tài)的數(shù)據(jù)交互

交互的原理

• 同步交互原理：我們?cè)跒g覽器，怎么給服務(wù)器發(fā)送請(qǐng)求呢？可以點(diǎn)擊超鏈接，提交表單，瀏覽器地址欄輸入地址，都是給服務(wù)器發(fā)送請(qǐng)求，實(shí)際上是瀏覽器幫助我們給服務(wù)器去發(fā)送請(qǐng)求
• 異步交互的原理：JavaScript給我們提供了一個(gè)新的API接口，幫我們?nèi)グl(fā)送http請(qǐng)求，由XMLHttpRequest 對(duì)象來(lái)幫助我們發(fā)送請(qǐng)求

我們所有的交互操作都可以通過(guò)這個(gè)對(duì)象來(lái)完成，發(fā)送請(qǐng)求，接受服務(wù)器的數(shù)據(jù)

ajax的具體應(yīng)用場(chǎng)景

• 前臺(tái)可以通過(guò)XMLHttpRequest 給服務(wù)器發(fā)送請(qǐng)求，然后再通過(guò)XMLHttpRequest 對(duì)象來(lái)接受服務(wù)器返回的數(shù)據(jù)，最后通過(guò)dom操作把數(shù)據(jù)寫到頁(yè)面上
• ajax：可以用來(lái)表單輸入規(guī)范驗(yàn)證
• ajax：也可以用來(lái)做性能優(yōu)化，比如一個(gè)頁(yè)面非常龐大，這個(gè)頁(yè)面不可能一次加載完畢，實(shí)現(xiàn)一個(gè)滾動(dòng)加載

XMLHttpRequest 交互的四個(gè)步驟

      1，實(shí)例化XMLHttpRequest 對(duì)象

      2，想和服務(wù)器進(jìn)行交互，必須和服務(wù)器打開一個(gè)連接

      3，給服務(wù)器發(fā)送數(shù)據(jù)，發(fā)送參數(shù)數(shù)據(jù)到服務(wù)器

      4，接受服務(wù)器返回的數(shù)據(jù)，服務(wù)器在返回給客戶端的時(shí)候會(huì)返回一些狀態(tài)，可以通過(guò)監(jiān)聽服務(wù)器狀態(tài)的改變，來(lái)更好的操控整個(gè)交互流程

ajax跨域

跨域：假設(shè)我訪問(wèn) a 站點(diǎn)，后臺(tái)返回給我一個(gè)頁(yè)面，然后我又想在 a 站點(diǎn)的這個(gè)頁(yè)面去訪問(wèn) b 站點(diǎn)的資源，這就是一個(gè)跨域的效果，跨域?yàn)g覽器是有安全限制的

解決·跨域的方式：jsonp方式

JSONP 全稱是 JSON with Padding ，是基于 JSON 格式的為解決跨域請(qǐng)求資源而產(chǎn)生的解決方案。他實(shí)現(xiàn)的基本原理是利用了 HTML 里 <script></script> 元素標(biāo)簽，遠(yuǎn)程調(diào)用 JSON 文件來(lái)實(shí)現(xiàn)數(shù)據(jù)傳遞。如要在 a.com 域下獲取存在 b.com 的 JSON 數(shù)據(jù)( getUsers.JSON )：

jsonp解決跨域的本質(zhì)原理：由于瀏覽器有同源限制，不同站點(diǎn)之間不能相互訪問(wèn)，但是有時(shí)候我們就是想要獲取其他站點(diǎn)的數(shù)據(jù)，比如加入我們想要獲取一下急速數(shù)據(jù)的天氣預(yù)報(bào)數(shù)據(jù)，這肯定跨域了，那么我們?cè)撛趺崔k呢？

原理：就是動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽，然后利用<script>的src 不受同源策略約束來(lái)跨域獲取數(shù)據(jù)。

這樣在后臺(tái)就可以獲取到前臺(tái)傳過(guò)來(lái)的那個(gè)回調(diào)函數(shù)，，最后后臺(tái)返回這個(gè)函數(shù)的調(diào)用，參數(shù)為前臺(tái)請(qǐng)求的數(shù)據(jù)

js代碼

<script type="text/javascript">
 function handleResponse(response){
   console.log(response);
 }
</script>

<script type="text/javascript">
 window.onload = function() {

 var oBtn = document.getElementById('btn');

 oBtn.onclick = function() { 

  var script = document.createElement("script");
  script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
  document.body.insertBefore(script, document.body.firstChild); 
 };
};
</script>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。