ajax和jsonp跨域原理的示例分析-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“ajax和jsonp跨域原理的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“ajax和jsonp跨域原理的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)公司始終堅持【策劃先行，效果至上】的經營理念，通過多達10余年累計超上千家客戶的網站建設總結了一套系統(tǒng)有效的全網營銷解決方案，現(xiàn)已廣泛運用于各行各業(yè)的客戶，其中包括：成都門簾等企業(yè)，備受客戶稱譽。

為什么會有跨域問題？ - 因為有同源策略

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

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

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

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


跨域請求：


  • 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的基本概念

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

  • 同步交互：客戶端瀏覽器給服務器發(fā)送一個請求，服務器返回一個頁面，返回的頁面會把之前的頁面覆蓋掉，我們把這種交互方式稱為同步交互

  • 異步交互：就是可會斷瀏覽器給服務器發(fā)送一個請求，服務器返回數(shù)據(jù)，返回的數(shù)據(jù)不會把之前的頁面覆蓋掉，我們把這種交互方式稱之為異步交互

ajax主要的應用場景：頁面不刷新，就可以與服務器進行動態(tài)的數(shù)據(jù)交互

交互的原理

  • 同步交互原理：我們在瀏覽器，怎么給服務器發(fā)送請求呢？可以點擊超鏈接，提交表單，瀏覽器地址欄輸入地址，都是給服務器發(fā)送請求，實際上是瀏覽器幫助我們給服務器去發(fā)送請求

  • 異步交互的原理：JavaScript給我們提供了一個新的API接口，幫我們去發(fā)送http請求，由XMLHttpRequest 對象來幫助我們發(fā)送請求

我們所有的交互操作都可以通過這個對象來完成，發(fā)送請求，接受服務器的數(shù)據(jù)

ajax的具體應用場景

  • 前臺可以通過XMLHttpRequest 給服務器發(fā)送請求，然后再通過XMLHttpRequest 對象來接受服務器返回的數(shù)據(jù)，最后通過dom操作把數(shù)據(jù)寫到頁面上

  • ajax：可以用來表單輸入規(guī)范驗證

  • ajax：也可以用來做性能優(yōu)化，比如一個頁面非常龐大，這個頁面不可能一次加載完畢，實現(xiàn)一個滾動加載

XMLHttpRequest 交互的四個步驟

      1，實例化XMLHttpRequest 對象


      2，想和服務器進行交互，必須和服務器打開一個連接


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


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

ajax跨域

跨域：假設我訪問 a 站點，后臺返回給我一個頁面，然后我又想在 a 站點的這個頁面去訪問 b 站點的資源，這就是一個跨域的效果，跨域瀏覽器是有安全限制的

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

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

jsonp解決跨域的本質原理：由于瀏覽器有同源限制，不同站點之間不能相互訪問，但是有時候我們就是想要獲取其他站點的數(shù)據(jù)，比如加入我們想要獲取一下急速數(shù)據(jù)的天氣預報數(shù)據(jù)，這肯定跨域了，那么我們該怎么辦呢？

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

這樣在后臺就可以獲取到前臺傳過來的那個回調函數(shù)，，最后后臺返回這個函數(shù)的調用，參數(shù)為前臺請求的數(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>

以上是“ajax和jsonp跨域原理的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標題：ajax和jsonp跨域原理的示例分析-創(chuàng)新互聯(lián)
文章起源：http://muchs.cn/article6/eegog.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、微信公眾號、響應式網站、營銷型網站建設、定制網站、ChatGPT

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

手機網站建設