ajax
XMLHttpRequest();
readystatechange()
status 200 - 300 304
open(); get post
send();
json
JSON.parse();
在这里插入图片描述
JSON.stringfy();
在这里插入图片描述

axios

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

cdn

npm
$ npm install axio

相关文章链接:https://www.jianshu.com/p/cdec60909094
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
自动匹配请求头类型
在这里插入图片描述

fetch

在这里插入图片描述
Fetch基本用法:
fetch() 是一个函数 可以直接调用的。console.log(fetch);
ajax不可以直接调用

fetch() 调用后返回Promise对象

const url = ''
//fetch()至少传一个参数 url
//第二个参数 是对象 用来配置参数
//formdata不需要传 content-type
//const  fd = new FormData();
//fd.append('username','ming')

fetch(url,{
  //第二个参数
  method:'post',
  //请求头只能在url 中添加params
  //xhr.send() 请求体
  body:'name=ming&age=18',
//  body:JSON.stringfy({'name':'ming'}) //转json
  //body:fd
  //header为 aaplication/json  联系后端 配置接口格式
  headers:{
     'Content-type':'application/x-www-form-urlencoded'
     
  },
   //跨域资源共享  默认就是
  mode:'cors' ,
  credentials:'include'   //包含cookie
  
}).then(response=>{
   console.log(response);
   //body 只能读取一次  读过不能读取第二次

   //ok 
   //如果是ture  表示可以读取数据 不用再去判断http状态
   if(response.ok){
			console.log(response.json());
      return response.json();
      //不是json可以用text
     //  response.text();
  }else{
 //抛出异常
        throw new error (`http code 异常 ${response.status}`)
   }
  

}).then(data=>{
   //接收返回数据
   console.log(data);

}).catch(err=>{
	console.log(err);
});

在这里插入图片描述
在这里插入图片描述

课程总结:

1.Ajax 使用步骤 :
在这里插入图片描述
兼容性不如第一个
在这里插入图片描述
method :get post
url:api
是否异步:ture
在这里插入图片描述

在这里插入图片描述
Get 和 Post 请求
在这里插入图片描述
在这里插入图片描述
可以使用到·${}· 模板字符串
在这里插入图片描述

JSON的三种形式
在这里插入图片描述

1.和字符串有关的都需要加**“双引号”**
在这里插入图片描述
在这里插入图片描述
JSON 的方法
不仅仅用到 ajax 中
JSON.stringfy() 转成json格式
JSON.parse() 响应中 对应的字符串在这里插入图片描述在这里插入图片描述

跨域

不同域之间的互相请求就是跨域
在这里插入图片描述
CORS跨域资源共享

优先使用CORS解决跨域问题houduan
JSONP 备用方案

在这里插入图片描述
1.利用script引入接口文件
2.callback后面的函数 ,参数部分就是我们需要使用的数据
在这里插入图片描述
在这里插入图片描述

XHR对象

在这里插入图片描述

XHR属性在这里插入图片描述

兼容性网站推荐:
https://caniuse.com/
http://www.nengyongma.com/

XHR方法

在这里插入图片描述

XHR的事件

在这里插入图片描述

在这里插入图片描述

FormData

在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