AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等

目录

(一)其他函数的AJAX请求发送

1.axios函数

(1)发送get请求

(2)发送post请求

(3)axios函数发送请求

2.fetch函数(较少使用)

(二)跨域

1.同源策略

(1)概念

(2)案例证明

2.解决跨域的方案

(1)JSONP

(2)CORS


(一)其他函数的AJAX请求发送

1.axios函数

引入axios方法:

  1. 在里引入(bootstrap网站里找)
  2. 下载axios:npm install axios -g

推荐第一种方法

服务端:

app.all('/axios-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应头 允许任意类型的请求头
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置发送
    response.send('response from axios!')
})

(1)发送get请求

// 点击get发送请求
btns[0].addEventListener('click', function () {
    // get请求
    axios.get('/axios-server', {
    // url参数
    params: {
        id: 123,
        vip: true
    },
    // 请求头信息
    headers: {
        Name: 'csq',
        Age: 18
    }
}).then(response => (
        console.log(response) //获取响应结果 promise的then函数
    ))
})

AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第1张图片

promise的then()函数,现在还不清楚具体的功能和原理,学完ajax就补

用于获取响应体的信息

 AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第2张图片

(2)发送post请求

// 点击post发送请求 
btns[1].addEventListener('click', function () {
    // 发送post 格式:post(url{},{请求体data},{其他参数})
    axios.post('/axios-server', {
        // 请求体
        uname: 'admin',
        pwd: '123'
    }, {
        // 其它参数
        // url参数
        params: {
            id: 1,
            vip: true
        },
        // 请求头
        headers: {
            Name: 'csq',
            Age: 18
        }    
    })
})

 格式:post(url{},{请求体data},{其他参数}) 

(3)axios函数发送请求

// 点击ajax 用axios函数发送请求
btns[2].addEventListener('click', function () {
    axios({
        // 发送方式(默认get)
        method: 'POST',
        // url
        url: '/axios-server',
        // url参数
        params: {
            id: 1,
            vip: true
        },
        // 请求头
        headers: {
            Name: 'csq',
            Age: 18
        },
        // 请求体
        data: {
            uname: 'admin',
            pwd: '123'
        }
    }).then(response => {
        // promise 获取数据
        console.log(response)
        console.log(response.status)
        console.log(response.statusText)
        console.log(response.headers)
        console.log(response.data)
        console.log(response.config.headers.Name)
    })
})

 AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第3张图片

2.fetch函数(较少使用)

服务端:

// fetch函数 响应路由规则
app.all('/fetch-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    // 设置响应头 允许任意类型的请求头
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置发送
    response.send('response from fetch!')
})
// fetch函数发送请求
btn.addEventListener('click', function () 
    fetch('http://127.0.0.1:8000/fetch-server', {
        // 发送方式
        method: 'POST',
        // url参数
        params: { 
            id: 123,
            vip: true
        },
        // 请求头信息
        headers: {
            Name: 'csq',
            Age: 18
        }, 
        // 请求体 字符串类型 还有别的类型:formData等
        body: 'uname=admin&pwd=123'
        // 响应体的结果获取 then返回promise类型
    }).then(response => {
        return response.text()//转换成字符串类型
        // return response.json() //转换成json类型
    }).then(response => {
        console.log(response)
    })
})

 此处使用两个then()函数 

AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第4张图片

(二)跨域

1.同源策略

(1)概念

同源策略是浏览器最核心最基本的安全功能

如果2个URL的协议、域名(主机)、端口号都相同,则称它们同源

同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染

如果非同源(即跨域),那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收

跨域不能进行如下操作:

  • Cookie、LocalStorage 和 IndexDB 无法读写
  • DOM 和 Js对象无法获得
  • AJAX请求不能发送

可以跨域的标签:

在浏览器中,

同源策略

index.html和服务端server.js同源,点击按钮发送请求正确

AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第5张图片

 若将index.html以liveServer形式打开,因为liveServer用的是5500端口,则与服务端不同源

AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第6张图片

 报错,不能发送ajax请求(maybe)

2.解决跨域的方案

(1)JSONP

原理:动态创建script标签,src属性指向没有跨域限制;指向一个接口,接口返回的格式一定是函数表达式(数据)

jsonp的使用:

1、动态创建script标签

        const script = document.createElement('script')

2、添加script路径

        script.src = 'server.js的路径'

3、将script标签插入到目标位置

        document.body.appendChild(script

jsonp的缺点

1、只支持get请求,不支持post等请求

2、多次点击后页面会存在大量废弃script标签,使用onload事件在script标签作用后立即删除

案例分析

输入用户名,若已经存在则输入框边框变为红色,提示用户名已存在


    
    

服务端:

// 1.引入express
const express = require('express')
// 2.创建初始对象
const app = express()
// 3.路由机制 get
app.get('/check-uname', (request, response) => {
    const data = {
        uname: 'csq',
        age: 18,
        msg: '输入用户名已存在!'
    }
    // 将对象转换为字符串
    let str = JSON.stringify(data)
    // 调用handle函数
    response.send(`handle(${str})`)
})

// 4.端口监听事件
app.listen(8000, () => {
    console.log('服务器8000端口正在运行中...')
})

AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第7张图片

 弊端:

多次进行get请求后页面会留存大量script标签,造成大量冗余

AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第8张图片

 解决方法:用onload事件,即用即删,script标签完全加载完毕后触发

// 失去焦点事件 用change/blur
ipt.addEventListener('change', function () {
    // 1.动态创建script标签
    const script = document.createElement('script')
    // 2.写src
    script.src = 'http://127.0.0.1:8000/check-uname'
    // 3.将标签写到p标签后
    document.body.appendChild(script)

    // 多次请求get事件后,页面留存大量script标签
    // 4.用onload事件,即用即删
    script.addEventListener('load', function () {
        script.remove()
    }) 
})

此时script标签已删除 

AJAX(二) axios、fetch发送请求,同源策略,跨域解决方案等_第9张图片

(2)CORS

跨域资源共享是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其他源(域、协议或端口),使得浏览器允许这些源访问加载自己的资源

CORS工作原理:

通过设置一个响应头来告诉浏览器该请求允许跨域,浏览器接收到该响应后就会响应对方 

允许跨域的响应头

response.setHeader('Access-Control-Allow-Origin','*') 

更多响应头见下方链接

跨源资源共享(CORS) - HTTP | MDN

(三)小感悟

终于算是肤浅的学完了ajax?还有很多细节不熟悉,等以后遇到了具体的再补吧,学前端进度还不到30%...继续加油!!! 

你可能感兴趣的:(ajax,前端)