前端面试总结11-WebApi-Ajax

1.同源策略：

ajax请求时，浏览器要求当前网页和serve必须同源（安全），即协议，域名，端口三者必须一致

2.可无视同源策略的情况

（1：<img/>可用于统计打点，可使用第三方统计服务

（2：<link/><script>可使用CDN,CDN一般都是外域

（3：<script>可实现jsonp

3.跨域：

（1：所有的跨域都必须经过serve端允许配合

（2：未经serve端允许就实现跨域，说明浏览器有漏洞，危险信号

4.JSONP:

（1：<script>可绕过跨域限制

（2：serve端可以任意动态拼接数据返回

（3：所以<script>就可以获得跨域的数据，只要服务端愿意返回

 

5.jquery实现jsonp

 

 6.cors实现跨域，客户端配置

 

 7.手写一个简易ajax

function ajax(url){

const p = new Promise((resolve,reject)=>{

const xhr = new XMLHttpRequest();

xhr.open('GET',url,true);

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

if(xhr.status===200){

resolve(

JSON.parse(xhr.responseText);

)

}

else if(shr.status===404){

reject(new Error('404 not found'))

}

}

}

xhr.send(null);

})

return p;

}

 8.xhr.readyState

 

 9.shr.status

 

 10.fetch()

（1：fetch返回promise对象

（2：仅当网络故障时或请求被阻止时，才会标记为reject

（3：默认情况下fetch不会从服务端发送或接收任何cookies

11:axios使用