AJAX请求及解决跨域问题

AJAX 介绍

AJAX其实就是异步的js和xml
通过ajax可以在浏览器中发送异步请求。最大优势：无刷新获取数据
优点：
1.可以无需刷新页面与服务器进行通信
2.允许根据用户事件更新部分页面内容
当然也存在其缺点问题：比如跨域问题等！

一.原生AJAX请求(GET)

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

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

    
    
    
    
    


    发送请求
    

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

服务端代码

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("服务启动");
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

二.jQuery AJAX请求(GET 和POST)

先了解一下jQuery中AJAXGET请求和POST请求语法：

1. get 请求
   $.get(url, [data], [callback], [type])
   url:请求的 URL 地址。
   data:请求携带的参数。
   callback:载入成功时回调函数。
   type:设置返回内容格式，xml, html, script, json, text，_default。

2. post 请求
   $.post(url, [data], [callback], [type])
   url:请求的 URL 地址。
   data:请求携带的参数。
   callback:载入成功时回调函数。
   type:设置返回内容格式，xml, html, script, json, text,

  
    
    
    
    
  
  
      GET
      POST
    
  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

服务端代码：

这里使用app.all()使得所有请求方法都可以访问

详解ajax跨域问题解决方案

pdf 0星 超过10%的资源 95KB

下载

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("服务启动");
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三.跨域问题的解决

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

示范例子
前端请求代码如下 ：

    
    
    
    


    发送请求
    

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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

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("服务启动");
});
1
2
3
4
5
6
7
8
9
10
11
12

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("服务启动");
});
1
2
3
4
5
6
7
8
9
10
11
12

这里给大家具体讲一下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服务器，用于转发请求。

希望博主的理解分享对大家有所帮助！

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