當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ajax总结(三):ajax跨域访问接口方法汇总

發(fā)布時間：2024/5/14 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax总结(三):ajax跨域访问接口方法汇总小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

ajax跨域訪問接口方法和模板引擎的應用

一.學習跨域之前先要了解:

1.同源和跨域的概念
a.同源:協(xié)議頭、域名、端口全部一樣就叫同源;
b.跨域:只要協(xié)議頭,域名,端口任意一個不一樣就是跨域.
因為跨域的影響,導致瀏覽器出于安全角度考慮，不允許你用ajax（XMLHttpRequest）訪問跨域的資源.

來一張圖來說明:
(如果使用了跨域,會報"No ‘Access-Control-Allow-Origin’ header is present on the requested"的錯誤)

二.解決辦法:

1.跨域方案之一：JSONP方法

JSONP的優(yōu)點是：它不像XMLHttpRequest對象實現(xiàn)的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調用callback的方式回傳結果。
JSONP的缺點則是：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
具體介紹:
a.它是一套用script標簽解決跨域問題,得到JSON數(shù)據(jù)的方案
b.用法:就是用script標簽的src屬性去訪問跨域接口,然后在后面加一個參數(shù)叫callback,傳入一個函數(shù)名字,當響應完成是它會自動調用這個函數(shù),并把JSON數(shù)據(jù)當作參數(shù)傳遞給這個函數(shù).
演示案例:

c.怎么看能不能用JSONP?就是看文檔，沒文檔就試一下行不行不就知道了嘛.

d.如何在事件里發(fā)JSONP?
解決方法:只要在事件里創(chuàng)建script標簽，然后給它一個src屬性，再加到頁面中就可以了.
演示代碼:

<body> <input type="text" id="qq"><input type="button" value="點我發(fā)請求" id="btn"> </body> </html> <script>function f1(obj){console.log(obj); }var qq = document.getElementById('qq');//如何在事件里發(fā)JSONP的請求document.getElementById('btn').onclick = function(){//我可以再這里面自己創(chuàng)建一個script標簽var spt = document.createElement('script');spt.src = "http://api.douban.com/v2/movie/top250?callback=f1"console.log(spt); document.head.appendChild(spt);//注意是在head里面加script標簽} </script>

e.也可以用jQuery發(fā)jsonp請求,而且代碼更加簡潔.

