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