AJAX请求以及解决跨域问题详解

最近开始学习ajax,学习ajax必须得掌握的就是跨域请求,实际上在不同源的地址上发送请求就是跨域请求,下面这篇文章主要给大家介绍了关于AJAX请求以及解决跨域问题的相关资料,需要的朋友可以参考下

AJAX 介绍

AJAX其实就是异步的js和xml

通过ajax可以在浏览器中发送异步请求。

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

优点：

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

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

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

一.原生AJAX请求(GET)

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

代码中会出现node.js的相关代码，比如express框架，对node.js不熟悉的同学可以先注重前端代码
前端代码：

   GET 请求

服务端代码

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,

  jQuery 发送 AJAX 请求

服务端代码：

这里使用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("服务启动"); });

三.跨域问题的解决

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

示范例子

前端请求代码如下：

  CORS

服务端我介绍两种简单且效率极高的方法解决跨域问题

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