$.get({ url:"http://api.douban.com/v2/movie/top250", dataType:"jsonp", success:function(obj){ console.log(obj)//成功拿到數(shù)據(jù). }})

有時候要使用代理api

上述代碼修改為如下:

$.ajax({type: 'GET',url:'http://api.douban.com/v2/movie/top250',dataType:'jsonp',jsonp:"callback",data: {q: "select * from json where url=\"http://v.juhe.cn/toutiao/index?type=shehui&key=989c40de0a1c5c3618f9469e8271f488\"",format: "json"},success: function(data) { console.log(data); },error: function(error) {console.log(error);}});

2.跨域方案二：CORS方法

a.原理:讓服務器告訴瀏覽器，我這個接口所有網(wǎng)站都可以訪問！
b.方法:在后臺里加上一句話:header(‘Access-Control-Allow-Origin:*’);
演示案例
后端:

前端 :

3.跨域方案三:利用服務器當跳板去訪問接口

原理:
跨域只是瀏覽器的限制,但是我自己的服務器可以去訪問別人的接口,我們訪問自己服務器,讓自己的服務器去訪問接口,然后返回的數(shù)據(jù)再返回給服務器.

后臺核心代碼,將結果echo輸出就可以:

<?php$qq = $_GET['qq'];//去訪問別人的接口//讀取文件的內容//參數(shù)：文件的路徑//其實，它本質上是發(fā)起一個請求，讀取到響應體而已// $res = file_get_contents("1.txt");$res = file_get_contents('http://japi.juhe.cn/qqevaluate/qq?key=8d9160d4a96f2a6b5316de5b9d14d09d&qq='.$qq);echo $res;

三.模板引擎的使用(重要)

1.模板和引擎的意思
模板：先寫好一套HTML結構，但是數(shù)據(jù)不要寫死，而是挖幾個坑，然后你給我什么數(shù)據(jù)，我就填充到坑里面去，就能生成不同的頁面結構了.
引擎：就是實現(xiàn)上面模板功能的插件，就叫引擎.

2.模板引擎有很多個，我用的是art-template這個模板引擎,因為它小，功能又強大，關鍵是還有中文的文檔.(官方網(wǎng)站:https://aui.github.io/art-template/zh-cn/docs/index.html#模板);

3.使用步驟:
共三步：
a.導入模板引擎

在html里寫:

<script src="./js/template-web.js"></script>

b.準備一個模板,注意點:
用script標簽來準備，并且必須給type屬性，而且type屬性不能是text/javascript，再給一個id;
在標簽里寫你需要的HTML模板.
在html里寫:

<script type="text/html" id="tp1">{{each list value}}<div class="item clearfix"><a href="#" class="title"><img src="{{value.img}}" alt=""><span>{{value.time}}</span></a></div>{{/each}}</script>

3.調用模板，并且給模板傳遞數(shù)據(jù)，它就能生成對應的HTML代碼了
使用template調用
演示代碼:

在js里寫:

xhr.onload = function () {// console.log(xhr.responseText);var obj=JSON.parse(xhr.responseText);console.log(obj);//調用模板var html=template('tp1',{list:obj.items});// console.log(html);items.innerHTML+=html; }

附什么值得買網(wǎng)站模板引擎的應用案例:

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>SMZDM</title><style>.items {display: flex;flex-wrap: wrap;}.item {/*float: left;*/width: 320px;/*height: 320px;*/border: 1px solid #0094ff;overflow: hidden;margin: 10px 20px;}.item .title {display: block;width: 100%;position: relative;}.title img {display: block;width: 100%;}.title span {position: absolute;right: 20px;bottom: 0px;width: 50px;text-align: center;background-color: lightgray;color: gray;font-size: 13px;border-radius: 5px 5px 0 0;}.content {padding: 10px 0;}.content a {text-decoration: none;color: black;font-family: "微軟雅黑";font-size: 16px;}.content p {color: gray;font-size: 13px;font-family: "微軟雅黑";margin-bottom: 0;}.f_l {float: left;}.f_r {float: right;}.clearfix::before,.clearfix::after {content: '';display: block;line-height: 0;height: 0;clear: both;visibility: hidden;}.clearfix {zoom: 1;}.info {line-height: 25px;}.info img {width: 20px;height: 20px;vertical-align: middle;margin-right: 10px;}.info a {color: gray;text-decoration: none;font-size: 12px;height: 20px;line-height: 20px;margin: 0 10px;}.getMore {width: 100px;height: 100px;border: none;text-align: center;background-color: hotpink;line-height: 100px;cursor: pointer;font-size: 20px;font-weight: 900;}.getSome {width: 100px;height: 100px;border: none;text-align: center;line-height: 100px;cursor: pointer;font-size: 20px;font-weight: 900;position: relative;background-color: #222222;color:#c0c0c0;z-index: 2;}.getSome img{position: absolute;top:0;left:0;width: 100%;height: 100%;opacity: .5;}.controls {display: flex;}</style> </head><body><div class="controls"><div class="getSome">加載更多<img src="./imgs/loading01.gif" alt=""></div></div><div class="items"></div></body></html><script src="js/template-web.js"></script><script type="text/html" id="tpl">{{ each list value }}<div class="item clearfix"><a href="{{value.article_link}}" class="title"><img src="{{value.article_pic}}" alt=""><span>{{value.article_date}}</span></a><div class="content"><a href="#">{{value.article_title}}</a><p>{{value.article_content}}</p></div><div class="info clearfix"><a href="#" class="f_l"><img src="{{value.icon}}" alt="">{{value.article_referrals}}</a><a href="#" class="f_r">信息:1</a><a href="#" class="f_r">?:2</a><a href="#" class="f_r">贊:3</a></div></div>{{ /each }}</script><script>//獲取容器var items = document.querySelector('.items');//獲取更多的點擊事件document.querySelector('.getSome').onclick = function(){//1. 創(chuàng)建請求對象var xhr = new XMLHttpRequest();//2. 設置請求行xhr.open('get','https://www.smzdm.com/homepage/json_more?timesort=154209876095&p=2');//3. 設置請求頭，post才需要//4. 發(fā)送請求xhr.send();//5. 監(jiān)聽響應完成xhr.onload = function(){// console.log(xhr.responseText);// 轉成JS數(shù)據(jù)var obj = JSON.parse(xhr.responseText);console.log(obj);//調用模板var html = template('tpl',{ list: obj.data});items.innerHTML += html;}}; </script>

總結

以上是生活随笔為你收集整理的ajax总结(三):ajax跨域访问接口方法汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： React在线编辑简历
下一篇：数字城市深圳智慧巡查平台功能结构分析【软