失眠网 > AJAX请求及解决跨域问题

AJAX请求及解决跨域问题

时间：2018-09-09 19:55:21

相关推荐

AJAX请求及解决跨域问题

AJAX 介绍

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.初始化设置请求方法和urlxhr.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><scriptcrossorigin="anonymous"src="/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()使得所有请求方法都可以访问

三.跨域问题的解决

跨域问题：当我们的浏览器从一个域名的网页去请求另一个域名的资源时，其中域名、端口、协议任一不同，都是属于跨域

示范例子

前端请求代码如下：

<!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()) 注意：这个注册方法一定要写在在配置路由之前