Ajax跨越請求失敗,解決

時間 2019-12-15

標籤 ajax 跨越請求失敗解決欄目 Ajax 简体版

原文原文鏈接

跨越請求

1.1什麼是跨域（兩個不一樣系統之間的訪問、調用）

（1）域名不一樣，即兩個不一樣的應用。javascript

（2）域名相同，可是端口不一樣，即同一個應用中的不一樣子系統。html

1.2 Ajax跨域請求的缺陷

（1）建立testJsonp.jsp頁面java

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/js/jquery-1.6.4.js"></script>
<title>Insert title here</title>
</head>
<body>
<textarea id="text" style="width: 1200px; height: 200px;"></textarea>
<input type="button" value="測試異步跨越" onclick="testajax()" />

<script type="text/javascript">
    function testajax(){
        $.ajax({
            url:"http://localhost:8081/category.json",
            type: "GET",
            success: function (data) {
                $("#text").val(JSON.stringify(data));
            }
        }); 
    }
</script>

</body>
</html>

1.3測試Ajax跨越

測試發現，Ajax跨越請求失敗了。jquery

解決方案：jsonp跨域

在前面的測試中，咱們發現Ajax跨越請求時，json數據被瀏覽器禁用了。ajax

緣由：瀏覽器禁止遠程加載Json數據。（瀏覽器安全機制）json

如何解決呢？跨域

答：使用Jsonp方式。瀏覽器

2.1Jsonp原理

2.1.1Jsonp 實現的前提：

　　瀏覽器容許跨越加載同源數據。安全

　　即在JavaScript腳本中發送請求，就能夠遠程加載js格式數據。異步

2.1.2請求原理：

　　（1）異步請求的時候，加上一個名爲callback的回調函數

　　（2）在接口中，將返回的json格式數據，假裝成js腳本格式。

　　（3）獲得js格式數據後，提取裏面的json數據。

2.2 修改testJsonp.jsp，指定異步請求爲jsonp方式。

<script type="text/javascript">
    function testajax(){
        $.ajax({
            url:"http://localhost:8081/category.json",
            type: "GET",
            dataType: "jsonp",   //jsonp請求
            jsonp:"callbackFunction",  //請求參數名
            jsonpCallback:"showData",  //回調函數名稱
            success: function (data) {
                $("#text").val(JSON.stringify(data));
            }
        }); 
    }
</script>