Ajax、JSON及跨域问题

原创已于 2022-03-09 20:24:57 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #json #服务器

于 2022-03-09 15:38:27 首次发布

浏览器与Ajax 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Ajax的使用，包括XMLHttpRequest对象、Ajax的使用步骤、GET和POST请求。接着讨论了JSON的格式规范，如JSON.parse()和JSON.stringify()方法。此外，文章还探讨了跨域问题，提出了CORS、JSONP和接口代理三种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Ajax

1. XMLHttpRequest

XMLHTTPRequest是一个构造函数，是Ajax实现浏览器与服务器异步通信的关键

2. Ajax 的使用步骤

1. 创建 xhr 对象

const xhr = new XMLHttpRequest()

2. 准备发送请求

xhr.open('HTTP方法','URL地址','是否异步')

3. 发送请求 send()

send() 的参数是通过请求体携带数据，故如果是get请求，send()则不可以携带参数

xhr.send()

4. 监听事件，处理响应

当获取到响应后，会触发 xhr 对象的readystatechange 事件，可以在该事件中对响应进行处理
readystatechange 事件监听 readyState 的状态变化，一共有 0~4 ，5个状态，每个状态的变化都会触发readystatechange事件

0：未初始化，尚未调用 open()

1：启动，已经调用了open，但尚未调用send

2：发送，已经调用了send，但尚未接收到响应

3：接收，已经接收到部分响应数据

4：完成，已经接收到全部响应数据，并且可以在浏览器中使用

当获取到响应后，响应的内容会自动填充到 xhr对象的属性上

 xhr.onreadystatechange=() => {
      if(xhr.readyState !== 4) return
      // xhr.status：http状态码
      // xhr.statusText：http状态的说明
      if((xhr.status>=200 && xhr.status<300) || xhr.status === 304){
        // 正常返回的处理
      }else {
        // 错误处理
      }
    }

readystatechange 可以搭配addEventListener使用，但IE6~8不支持addEventListener
考虑兼容性问题，readystatechange 不使用 this ，直接使用 xhr
处于兼容性考虑，readystatechange 监听事件最好放在open之前

5. 使用Ajax完成前后端通信

 const url = 'https://www.imooc.com/api/http/search/suggest?words=js'
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = () => {
      if(xhr.readyState !== 4) return
      if((xhr.status>=200 && xhr.status<300) || xhr.status === 304){
        console.log(xhr.responseText)
      }else {
        // 错误处理
      }
    }
    xhr.open('GET',url,true)
    xhr.send()

3. GET 请求

get 请求不能通过请求体传递数据，只能通过请求头携带数据，在最后拼接 ?name=value&name1=value1 ，多个参数用 & 连接
如果携带的数据是非英文字母，则需要先进行编码 encodeURIComponent()

4. POST 请求

post 主要通过请求体携带数据，但也可通过请求头携带
如果携带的数据是非英文字母，则需要先进行编码 encodeURIComponent()

二、JSON

JSON 是Ajax 发送和接收数据的一种格式
.json 文件中不允许注释
最后一项不可以加逗号

JSON的简单值形式

简单值与JavaScript的基本类型值对应：number、string、boolean、null，但不支持undefined
JSON必须使用双引号包裹字符串

2. JSON的对象形式

与JavaScript的对象对应
JSON中对象的属性名必须用双引号，属性值如果是字符串也也必须用双引号
不支持undefined

{
  "name":"dudu",
  "age":19,
  "hobby":["足球","乒乓球"],
  "family": {
    "dog":"萨摩耶"
  }
}

3. JSON的数组形式

对应JS的数组

2.1 JSON.parse()

JSON.parse() 用于将JSON格式的字符串解析成JS中的对应值

JSON.parse(xhr.responseText)

2.2 JSON.stringify()

JSON.stringify() 用于将JS的基本数据类型、对象或数组转换为JSON格式的字符串

2.3 localStorage 的封装

// 简化写法，避免每次写localStorage
const storage = window.localStorage

// 设置
const set = (key,value) => {
  storage.setItem(key,JSON.stringify(value))
}

// 读取数据
const get = key => {
 return JSON.parse(storage.getItem(key))
}

// 删除数据
const remove = key => {
  storage.removeItem(key)
}

// 清空数据
const clear = () => {
  storage.clear()
}

export {
  set,
  get,
  remove,
  clear
}

三、跨域

协议、域名、端口号中有任何一个不一样，就是不同域，与路径无关
端口号为默认的时候可以省略

阻止跨域是浏览器本身的一种安全策略——同源策略

1. 跨域解决方案——CORS 跨域资源共享

CORS主要是在后端进行处理，前端直接调用
IE10+ 才可以使用CORS

2. 跨域解决方案 —— JSONP

前端适配，后台修改

1. 原理

script标签跨域不会被浏览器阻止
JSONP就利用script标签的这一原理，加载跨域文件
相当于是通过JS进行访问的，而不是通过 XHR 去发送请求

2. 实现

安装JSONP插件

cnpm i jsonp --save-dev

使用

import jsonp from "jsonp";

export default {
  name: "App",
  setup() {
    onMounted(() => {
      let url = `https://coding.imooc.com/?c=vuejs&sort=1`;
      jsonp(url, (err,res) => {});
    });
  },
};

请求结果

3. 跨域解决方案——接口代理

通过修改Nginx服务器配置实现
是在前端进行修改，后台不动

3.1 新建 vue.config.js

module.exports = {
  devServer:{
    host: 'localhost', // 主机
    port: 8080, // 端口号
    // 代理的配置
    proxy:{
      // 在使用时，遇到‘/api’就会自动用target的URL替代
      '/api':{
        target:'xxxxx',
        changeOrigin:true,
        // 转发地址
        pathRewrite: {
          '/api':''
        }
      }
    }

  }
}