您现在的位置是：首页 > 编程语言学习 > 后端编程语言 > 文章正文后端编程语言

AJAX请求与跨域问题解决方法详解

2022-11-28 10:23:41 后端编程语言

简介AJAX其实就是异步的js和xml，通过ajax可以在浏览器中发送异步请求。最大优势：无刷新获取数据优点：1.可以无需刷新页面与服务器进行通信2....

AJAX其实就是异步的js和xml，通过ajax可以在浏览器中发送异步请求。

最大优势：无刷新获取数据

优点：

1.可以无需刷新页面与服务器进行通信

2.允许根据用户事件更新部分页面内容

当然也存在其缺点问题：比如跨域问题等！

一.原生AJAX请求(GET)

由于get和post请求类似，原生代码相比jQuery复杂一些：原生代码演示get请求 jquery演示get和post请求

代码中会出现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 AJAX请求(GET 和POST)

先了解一下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("服务启动");

});