溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“AJAX請求及跨域問題怎么解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“AJAX請求及跨域問題怎么解決”文章吧。
AJAX其實就是異步的js和xml
通過ajax可以在瀏覽器中發送異步請求。
最大優勢：無刷新獲取數據
優點：
1.可以無需刷新頁面與服務器進行通信
2.允許根據用戶事件更新部分頁面內容
當然也存在其缺點問題：比如跨域問題等！
代碼中會出現node.js的相關代碼，比如express框架，對node.js不熟悉的同學可以先注重前端代碼
前端代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> GET 請求</title>
<style>
#result{
width: 100px;
height: 100px;
border: 1px solid pink;
}
</style>
</head>
<body>
<button class="btn">發送請求</button>
<div id="result"></div>
<script>
var btn=document.querySelector(".btn")
const result=document.getElementById("result")
btn.addEventListener("click",function(){
//1.創建對象
const xhr=new XMLHttpRequest()
//2.初始化 設置請求方法和url
xhr.open("GET","http://127.0.0.1:3000/server?a=100&b=200");//?后面是get請求加參數方法
//3.發送
xhr.send()
//4.事件綁定 處理服務端返回的結果
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
//判斷響應狀態碼
if(xhr.status>=200 && xhr.status<=300){
console.log(xhr.status);//狀態碼
console.log(xhr.statusText);//狀態字符串
console.log(xhr.getAllResponseHeaders());//所有響應頭
console.log(xhr.response);//響應體
result.innerHTML=xhr.response//把響應結果給div盒子
}
}
}
})
</script>
</body>
</html>服務端代碼
const express=require("express")
const app = express();
//1.對應get請求
app.get("/server",(req,res)=>{
//設置響應頭
res.setHeader("Access-Control-Allow-Origin","*")
//這里設置響應頭允許所有域都具有訪問資源的權限。
//不設置就存在跨域問題，訪問不到，后面我們會介紹另外一種比較簡單的解決方法
//設置響應體
res.send("hello GET-AJAX")
})
app.listen(3000,()=>{
console.log("服務啟動");
})先了解一下jQuery中AJAXGET請求和POST請求語法：
get 請求
$.get(url, [data], [callback], [type])
url:請求的 URL 地址。
data:請求攜帶的參數。
callback:載入成功時回調函數。
type:設置返回內容格式，xml, html, script, json, text，_default。
post 請求
$.post(url, [data], [callback], [type])
url:請求的 URL 地址。
data:請求攜帶的參數。
callback:載入成功時回調函數。
type:設置返回內容格式，xml, html, script, json, text,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>jQuery 發送 AJAX 請求</title> <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js" ></script> </head> <body> <button >GET</button> <button >POST</button> <script> //jQuery發送AJAX請求 -get請求 $("button").eq(0).click(function () { $.get("http://127.0.0.1:5000/jquery-server", { a: 1, b: 2 }, (data) => { console.log(data); },"json" ); }); //jQuery發送AJAX請求 -post請求 $("button").eq(1).click(function () { $.post( "http://127.0.0.1:5000/jquery-server", { a: 1, b: 2 },(data) => { console.log(data); }, "json" ); }); </script> </body> </html>
服務端代碼：
這里使用app.all()使得所有請求方法都可以訪問
const express = require('express');
const app = express();
//jQuery 服務 這里使用app.all()使得所有請求方法都可以訪問
app.all('/jquery-server', (request, response) => {
//設置響應頭 設置允許跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX get');
const data = {name:'小吳同學'};
response.send(JSON.stringify(data));
});
//4. 監聽端口啟動服務
app.listen(5000, () => {
console.log("服務啟動");
});跨域問題：當我們的瀏覽器從一個域名的網頁去請求另一個域名的資源時，其中域名、端口、協議任一不同，都是屬于跨域
示范例子
前端請求代碼如下 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CORS</title>
<style>
#result{
width:200px;
height:100px;
border:solid 1px pink;
}
</style>
</head>
<body>
<button class="btn">發送請求</button>
<div id="result"></div>
<script>
const btn = document.querySelector('.btn');
btn.onclick = function(){
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:5000/server");
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
//輸出響應體
console.log(xhr.response);
result.innerHTML=xhr.response
}
}
}
}
</script>
</body>
</html>服務端我介紹兩種簡單且效率極高的方法解決跨域問題
1.在服務端設置header
const express = require('express');
const app = express();
app.all('/server', (request, response)=>{
//設置響應頭方法
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", '*');
response.setHeader("Access-Control-Allow-Method", '*');
response.send('設置響應頭解決跨域問題成功');
});
app.listen(5000, () => {
console.log("服務啟動");
});2.使用中間件cors
const express = require('express');
const app = express();
//使用cors中間件方法
const cors=require("cors")
app.use(cors())
app.all('/server', (request, response)=>{
response.send('使用cors中間件解決跨域問題成功');
});
app.listen(5000, () => {
console.log("服務啟動");
});這里給大家具體講一下cors中間件使用步驟
1.在終端使用 npm i cors 命令下載這個中間件
2.使用require導入cors中間件：const cors=require(“cors”)
3.用app.use()方法注冊中間件：app.use(cors()) 注意：這個注冊方法一定要寫在在配置路由之前
一.JSONP跨域
JSONP(JSON with Padding)，是一個非官方的跨域解決方案，只支持get請求(具有局限性)
工作原理：JSONP 就是利用 script 標簽的跨域能力來發送請求的。
二.nginx反向代理
大致解釋：
www.A.com/index.html需要調用www.B.com/server.js，可以寫一個中間接口www.A.com/server.js，靠著這個接口在服務端
去調用www.B.com/server.js并拿到返回值，然后再返回給index.html
這個方法一般很少使用，它可以不用目標服務器與前端配合，但是需要搭建一個中轉nginx服務器，用于轉發請求。
以上就是關于“AJAX請求及跨域問題怎么解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
