Ajax跨域教程-動腦學院（一）

由于上傳頭條的視頻不清晰，需要高清視頻可以加Q：1587389342，需要源碼也可以加Q領取。

知識點：

B/S:客戶端主動去請求（request）而服務器被動響應（response）

AJAX的概念，即“Asynchronous Javascript And XML”

通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面或者使用iframe。

本地環境和服務器環境

AJAX寫法

瀏覽器兼容

if(window.ActiveXObject){

//ActiveX是瀏覽器的插件

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE 678 OPEAR OLD

}else if(window.XMLHttpRequest){

xmlHttp=new XMLHttpRequest();//NEW

}

狀態碼

readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化

1: 服務器連接已建立

2: 請求已接收

3: 請求處理中

4: 請求已完成，且響應已就緒

status

200: "OK"

404: 未找到頁面

為什么響應有文本和XML格式

因為當下最流行的數據交互格式，一種是json（responseText）,另外一種是XML（responseXML）

* JSON.parse(xmlHttp.responseText)

NodeJs搭建服務器環境

安裝node（建議不要更改安裝目錄）

打開cmd輸入node -v查看版本，如果查看得到代表安裝成功

輸入命令npm i -g express

輸入命令npm i -g expre-generator

在桌面創建一個server

打開cmd命令行，cd 桌面的server目錄，回車

進入server目錄，輸入express server

再進入server/server目錄，輸入npm install

講代碼復制到public目錄下

通過npm start啟動服務器

最后打開瀏覽器在地址欄輸入http://localhost:3000/ajax.html

跨域JSONP

什么是域 id地址加上端口號（例：http://192.168.0.146:3000/）

什么是JSONP

本質跟AJAX沒有任何關系

另外一種服務器和非服務器資源之間的潛規則

結論：script標簽的src屬性是可以實現跨域的

JSONP暴露出來的數據按照我的經驗來講一定不是非常機密的數據

form提交和ajax提交比較

form：全局表單提交，整個頁面刷新

* a的href

* window.location.href

ajax：異步局部提交，局部頁面刷新

通常提交了數據之后要跳轉頁面或者刷新整個頁面的時候就不用ajax

英文單詞：

before[之前]、after[之后]、status[狀態]、asynchronous[異步的]、ready[準備好]、request[請求]、response[響應]

作業：

請參考“作業”文件夾下的文檔內容，并按時完成。

做一家受人尊敬的企業，做一位受人尊敬的老師。 -by 動腦學院

錄

復現Ajax跨域問題
Ajax跨域介紹
Ajax跨域解決方案
一. 在服務端添加響應頭Access-Control-Allow-Origin
二. 使用JSONP解決
小結

復現Ajax跨域問題

做兩個簡單的小項目復現Ajax跨域問題. 后端語言使用Java
首先是一個簡單的訂單系統, 通過訪問/loadOrderList, 最終以json串形式返回訂單集合. 該項目使用Tomcat發布在7070端口.

@RequestMapping("/loadOrderList")
@ResponseBody
public List<Order> loadOrderList(String uid){
 //模擬訂單數據
 Order o1=new Order();
 o1.setId("111");
 o1.setTotal(333.33);
 o1.setDate("2019-4-29");
 Order o2=new Order();
 o2.setId("222");
 o2.setTotal(444.44);
 o2.setDate("2019-5-29");
 Order o3=new Order();
 o3.setId("333");
 o3.setTotal(555.55);
 o3.setDate("2019-6-29");
 List<Order> list=new ArrayList<>();
 list.add(o1);
 list.add(o2);
 list.add(o3);
 return list;
}

在另一個項目中做一個向訂單系統發送一個ajax請求, 獲取訂單集合. 該項目使用Tomcat插件發布在9090端口.

//index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script type="text/javascript">
 function sendAjax() {
 $.post("http://localhost:7070/order/loadOrderList", "uid=1234", function (data) {
 alert(data);
 });
 }
 </script>
</head>
<body>
 <a href="javascript：sendAjax()">sendAjax</a>
</body>
</html>

