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跨域资源共享

相关推荐
OEC小胖胖1 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->2 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim2 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端3 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头4 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz4 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子4 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边4 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客4 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8884 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js