利用iframe實現ajax跨域通信的實現原理(圖解)

2024-09-01 08:29:09

字體：大中小

來源：轉載

供稿：網友

在漫長的前端開發旅途上，無可避免的會接觸到ajax，而且一般情況下都是用在同一域下的ajax請求；但是如果請求是發生在不同的域下，請求就無法執行，并且會拋出異常提示不允許跨域請求，目前我沒有找到明確的資料說明這是為什么，我覺得應該是出于安全性的考慮吧。縱然如此，要實現跨域訪問的話，方法還是有的，而且不只一種，在這里介紹其中一種解決方案：如何利用iframe完成ajax的跨域請求。

如下圖所示：域a.com的頁面request.html（即http://a.com/request.html）里面嵌套了一個iframe指向域b.com的response.html，而response.html里又嵌套了域a.com的proxy.html。

要實現域a.com的request.html請求域b.com的process.php，可以將請求的參數通過URL傳給response.html，由response.html向process.php發出真正的ajax請求（response.html與process.php都屬于域b.com），然后將返回的結果通過URL傳給proxy.html，最后由于proxy.html與request.html是在同一域下，所以可以在proxy.html利用window.top將結果返回給request.html完成跨域通信。

整個流程的思路其實非常清晰，真正的ajax請求并不是發生在域a.com，而是發生在域b.com；而域a.com是做了兩件事，第一件事是由request.html完成，向域b.com發送傳入參數；第二件事由proxy.html完成，把域b.com的響應數據遞回給request.html。

跨域訪問流程圖

OK，接下來就是如何用代碼實現了；在此之前先看文檔結構：

http://a.com/

request.html

proxy.html

http://b.com/

response.html

process.php

1、先來看request.html，為了方便理解，我把js也放到了頁面上:
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>該頁面的路徑是：http://a.com/request.html</title>
</head>
<body>
<p id="result">這里將會填上響應的結果</p>
<a id="sendBtn" href="javascript:void(0)">點擊，發送跨域請求</a>
<iframe id="serverIf"></iframe>
<script type="text/javascript">
document.getElementById("sendBtn").onclick = function() {
var url = "http://b.com/response.html";
var fn = "GetPerson";//這是定義在response.html的方法
var reqdata = '{"id" : 24}';//這是請求的參數