Ajax和跨域問題深入解析_AJAX相關
這篇文章主要為大家詳細介紹了Ajax和跨域問題，告訴大家甚麼Ajax，什麼是跨域？具有一定的參考價值，對有興趣的小夥伴們可以參考一下
什麼是ajax
Ajax(Asynchronous JavaScript# and XML),是一種可以向伺服器請求額外的資料並且無需刷新頁面的技術,ajax的出現帶來了更好的用戶體驗.
Ajax的核心就是XMLHttpRequest(XHR)對象.XHR為向伺服器發送請求和解析伺服器響應提供了流暢的接口.可以使用XHR對象獲取新數據,通過DOM將新數據插入到頁面.雖然名字中包含XML,但是ajax通信和數據格式無關;這種技術就是可以不用刷新就從伺服器取得資料,但是不一定是XML資料,也可以是json.
#XMLHttpRequest物件
XHR的用法
1.建立一個XMLHttpRequest物件
2.發送請求
1）.設定請求行xhr.open( )
2）.POST請求需要設定請求頭xhr.setRequestHeader() POST請求頭Content-Type的值: application/x-www-form-urlencoded
3）.設定請求體xhr.send() get請求傳null,post根據情況
3.處理伺服器回應
先判斷回應狀態碼和非同步物件是否解析完畢.
伺服器傳回的狀態碼status
1xx:訊息
2xx:成功
3xx:重定向
4xx:請求錯誤
5xx:伺服器錯誤
非同步物件的狀態碼readystate
0:非同步物件已經建立
1:非同步物件初始化完成,傳送請求
2:接收伺服器傳回的原始資料
3:資料正在解析,解析需要時間
4:資料解析完成,資料可以使用了
XML
XML的特點，出身名門，W3C制定，微軟和IBM曾經共同大力推薦過的數據格式.XML 指可擴展標記語言（Extensible Markup Language）,被設計用來傳輸和存儲數據,HTML是設計用來表示頁面的.
語法規則:和HTML差不多,都是透過標記來表示的
特殊符號:例如<>要使用實體-轉移字元
xml的解析需要前後台配合:
1.後台在回傳的時候,在回應頭中設定Content-Type的值為application/xml
2.前台異步物件在接收後台資料時,記得按照xml的方式來接收,xhr.responseXML,並且它回傳的是一個object物件,內容是#document
JSON
JSON(JavaScript Object Notation),出身草根，是Javascript 的子集，專門負責描述資料格式.JSON本身是一個特殊格式的字串,可以轉換成js物件,是網絡上用來傳輸資料使用最廣泛的資料格式，沒有之一.
語法規則:資料以key/value 值對錶示,資料由逗號分隔,大括號保存物件,中括號保存數組,名稱和值都需要使用雙引號包含(這個是和js的一點小區別).
js中解析/操作JSON:
1.JSON.parse(json字串); 將一個json格式的字串解析成js物件
2.JSON.stringify(js物件); 將一個js物件轉成一個json格式的字串
自己封裝一個ajax
function pinjieData(obj) {
//obj 就相当于 {key:value,key:value}
//最终拼接成键值对的字符串 "key:value,key:value"
var finalData = "";
for(key in obj){
finalData+=key+"="+obj[key]+"&"; //key:value,key:value&
}
return finalData.slice(0,-1);//key:value,key:value
}
function ajax(obj) {
var url = obj.url;
var method = obj.method.toLowerCase();
var success = obj.success;
var finalData = pinjieData(obj.data);
//finalData最终的效果key:value,key:value
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//get方法拼接地址,xhr.send(null)
if (method=='get'){
url = url + "?"+finalData;
finalData = null;
}
//2.设置请求行
xhr.open(method,url);
// 如果是post请求,要设置请求头
if (method=='post'){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
}
//3.发送
xhr.send(finalData);
//4.监听服务器返回的数据
xhr.onreadystatechange = function () {
if (xhr.status==200 && xhr.readyState==4){
var result = null;
//获取返回的数据类型
var rType = xhr.getResponseHeader("Content-Type");
if (rType.indexOf('xml')!=-1){
result = xhr.responseXML;
}else if(rType.indexOf('json')!=-1){
// JSON.parse 的意思是 将 json格式的字符串
//比如 [{ "src":"./images/nav0.png","content":"商品分类1"}]
//转成js对象
result = JSON.parse(xhr.responseText);
}else{//当成普通的字符串去处理
result = xhr.responseText;
}
//将这里解析好的数据交给页面去渲染
success(result);
}
}
}jQuery中使用ajaxAPI jQuery ajax
jQuery為我們提供了更便利的ajax封裝使用.
$.ajax({}) 可以設定方式發起ajax請求
$.get() 以get方式發起ajax請求
$.post() 以post方式發起ajax請求
$('form').serialize() 序列化表單(格式化key=val$key=val)
#參數說明
url :介面位址
type :請求方式(get/post)
timeout : 要求為Number類型的參數，設定請求逾時時間（毫秒）
dataType: 應該是客戶端傳遞給伺服器一個值，告訴伺服器如何進行處理:
data: 發送請求資料
beforeSend: 要求為Function類型的參數，發送請求前可以修改XMLHttpRequest物件的函數，例如新增自訂HTTP頭。在beforeSend中如果回傳false可以取消本次ajax請求.
success: 成功回應後呼叫
error: 錯誤回應時呼叫
complete: 回應完成時呼叫（包括成功與失敗）
//ajax===get
$.ajax({
url:'',
data:'key=value&key=value',
type:'get',
success:function (result) {
console.log(result);
}
});
//ajax===post
$.ajax({
url:'',
data:'key=value&key=value',
type:'post',
success:function (result) {
console.log(result);
}
});
//$.get
$.get({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//$.post
$.post({
url:'',
data:'key=value&key=value',
success:function (result) {
console.log(result);
}
});
//在使用jQuery中ajax发送请求的时候,只需要在 dataType中写上jsonp即可实现ajax的跨域请求
dataType:'jsonp'跨域
透過XHR實作ajax通訊的一個主要限制(相同域,相同連接埠,相同協定),源自於跨服安全性原則,預設情況下,XHR只能請求同一網域的資源,這是為了防止某些惡意的行為.
CORS跨域
CORS(cross-origin resource sharing,跨域源资源共享)定义了在跨域时,浏览器和服务器应该如何沟通.CORS允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
CORS支持所有类型的HTTP请求.
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
JSONP
JSONP由回调函数和数据组成.JSONP只支持GET请求.JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据.
JSONP通过动态
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Oracle錯誤3114詳解：如何快速解決
Mar 08, 2024 pm 02:42 PM
Oracle錯誤3114詳解：如何快速解決，需要具體程式碼範例在Oracle資料庫開發與管理過程中，我們常常會遇到各種各樣的錯誤，其中錯誤3114是比較常見的一個問題。錯誤3114通常表示資料庫連線出現問題，可能是網路故障、資料庫服務停止、或連接字串設定不正確等原因導致的。本文將詳細解釋錯誤3114的產生原因，以及如何快速解決這個問題，並附上具體的程式碼
PHP 與 Ajax：建立一個自動完成建議引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。
解析Wormhole NTT：適用於任何Token的開放框架
Mar 05, 2024 pm 12:46 PM
Wormhole在區塊鏈互通性方面處於領先地位，專注於創建有彈性、面向未來的去中心化系統，優先考慮所有權、控制權和無需許可的創新。這個願景的基礎是對技術專業知識、道德原則和社群一致性的承諾，旨在以簡單、清晰和廣泛的多鏈解決方案套件重新定義互通性格局。隨著零知識證明、擴容方案和功能豐富的Token標準的興起，區塊鏈變得更加強大，而互通性也變得越來越重要。在這個不斷創新的應用程式環境中，新穎的治理系統和實用功能為整個網路的資產帶來了前所未有的機會。協議建構者現在正在努力思考如何在這個新興的多鏈
PHP 中點的意思和用法解析
Mar 27, 2024 pm 08:57 PM
【PHP中點的意義和用法解析】在PHP中，中點（.）是常用的運算符，用來連接兩個字串或物件的屬性或方法。在本文中，我們將深入探討PHP中點的意義和用法，並透過具體的程式碼範例加以說明。 1.連接字串中點運算子.在PHP中最常見的用法是連接兩個字串。透過將.放置在兩個字串之間，可以將它們拼接在一起，形成一個新的字串。 $string1=&qu
如何解決jQuery AJAX報錯403的問題？
Feb 23, 2024 pm 04:27 PM
如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使
如何使用Ajax從PHP方法取得變數？
Mar 09, 2024 pm 05:36 PM
使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：
Win11新功能解析：跳過登入微軟帳號的方法
Mar 27, 2024 pm 05:24 PM
Win11新功能解析：跳過登入微軟帳號的方法隨著Windows11的發布，許多用戶發現其帶來了更多的便利性和新功能。然而，有些用戶可能不喜歡將其係統與微軟帳戶綁定，希望跳過這一步驟。本文將介紹一些方法，幫助使用者在Windows11中跳過登入微軟帳戶，並實現更私密、更自主的使用體驗。首先，讓我們來了解為什麼有些用戶不願意登入微軟帳號。一方面，一些用戶擔心他們
Apache2無法正確解析PHP檔案的處理方法
Mar 08, 2024 am 11:09 AM
由於篇幅限制，以下是一個簡短的文章：Apache2是常用的Web伺服器軟體，而PHP是廣泛使用的伺服器端腳本語言。在建置網站過程中，有時會遇到Apache2無法正確解析PHP檔案的問題，導致PHP程式碼無法執行。這種問題通常是因為Apache2沒有正確配置PHP模組，或是PHP模組與Apache2的版本不相容所導致的。解決這個問題的方法一般有兩種，一種是