點擊sendAjax超鏈接向訂單系統發送ajax請求.

通過開發者工具發現雖然服務器以狀態碼200響應回來, 但是控制臺卻報錯了.

這就是Ajax跨域出錯的一種表現, 下面分析原因.

Ajax跨域介紹

Ajax跨域問題是由瀏覽器的同源策略造成的, 首先要理解源這個概念.
我們可以通過協議+域名+端口確定一個源. 在上面的示例中, 你可以把一個項目理解為一個源. Ajax請求可以對源內的資源發起訪問, 但是不同源之間進行Ajax就會有問題.
當向不同源的資源發起Ajax請求時, 瀏覽器會加上Origin字段來標識源

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Length: 8
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Host: localhost:7070
Origin: http://localhost:9090 協議+域名+端口

服務器會根據Origin字段決定是否同意這次請求, 如果Origin指定的源不在許可范圍內, 服務器會返回一個不帶有Access-Control-Allow-Origin字段的響應. 瀏覽器解析時發現缺少了這個字段, 就會報錯. 這種錯誤不能通過狀態碼識別, 因為狀態碼很有可能就是200(見上面的案例).

Ajax跨域解決方案

下面介紹最常用Ajax跨域解決方案.

一. 在服務端添加響應頭Access-Control-Allow-Origin

既然我們已經知道了Ajax跨域失敗是因為響應中缺少了響應頭Access-Control-Allow-Origin, 那么就想辦法加上去.
以Java項目為例, 在后端我們使用CORSFilter過濾器加上該響應頭.
(假設是Maven項目), 首先在pom.xml中添加坐標

<dependency>
 <groupId>com.thetransactioncompany</groupId>
 <artifactId>cors-filter</artifactId>
 <version>2.5</version>
 <scope>runtime</scope>
</dependency>

