ajax&fetch跨域
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解决跨域问题
JSONP 备用方案

1.利用script引入接口文件
2.callback后面的函数 ,参数部分就是我们需要使用的数据


XHR对象

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

XHR的事件


FormData

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


所有评论(0)