AJAX(Asynchronous JavaScript and XML)是一種無需刷新頁面的技術,可以使用戶更順暢地瀏覽網站。然而,由于跨域限制,如果想要在一個網站上使用AJAX獲取另一個網站的HTML代碼,就會受到限制。
// 無法實現的跨域請求 $.ajax({ type: "get", url: "http://www.abc.com", success: function (data) { // 獲取不到數據 } });
要解決這個問題,可以通過在服務器端進行數據代理的方式,在后臺解決跨域問題,并將獲取到的HTML代碼通過AJAX返回給前端頁面。
// 后臺代理跨域請求 $.ajax({ type: "get", url: "/getHtmlCode", data: {url: "http://www.abc.com"}, success: function (data) { // 獲取到數據 } });
在服務器端代碼中,需要接受前端傳遞過來的URL地址,并且將URL地址中的HTML代碼獲取到后再返回給前端頁面。
// 服務器端代理跨域請求 app.get('/getHtmlCode', function(req, res){ // 獲取前端傳遞過來的URL地址 var url = req.param('url'); // 使用jQuery的ajax獲取HTML代碼 $.ajax({ type: 'get', url: url, success: function(data){ // 將獲取到的HTML代碼返回給前端 res.send(data); } }); });
在代碼中,使用了jQuery的ajax方法,通過服務器端代理跨域請求的方式獲取到了HTML代碼,并將HTML代碼返回給前端頁面進行展示。