Ajax常见请求方法(详细)

一、GET请求

javascript 复制代码
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和 url
xhr.open('GET','http:/127.0.0.1:8000/server')
//3.发送
xhr.send()
//4.事件绑定 处理服务端返回的结果
//-readystate 是 xhr对象中的属性,表示状态 0 1 2 3
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 ){
    //响应码 200 404 403 401 500
     if(xhr.status >=200 && xhr.status < 300){
        result.innerHTML  = xhr.response
}}}

二、POST请求

javascript 复制代码
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和 url
xhr.open('POST','http:/127.0.0.1:8000/server')
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.setRequestHeader('name','hhhh')//自定义请求头
//3.发送
xhr.send('a=100&b=200&c=300')
//4.事件绑定 处理服务端返回的结果
//-readystate 是 xhr对象中的属性,表示状态 0 1 2 3
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 ){
    //响应码 200 404 403 401 500
     if(xhr.status >=200 && xhr.status < 300){
        result.innerHTML  = xhr.response
}}}

三、IE缓存问题解决

javascript 复制代码
const xhr = XMLHttpRequest()
xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now())
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readystate === 4 ){
      if(xhr.status >=200 && xhr.status<300){
        result.innerHTML = xhr.response
}}}

四、请求超时与网络异常

javascript 复制代码
const xhr = XMLHttpRequest()
//超时设置2S设置
xhr.timeout = 2000
//超时回调
xhr.ontimeout = function(){...}
//网络异常回调
xhr.onerror = function(){...}

xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now())
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readystate === 4 ){
      if(xhr.status >=200 && xhr.status<300){
        result.innerHTML = xhr.response
}}}

五、取消请求

xhr.abort()

六、请求重复问题

javascript 复制代码
<buttton>点击发送</button>
//获取元素对象
const btns = document.querySelectorAll('button')
//标识变量
let isSending = false //是否正在发送请求
btns[0].onclick = function(){
//判断标识变量
    if(isSengding) xhr.abort()//如果正在发送,则取消请求,创建一个新的请求
    xhr = new XMLHttpRequest()
    isSending = true//修改标识变量的值
    xhr.open('GET','http://127.0.0.1:8000/')
    xhr.send()
    xhr.onreadystatechange = function(){
     if(xhr.readyState ===4){
       isSending = false//修改标识变量的值
}}}

七、jQuery发送请求

javascript 复制代码
$.get('http://127.0.0.1:8000/jquery',{a:100,b:299},function()(...),'json')
$.post('http://127.0.0.1:8000/jquery',{a:100,b:299},function()(...))

const data = {name:'aaa'}
JSON.stringify(data)//转化为json字符串
//通用方法
$('button').eq(1).click(function(){
    $.ajax({
    //url
    url:''http://127.0.0.1:8000/jquery',
    //参数
    data:{a:100,b:29}
    //请求类型
    type:'GET'
    //响应体结果
    dataType:'json'
    //成功的回调
    success: function(data){}
    //超时时间
    timeout:2000
    //失败的回调
    error:function(){}

})
})

八、Axios发送请求

javascript 复制代码
//配置baseURL
axios.defaults.baseURL= 'http://127.0.0.1:8000'
axios.get('/axios',{
    //url参数
    params:{id:1,a:2},
    //请求头信息
    headers:{name:aaa,age:1}

}).then(value =>{...})

axios.post('/axios',{
    //url参数
    params:{id:1,a:2},
    //请求头信息
    headers:{name:aaa,age:1},
    //请求体
    data:{username:'a',password:'b'}
})

九、axios函数发送请求

javascript 复制代码
axios({
    //请求方法
    method:'POST',
    //url
    url:'/axios',
    params:{vip:1,level:2},
    //头信息
    headers:{a:1000,b:12},
    //请求体参数
    data:{username:'admin',password:'admin'}
}).then(response=>{...})

十、使用fetch函数发送请求

javascript 复制代码
fetch('http://127.0.0.1:8000/fetch',{
    //请求方式
    method:'POST',
    //请求头
    headers:{a:1,n:2},
    //请求体
    body:'username=a&&password=b'
}).then(response=>{})

十一、ajax同源策略

同源:协议,域名,端口完全相同

//JSONP

//CORS跨域资源共享

相关推荐
腾讯TNTWeb前端团队3 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰6 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪6 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪7 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy7 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom8 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom8 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom8 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom8 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom8 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试