您现在的位置是:首页 > 编程语言学习 > 后端编程语言 > 文章正文 后端编程语言
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("服务启动");
- });
这里给大家具体讲一下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服务器,用于转发请求。
上一篇:Dom-api MutationObserver使用方法详解
下一篇:最后一页