ajax(二)

最新推荐文章于 2022-05-18 15:12:12 发布

立夏(从未遇见，一直听说)

最新推荐文章于 2022-05-18 15:12:12 发布

阅读量96

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_43732831/article/details/104487293

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文深入探讨了Promise作为异步编程解决方案的使用，包括Promise的三种状态以及then和catch方法的应用。此外，介绍了Ajax的同源策略，强调了其在保护资源安全性上的作用，并列举了跨域的四种常见方式，如JSONP和XHR2。通过实例展示了如何利用JSONP实现跨域请求，以及如何动态创建script标签并设置回调函数。

摘要由CSDN通过智能技术生成

上一篇ajax遗留问题我们用promise和jsonp来解决

Promise----异步编程解决方案

Promise是一个构造函数，所以使用时要在前加上new
Promise有三种状态，resolved的(成功状态)，reject（失败状态），
pedding(进行中)
new Promise((resolve,reject)=>{
… if（true）{
……resolve() //标志成功状态
…}else{
……reject() //标志失败状态
}
resolve（str）中可以带参，then((str)=>{接收resolve带来的参数})，针对有依赖关系可以这么写

Promise的两个原型方法

1.promise.prototype.then
当前Promise对象返回resolve状态，调用then方法
2.promise.prototype.catch
当前Promise对象返回reject状态，调用catch方法
ps只有promise对象才能调用
…let op=new Promise((resolve,reject)=>{
…if(true){
…resolve()
…}else{
…reject()
…}
…})
op.then((data)=>{
…
}).catch((err)=>{})
promise还有一个静态方法
Promise.all()其中接收的是一个数组，当数组中所有promise对象都返回resolve时，当前promise对象才标志成功，只要其中有一个返回reject,当前的promise对象都返回reject（）
例如Promise.all( [loadImgarr[0]，loadImgarr[0]，loadImgarr[0] ])

Ajax的同源策略（保护资源的安全性）

同源：同协议，同域名，同端口
ajax不可以跨域
跨域一般有四种方式
1，后端代理
【2.jsonp】非官方协议
3，xhr2
4，nginx(网关)
jsonp原理：利用src的跨域属性，动态的创建script标签，给src指定跨域接口，并由指定的回调函数将资源返回
1.将输入替换成我们要输入的
2.将回调函数换成我们写的函数（必须是全局函数）
const oInput=document.querySelector(‘input’);
const oUl=document.querySelector(‘ul’)
oInput.οnkeyup=function(){
…oUl.innerHTML=’’;
…let sc=document.createElement(‘script’);
…sc.src=https://www.baidu.com/sugrec?pre=1&p=3&ie=utf- …8&json=1&prod=pc&from=pc_web&wd=${this.value}&req=2&bs=304%E…9%94%99%E8%AF%AF&pbs=304%E9%94%99%E8%AF%AF&csor=3…&pwd=12&cb=fn&_=1582531449488
…document.getElementsByTagName(‘head’)[0].appendChild(sc);
}
function fn(data){
…for(let i=0,len=data.g.length;i<len;i++){
…let li=document.createElement(‘li’)
…li.innerHTML=data.g[i].q;
…oUl.appendChild(li)
…}
}