然后在web.xml中對過濾器進行配置.

 <filter>
 <filter-name>CORS</filter-name>
 <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
 <init-param>
 <param-name>cors.allowOrigin</param-name><!--這個標簽是關鍵, *代表所有源都能訪問-->
 <param-value>*</param-value>
 </init-param>
 <init-param>
 <param-name>cors.supportedMethods</param-name>
 <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
 </init-param>
 <init-param>
 <param-name>cors.supportedHeaders</param-name>
 <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
 </init-param>
 <init-param>
 <param-name>cors.exposedHeaders</param-name>
 <param-value>Set-Cookie</param-value>
 </init-param>
 <init-param>
 <param-name>cors.supportsCredentials</param-name>
 <param-value>true</param-value>
 </init-param>
 </filter>
 <filter-mapping>
 <filter-name>CORS</filter-name>
 <url-pattern>/*</url-pattern>
 </filter-mapping>

配置后重啟訂單項目, 再次發起Ajax請求可以看到成功返回數據, 響應頭中包含了Access-Control-Allow-Origin, 值為發起Ajax請求的源.

二. 使用JSONP解決

上面直接通過過濾器添加響應頭的方法可以說是對癥下藥, 那么還有沒有什么偏方呢?
還真的有. 在jsp文件中經常通過通過<script>標簽引入一段js代碼, 這段代碼通常來源于網絡, 也就是不同源. 那么我們不妨通過<srcipt>標簽完成Ajax請求, 這樣便順帶解決了跨域問題.
下面還是沿用上面的案例進行演示.
我們對發送ajax的jsp進行修改

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script>
 function doCallBack(data){
 var str=JSON.stringify(data);
 alert(str);
 }
 </script>
</head>
<body>
 <script src="http://localhost:7070/order/loadOrderList3?uid=111&callBack=doCallBack"></script>
</body>
</html>

上面的代碼中, 我們首先定義了doCallBack()函數, 它接收一個字符串參數, 并且會把接收到的字符串顯示出來.
然后在<body>標簽中編寫<script>標簽, 我們將通過<script>標簽請求訂單系統, 訂單系統將會返回一段js代碼, 這段js代碼會調用doCallBack()方法.
為了能夠拼接出doCallBack(字符串參數...)js代碼, 我們在訂單系統中作如下操作.

@RequestMapping("/loadOrderList3")
@ResponseBody
public String loadOrderList3(String uid, String callBack){
 //模擬訂單數據
 Order o1=new Order();
 o1.setId("111");
 o1.setTotal(333.33);
 o1.setDate("2019-4-29");
 Order o2=new Order();
 o2.setId("222");
 o2.setTotal(444.44);
 o2.setDate("2019-5-29");
 Order o3=new Order();
 o3.setId("333");
 o3.setTotal(555.55);
 o3.setDate("2019-6-29");
 List<Order> list=new ArrayList<>();
 list.add(o1);
 list.add(o2);
 list.add(o3);
 //拼接js代碼
 String result=callBack + "(" + JSON.toJSONString(list) + ")";
 return result;
}

這個想法是不是很妙? 明白這個原理之后, 我們可以使用jQuery方便進行JSONP操作, 在上面的代碼中我們人為指定了一個名為doCallBack的函數, 而jQuery會隨機用時間戳生成一個函數名, 原理和上面是一樣的.
所以完成一開時點擊超鏈接發送Ajax請求只需要如下幾步.

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>Title</title>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script>
 function sendAjax(){
 $.getJSON("http://localhost:7070/order/loadOrderList3?callBack=?","uid=111",
 function (data) {
 var str=JSON.stringify(data);
 alert(str);
 });
 }
 </script>
</head>
<body>
 <a href="javascript：sendAjax()">sendAjax</a>
</body>
</html>

小結

上面兩種解決辦法在思路上有著本質的不同. 方案一抓住CORS跨域訪問問題的本質, 在后端加上響應頭解決跨域問題. 方案二JSONP利用的是<script>標簽能夠跨域獲取js代碼的特性, 繞過跨域問題.

文來自阿里云云棲社區，未經許可禁止轉載。

更多資訊，盡在云棲科技快訊~

來科技快訊看新聞鴨~

快點關注我認識我愛上我啊~~~

摘要： Flask、Python、Django、框架、服務器、客戶端、瀏覽器、交互、WEB、Python前端、CSS、JAVA、HTML、H5、PHP、JavaScript、JQuery、分布式開發

jQuery對AJAX的支持
$.ajax()
語法：
$.ajax({請求參數的json對象});
請求參數對象的屬性：
URL：字符串 表示異步請求地址
type：字符串 請求方式 get或post
date：傳遞到服務端的參數 參數字符串（"name=dfh&age15"）或json
datetype：響應回來的數據格式
HTML
xml
text
script
json
jsonp：有關跨域的響應了格式
success：
回調函數 響應成功后的回調函數
error：
回調函數 請求或響應失敗時的回調函數
beforSend：
回調函數 發送AJAX請求之前的回調函數
如果return False 則終止請求發送

跨域（Cross Domain）
什么是跨域？
HTTP協議中有一個策略 "同源策略"
同源：
多個地址中 相同的協議 相同的域名 相同的端口
在HTTP中 必須是同源地址中 必須是同源地址才能相互
發送請求 非同源拒絕請求（<script>和<img>除外）
非同源的網頁相互發送請求的過程就是跨域
跨域只能接受GET請求 不能接受POST請求
跨域解決方案：
通過<script>標記向服務器發送請求
由服務器資源指定前端頁面的那個方法來執行響應的數據
jQuery的跨域：
jsonp json with padding
$.ajax({
url:"xxx",
type: "get",
dataType:'jsonp', //指定跨域訪問
jsonp: "callback", //定義了callback函數名 以便于callback傳遞過去的函數名
jsonpCallback:'xxx' //定義了傳遞過去函數的名字 jsonp的回調函數
});

三種形式的跨域請求

在線咨詢

上一篇：SpringMVC知識 day02 常用注解&
下一篇：Android WebView中Java與JavaS

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Ajax跨域教程-動腦學院（一）

復現Ajax跨域問題

Ajax跨域介紹

Ajax跨域解決方案

您的項目需求