概念

数据交换格式，就是服务器端与客户端之间数据传输的格式。

两种数据交换格式：

1. XML（很少用）
2. JSON（主流）

JSON

JSON（全称：JavaScript Object Notation）是一种数据交换格式，它本质上是用字符串的方式来表示对象或数组类型的数据。

JSON数据

用字符串的方式来表示的对象或数组类型的数据，叫做 JSON 数据。

JSON 数据的格式有两种：

1. 对象格式

   对象格式的 JSON 数据，最外层使用 { } 进行包裹，内部的数据为 key: value 的键值对结构。

   • key 必须使用英文的双引号进行包裹

   • value 的值只能是字符串、数字、布尔值、null、数组、对象类型（可选类型只有这 6 种）

2. 数组格式

   数组格式的 JSON 数据，最外层使用 [ ] 进行包裹，内部的每一项数据之间使用英文的 , 分隔

案例 - 封装自己的 Ajax 函数

// 调用函数
myrequest({
  method: 'get',
  url: 'http://www.liulongbin.top:3006/api/get',
  params:{
    name : '小明',
    age : 18,
  },
  success: function(res){
    //  res响应结果
    console.log(res)
  }
})

let fd = new FormData()
fd.append('name','小明')
fd.append('age',18)

myrequest({
  method: 'post',
  url: 'http://www.liulongbin.top:3006/api/post',
  // data: fd,
  // data:'name=小明&age=18',
  data: {
    name : '小明',
    age : 18,
  },
  success: function(res){
    //  res响应结果
    console.log(res)
  }
})

// 定义函数
function myrequest(option){
  // 发送ajax请求
  let xhr = new XMLHttpRequest()

  xhr.onload = function(){
    option.success(JSON.parse(this.response))
  }

  // 判断请求方式
  switch (option.method) {
    case 'get':
    case 'Get':
    case 'GET':
        // 带有参数
      if(option.params){
      // 将查询查询参数拼接到url
        let ary = []
        for (const key in option.params) {
          ary.push(key + '=' + option.params[key])
        }
        const str = ary.join('&')
      // 设置请求方式，请求地址
        xhr.open(option.method,option.url + '?' + str)
      } 
      else{
      // 设置请求方式，请求地址
        xhr.open(option.method,option.url)  
      }
      // 向服务端发送请求
      xhr.send()
      break;
    case 'post':
    case 'Post':
    case 'POST':
      // 设置请求方式，请求地址
      xhr.open(option.method,option.url)
      if(option.data){ 
        // 数据格式设置
        let ct = 'application/x-www-form-urlencoded'
        // 发送时传送的数据体
        let sendData = option.data

        // 判断 options.data 是否为 FormData 格式
        if (option.data instanceof FormData) {
          ct = 'multipart/formdata'
        }
        // 何判断数据体是否为字符串类型
        else if (typeof option.data === 'string') {
          ct = 'application/x-www-form-urlencoded'
        }
        // 判断数据体是否为对象类型
        else if (typeof option.data === 'object') {
          ct = 'application/josn'
          sendData = JSON.stringify(option.data)
        }
        // 设置数据体的格式
        xhr.setRequestHeader('Content-Type', ct)
        // 向服务端发送请求
        xhr.send(sendData)
      }
      else {
      // 向服务端发送请求
        xhr.send()
      }
      break;
    default:
      break;
  } 
}

标签：option,data,xhr,JSON,格式,数据交换,请求
来源： https://www.cnblogs.com/yyshow/p/16355030.html