js原生ajax以及原生fetch_js fetch ajax-CSDN博客

本文链接：https://blog.csdn.net/weixin_32682577/article/details/81328777

第一部分

ajax

全称asynchronous JavaScript and xml 异步JavaScript和xml 是js技术和xml技术的组合，并不是新生的东西

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

ajax的核心是XMLHttpRequest对象，目前所有浏览器都支持XMLHttpRequest

XMLHttpRequest 对象

readyState属性介绍

readyState当一个XMLHttpRequest创建开始，这个属性就从0开始了
0表示Uninitialized状态，XMLHttpRequest实例已创建或者实例被abort方法重置
1表示已经调用了实例的open方法但是send方法未调用，请求还未发送
2表示已调用send方法，请求已经发送到服务端，但是未收到回应
3表示Receiving状态，表示已经接收到了所有响应头，但是响应体开始接收但未接收完成
4表示HTTP响应已完全接收
readyState属性值不会递减，触发在请求过程中实例调用了abort方法或者open方法
readyState每次递增都会触发onreadystatechange事件

responseText属性

responseText保存了当前实例接收到的HTTP响应主体(body)，不包括响应头
readyState小于3时未接收到任何响应体，此属性为空字符串
readyState等于3时收到，收到部分响应体。等于4时收到了所有响应体

responseXML属性

将响应体解析为xml并作为Document对象返回

status属性

由服务器返回的状态码
状态码200表示成功"OK"
状态码404表示"NOT FOUND"
其他常见状态码301、302、303、401、403、500、503等
如果在readyState小于3时读取此属性会报错

statusText属性

由服务器返回的status属性的字符串状态
如果status为200就是OK、404即为NOT FOUND

实例事件onreadystatechange

在readyState改变时会触发此事件，在readyState等于3时可能会调用多次
vm.onreadystatechange = function () {}

实例方法abort

取消当前请求，关闭网络请求，并取消所有未决的网络活动
实际上就是把实例的readyState属性置为0
vm.abort()

实例方法getAllResponseHeaders

获取响应头，响应头以字符串返回
在readyState小于3调用此方法返回值为null
vm.getAllResponseHeaders()

实例方法getResponseHeader

获取指定的key的响应头内容，key的对比是不区分大小写的
在readyState小于3调用此方法返回值为''
vm.getResponseHeader(key)

实例方法open

初始化请求参数配置，并未发送请求
vm.open(type,url,是否异步)

实例方法send

发送请求，还可以传递POST请求参数体
vm.send(body可选)

实例方法setRequestHeader

向一个已打开但未发送的请求设置一个请求头key和value
vm.setRequestHeader(key, value)

请求封装

// XMLHttpRequest对象
export const ajax = (url, data, type = 'GET') => {
  return new Promise((resolve, reject) => {
    let ajaxVM = new XMLHttpRequest()
    type = type.toUpperCase()
    if (type === 'GET') {
      url = url + getQueryStr(data)
    }
    ajaxVM.open(type, url, true)
    if (type === 'POST') {
      ajaxVM.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
      debugger
      ajaxVM.send(data)
    } else {
      ajaxVM.send()
    }
    ajaxVM.onreadystatechange = function () {
      if (ajaxVM.readyState === 4) {
        if (ajaxVM.status === 200) {
          resolve(JSON.parse(ajaxVM.responseText))
        } else {
          reject(new Error(ajaxVM.responseText))
        }
      }
    }
  })
}

// 获取get请求的参数拼接
const getQueryStr = (data) => {
  let queryStr = '?'
  let queryStrArr = []
  for (let key in data) {
    queryStrArr.push(`${key}=${data[key]}`)
  }
  return queryStr + queryStrArr.join('&')
}

// Fetch对象
export const myFetch = (url, data, type = 'GET') => {
  type = type.toUpperCase()
  if (type === 'GET') {
    url = url + getQueryStr(data)
    return fetch(url, {
      headers: {
        'content-type': 'application/json'
      },
      method: type
    }).then(response => response.json())
  }
  return fetch(url, {
    body: JSON.stringify(data),
    headers: {
      'content-type': 'application/json'
    },
    method: type
  }).then(response => response.json())
}

使用流程：

创建XMLHttpRequest对象实例 var ajax = new XMLHttpRequest()
使用open方法设置和浏览器交换信息ajax.open('post方式或者get方式',所请求的url地址,是否异步发送，默认为true)
发送数据与服务器进行交互ajax.send()
注册事件ajax.onreadystatechange = function(){}
更新页面，通过对服务器返回来的数据渲染到页面上，通过innerHTML等方法

详细代码：

get请求

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
　　　　console.log(ajax.responseText);//输入相应的内容
  　　}
}

post请求

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

封装成通用方法

function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);

        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);

        // 需要设置请求头报文，服务器端收到请求后先看请求头，看你发过来的数据是什么类型
        // application/x-www-form-urlencoded表示对发过来的数据进行url转码，参数被拼接到了请求URL上
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }

}

原生ajax对象XMLHttpRequest对象实例中各方法及参数解释

post和get区别：

get常用于客户端向服务器发送请求查询某些信息，请求发送的参数也就是发送给服务器的数据可以拼接到url上，发送的数据大小不能超过2kb例如
```
xhr.open( "get", "example.php?name1=value1&name2=value2",true );
```
post请求常用语客户端向服务器端发送要被保存的数据，还有服务器端向客户端推送的数据也常用post发送，post请求的参数不能拼接到url上，而是作为http请求的消息实体发送给服务器，发送的数据大小理论上是没有限制的，发送数据的大小跟http协议无关，只是根据浏览器的不同导致的数据大小不一，POST请求必须设置Content-Type值为application/x-form-www-urlencoded；如果不设置Content-Type 头部信息，那么发送给服务器的的数据就不会出现在$_POST（PHP语言中的接收从客户端发送过来的变量）超全局变量中。
get安全性非常低，post安全性较高。使用Get请求时,参数在URL中显示,而使用Post请求,则不会显示出来。GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等

第二部分

fetch

fetch是一个浏览器window上一个用于跟后台交互的请求的全局api

fetch是ajax和promise的组合，是一个目前来说较新的api，各个老版本的浏览器基本不支持 fetch compatiable

fetch的使用

直接全局调用fetch()方法，第一个参数是请求的url，第二个参数是对象，用于定义请求的各个参数
fetch整合了Request、Response、Headers对象

fetch的get请求

fetch('http://localhost:3000/test').then(res => {
  res.json().then(data => {
    console.log(data)
  })
}).catch(err => {
  console.log(err)
})

// json方法是对返回的二进制流进行解析成json字符，转换二进制流也是一个异步过程
// json方法返回的也是一个promise

fetch的post请求

fetch('http://localhost:3000/test-post', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: 'zhangsan',
    password: '123'
  })
}).then(res => {
  res.json().then(data => {
    console.log(data)
  })
}).catch(err => {
  console.log(err)
})