ajax入门

最新推荐文章于 2024-09-16 08:47:17 发布

白潏

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量48

点赞数

文章标签： 1024程序员节 javascript ajax html

本文链接：https://blog.csdn.net/qq_65719034/article/details/134002538

版权

ajax 用于浏览器和服务器之间通信，动态数据交互
url统一资源定位符
url的构成：协议 http 域名 baidu.com 资源路径/ss/ss
http协议：超文本传输协议规定浏览器和服务器之间传输数据的格式
域名：标记服务器在互联网中方位必须的
url 查询参数
定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xx.com/xx/x?参数名1=值1&参数名2=值2

常用的请求方法
对服务器资源，要执行的操作
GET：获取数据
POST：提交数据
PUT：修改数据（全部）
DELETE：删除数据
PATCH：修改数据（部分）

axios请求配置
url 请求的url网址
method：请求的方法 get 可以省略（不区分大小写）
data：提交数据

http协议请求报文
http协议：规定了浏览器发送及服务器返回内容的格式
请求行：请求方法，url，协议
请求体：发送的资源
响应报文
响应体：返回的资源

http响应状态码
用来表明请求是否成功完成
1xx 信息
2xx 成功
3xx 重定向消息
4xx 客户端错误
5xx 服务端错误

form-serialize中
hash为true 提交js对象 false：字符串
empty true 获取空值 false 不获取空值

实际开发中如果数据对象“属性”和标签“类名”一致
遍历数组对象，使用属性去获取对应的标签，快速赋值

定义： XMLHttpRequest（XHR）对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特
定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在AJAX编程中被大量使用。
关系：axios 内部采用XMLHttpRequest与服务器交互

const xhr=new XMLHttpRequest()
xhr.open('请求方法','请求url网址')
xhr.addEventListener('loadend',()=>
{
//响应结果，监听loaded事件
console.log(xhr.response)
})
xhr.send()//发送请求

const paramsobj=new URLSearchParams({
//参数名1：值1
//参数名2：值2
})
const querySelector=paramsobj.toString()
//生产指定格式，结果：参数名1=值1&参数名2=值2

使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

xhr.setRequestHeader('Content-Type','application')
//告诉服务器，传递的是json字符串

const user={
username:'klk',
password:'ssssss'
}
const userstr=JSON.stringify(user)
//将数据转成json字符串
xhr.send(userstr)

promise 对象用于表示一个异步操作的最终完成（或失败）及其结果值

const p=new Promise((resolve,reject)=>{
//执行异步任务-并传递结果
//成功调用：resolve(值)触发then（）执行
//失败调用：reject(值) 触发catch（）执行
})
p.then(result=>{
//成功
}).catch(error=>{
//失败
})

一个promise对象，必然处于以下几种状态之一
待定（pending）：初始状态，既没有被兑现，也没有被拒绝
已兑现(fulfilled):操作成功完成
已拒绝（rejected）：操作失败

promise对象一旦被兑现/拒绝就是已经敲定了，状态无法改变
//自制axios
function myAxios(config){
return new Promise((resolve,reject)=>{
})
}
myAxios({
url:'地址',
params:{
//参数名1：值1
//参数名2：值2
}
}).then(result=>{

}).catch(error=>{

})

同步代码：逐行执行，需原地等待结果，才继续向下执行
异步代码:调用后耗时，不阻塞代码执行，在将来完成后触发一个回调函数
回调函数地狱
概念:在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
缺点：可读性差，异常无法捕获，耦合性严重
promise-链式调用
概念：依靠then()方法会返回一个新生成的promise对象特性，继续串联下一环任务，直到结束
细节：then（）回调函数中的返回值，会影响生成的promise对象最终状态和结果
好处：可以解决回调函数嵌套问题

async函数和await
定义：async函数使用async关键字声明的函数，async函数是AsyncFunction构造函数的实例，并且其中允许使用Await关键字。async和await关键字让我们可以使用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise

try{
//要执行的代码
}catch{
//error接收的是，错误信息
//try里代码，如果有错误，直接进入这里执行
}

事件循环（EventLoop）
概念：js有一个基于事件循环的并发模型，事件循环负责执行代码，收集和处理事情以及执行队列中的子任务。这个模型与其他语言中的模型截然不同·
js单线程，为了让耗时代码不阻塞其他代码运行，设计了事件循环模型

宏任务和微任务
异步任务分：
宏任务：由浏览器环境执行的异步代码（js脚本执行事件，setTimeout/setlnterval，ajax请求完成事件，用户交互事件）
微任务：由js引擎环境执行的异步代码（Promise对象.then()）
若调用栈空闲时会先调用微任务，然后宏任务

Promise.all静态方法
概念：合并多个promise对象，等待所有同时成功完成（或某一个失败）,做后续逻辑
const p=Promise.all([Promise对象，promise对象])
p.then(result=>{
//result结果：[promise对象成功结果，Promise对象成功结果]
}).catch(error=>{
//第一个失败的Promise对象，抛出的异常
})

axios请求拦截器：发送请求之前，触发的配置函数，对请求参数进行额外配置
axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应结果统一处理


document.querySelector('.btn').addEventListener('click',()=>{
    let time_stamp=Date.parse(new Date())
    let email='3087342423@qq.com'
    let checkType='2'
     let s=email+'we are winner'+checkType+'we are winner'+time_stamp
    let token=hex_md5(s)
    axios(
        {
            url:'http://my.yuanerya.top:9898/yuaner_community/api/sentEmailCode',
            method:'POST',
            params:{
                email,
                checkType,
                token,
                time_stamp
            }
        }).then(result =>{
            console.log(result)
        }).catch(error=>{
            // alert(error.message)
        })
        
})

//上传图片
document.querySelector('img').addEventListener('change',e=>
{
    //使用formData 携带图片文件
    const fd =new FormData()
    fd.append('img',e.target.files[0])
    axios(
        {
            url:'http://my.yuanerya.top:9898/yuaner_community/api/sentEmailCode',
            method:'POST',
           data:fd
        }).then(result =>{
            console.log(result)
            //返回服务器上的图片地址
            const imgUrl=result.data.data.url
            document.querySelector('.my-img').src=imgUrl
        }).catch(error=>{
            // alert(error.message)
        })
})

const xhr=new XMLHttpRequest()
xhr.open('请求方法','请求url网址')
xhr.addEventListener('loadend',()=>
{
    //响应结果，监听loaded事件
    console.log(xhr.response)
})
xhr.send()//发送请求

const paramsobj=new URLSearchParams({
    //参数名1：值1
    //参数名2：值2
})
const querySelector=paramsobj.toString()
//生产指定格式，结果：参数名1=值1&参数名2=值2

xhr.setRequestHeader('Content-Type','application')
//告诉服务器，传递的是json字符串

const user={
    username:'klk',
    password:'ssssss'
}
const userstr=JSON.stringify(user)
//将数据转成json字符串
xhr.send(userstr)

const p=new Promise((resolve,reject)=>{
//执行异步任务-并传递结果
//成功调用：resolve(值)触发then（）执行
//失败调用：reject(值) 触发catch（）执行
})
p.then(result=>{
    //成功
}).catch(error=>{
    //失败
})
//自制axios
function myAxios(config){
    return new Promise((resolve,reject)=>{
    })
}
myAxios({
    url:'地址',
    params:{
         //参数名1：值1
    //参数名2：值2
    }
}).then(result=>{
   console.log(result)
}).catch(error=>{
    console.dir(error)
})