AJAX请求

已于 2022-10-18 17:20:40 修改
阅读量159 收藏
点赞数
文章标签： ajax javascript
于 2021-09-29 22:21:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44289771/article/details/120557527
版权

一、Ajax基础使用

1.创建一个get请求

        //1.创建对象
        const xhr = new XMLHttpRequest();
        
        //2.初始化 设置请求方法和URL
        xhr.open('GET','http://127.0.0.1:8080/server');
       
        //3.发送
        xhr.send();
        
        //4.事件绑定 处理服务端返回结果
        //on 当...时候
        //readystate 是 xhr对象中的属性,表示状态0 1 2 3 4
        //change 改变
        xhr.onreadystatechange=function(){
            if(xhr.readyState ===4){
                //判断服务端返回了所有结果
                if(xhr.status >= 200 && xhr.status < 300){
                    //判断响应状态码 200 404 403 401 500
                    //2xx 成功
                    div.innerHTML=xhr.response.name
                }
            }
        }

请求超时
xhr.timeout = 2000 ; 2秒后取消请求
超时回调
xhr.ontimeout = function(){}
请求错误
xhr.onerror = function(){}
取消请求
xhr.abrot()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        var btu = document.getElementsByTagName('button')[0]
        var div = document.getElementById('result')
        btu.onclick=function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();

            //设置响应体数据类为json，不是则不设置，否则报错
            xhr.responseType = 'json'
            
            //2.初始化 设置请求方法和URL
            xhr.open('GET','http://127.0.0.1:8080/server');
            
            //设置请求头
            //参数1：头名字
            //参数2：值
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            //3.发送
            xhr.send();
            //4.事件绑定 处理服务端返回结果
            //on 当...时候
            //readystate 是 xhr对象中的属性,表示状态0 1 2 3 4
            //change 改变
            xhr.onreadystatechange=function(){
                if(xhr.readyState ===4){
                    //判断服务端返回了所有结果
                    if(xhr.status >= 200 && xhr.status < 300){
                        //判断响应状态码 200 404 403 401 500
                        //2xx 成功
                        div.innerHTML=xhr.response.name
                        console.log(xhr.status)//状态吗
                        console.log(xhr.statusText)//状态字符串
                        console.log(xhr.getAllResponseHeaders)//所有响应头
                        console.log(xhr.response)//响应体
                    }
                }
            }
        }
    </script>
</body>
</html>

2.npm init --yes
3.npm i express (安装express模拟服务器)
4.npm i -g nodemon （安装nodemon改服务器代码时不需要重启）
5.模拟一个服务器server.js
node server.js（运行）
nodemon server.js（运行）

//1.引入
const { json } = require('express');
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
app.get('/server',(request,response)=>{
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    const data ={
        name:'lihua'
    }
    let str =JSON.stringify(data)
     response.send(str);
})
//all什么请求都能接收
app.all('/server',(request,response)=>{
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    const data ={
        name:'lihua'
    }
    let str =JSON.stringify(data)
     response.send(str);
})
//4.监听启动服务
app.listen(8080,()=>{
    console.log("服务已经启动，8080端口监听中");
});

在这里插入图片描述

二、解决IE缓存问题

在连接后传一时间戳

xhr.open('GET','http://127.0.0.1:8080/server?t='+Date.now());

三、解决重复请求问题

定义一个布尔值变量isSending来使用abort()取消上一次请求
被取消的请求状态为(canceled)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        var btu = document.getElementsByTagName('button')[0]
        var div = document.getElementById('result')
        let isSending = false
        let xhr = null
        btu.onclick=function(){
            if(isSending) xhr.abort()
            xhr = new XMLHttpRequest();
            isSending = true
            xhr.open('GET','http://127.0.0.1:8080/server?t='+Date.now());
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState ===4){
                    //判断服务端返回了所有结果
                    isSending = false
                    div.innerHTML=xhr.response
                }
            }
        }
    </script>
</body>
</html>

四、jQuery发送Ajax请求

$.get()
第一个参数：URL：‘http://127.0.0.1:8080/jquery’
第二个参数：数据：{a:10,b:20}
第三个参数：回调函数：function(data){}
第四个参数:响应体：‘json’

 $.get('http://127.0.0.1:8080/jquery',{a:10,b:20},function(data){
            console.log(data)
            $('#result').text(data.name)
        },'json')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqget请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <button>发送get请求</button>
    <button>发送post请求</button>
    <div id="result"></div>
    <script type="text/javascript" src="../jquery.js"></script>
    <script>
    $('button').eq(0).click(function(){
        $.get('http://127.0.0.1:8080/jquery',{a:10,b:20},function(data){
            console.log(data)
            $('#result').text(data.name)

        },'json')
    })
    $('button').eq(1).click(function(){
        $.post('http://127.0.0.1:8080/jquery',function(data){
            console.log(data)
            $('#result').text(data.name)

        },'json')
    })
    </script>
</body>
</html>

服务器

app.all('/jquery',(request,response)=>{
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    const data ={
        name:'lihua'
    }
    let str =JSON.stringify(data)
     response.send(str);
})

五、jQuery通用方法发送Ajax请求

 $.ajax({
            url:'http://127.0.0.1:8080/jquery',
            data:{a:10,b:20},
            type:'GET',
            dataType:'json',
            success:function(res){
                console.log(res)
                $('#result').text(res.name)
            },
            timeout:2000,
            error(){
                alert("请求超时")
            },
            //自定义请求头
            headers:{
                c:300,
                d:400
            }
        }) 

    $('button').eq(2).click(function(){
        $.ajax({
            url:'http://127.0.0.1:8080/jquery',
            data:{a:10,b:20},
            type:'GET',
            dataType:'json',
            success:function(res){
                console.log(res)
                $('#result').text(res.name)
            },
            timeout:2000,
            error(){
                alert("请求超时")
            },
            //自定义请求头
            headers:{
                c:300,
                d:400
            }
        })   
    })

服务器

app.all('/jquery',(request,response)=>{
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //前端自定义请求头处理
    response.setHeader('Access-Control-Allow-Headers','*')
    const data ={
        name:'lihua'
    }
    let str =JSON.stringify(data)
     response.send(str);
})

六、Axios发送ajxs请求

bata为请求体，config其他配置
1.get请求axios.get(url,{config})

axios.get('http://127.0.0.1:8080/axios',{
                //参数
                params:{
                    id:1,
                    vip:1
                },
            }).then(res=>{
                console.log(res)
                div.innerHTML=res
            })

2.post请求axios.post(url,{data},{config})

axios.post('http://127.0.0.1:8080/axios',{
                //请求体
                data:{
                    name:'admin',
                    password:'admin'
                }
            },{
                //参数
                params:{
                    id:2,
                    vip:2
                },
                //自定义请求头
                headers:{
                    height:180,
                    weight:180
                }
            }).then(res=>{
                console.log(res)
                div.innerHTML=res
            })   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生ajaxget请求</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <button>点击发送get请求</button>
    <button>点击发送post请求</button>
    <div id="result"></div>
    <script>
        var btu = document.getElementsByTagName('button')[0]
        var btu1 = document.getElementsByTagName('button')[1]
        var div = document.getElementById('result')
        btu.onclick=function(){
            axios.get('http://127.0.0.1:8080/axios',{
                //参数
                params:{
                    id:1,
                    vip:1
                },
                //自定义请求头
                headers:{
                    name:"lihua",
                    age:20
                },
                dataType:'json'
            }).then(res=>{
                console.log(res)
                div.innerHTML=res.data.name
            })
        },    
            btu1.onclick=function(){
            axios.post('http://127.0.0.1:8080/axios',{
                //请求体
                data:{
                    name:'admin',
                    password:'admin'
                }
            },{
                //参数
                params:{
                    id:2,
                    vip:2
                },
                //自定义请求头
                headers:{
                    height:180,
                    weight:180
                }
            }).then(res=>{
                console.log(res)
                div.innerHTML=res
            })   
        }
    </script>
</body>
</html>

七、Axios函数发送ajxs请求

1.GET请求

axios({
                url:'http://127.0.0.1:8080/axios',
                params:{
                    vip:1
                },
                method:'GET',
            }).then(res=>{
                console.log(res)
                div.innerHTML=res.data.name
            })

2.POST请求

axios({
                url:'http://127.0.0.1:8080/axios',
                data:  //请求体
                params:{       //参数
                    vip:1
                },
                method:'POST',
            }).then(res=>{
                console.log(res)
                div.innerHTML=res.data.name
            }) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生ajaxget请求</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <button>点击发送post请求</button>
    <div id="result"></div>
    <script>
        var btu = document.getElementsByTagName('button')[0]
        var div = document.getElementById('result')
        btu.onclick=function(){
            axios({
                url:'http://127.0.0.1:8080/axios',
                params:{
                    vip:1
                },
                method:'POST',
                dataType:'json'
            }).then(res=>{
                console.log(res)
                div.innerHTML=res.data.name
            }) 
        } 
    </script>
</body>
</html>

服务器

app.all('/axios',(request,response)=>{
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //前端自定义请求头处理
    response.setHeader('Access-Control-Allow-Headers','*')
    const data ={
        name:'lihua'
    }
    let str =JSON.stringify(data)
     response.send(str);
})

八、fetch发送ajax请求

在这里插入图片描述

九、解决跨域问题

首先是proxy

其次是cors

jsonp最后

Daniel李华
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax请求的五个步骤
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
Ajax 请求
Zane Xu的博客
07-26 6438
AJAX 请求 （一）、介绍 AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发 技术。（不是一种编程语言） ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。 Ajax 请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容。 在2005年，Google通过其Google Suggest使 AJAX变得流行起来。（Google Suggest能够自动帮您完
详解Ajax请求
热门推荐
qq_49900295的博客
03-30 2万+
目录 1.$.get()函数的语法 2.$.get()发起不带参数的请求 3.$.get()发起带参数的请求 4.$.post()函数的语法 5.$.post()向服务器提交数据 6.$.ajax()函数的语法 7.使用$.ajax()发起GET请求 ​8.使用$.ajax()发起POST请求 1.$.get()函数的语法 jQuery中$.get()函数的功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。 $.get()函数的语法如下： $..
Ajax请求详解
Louie_0的博客
10-29 1万+
Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。
Ajax请求参数
shao_xuan_的博客
02-14 6262
Ajax请求参数GET请求参数的传递创建服务器通过表单访问服务器POST请求参数的传递 GET请求参数的传递 设置open()方法中的第1个参数为“get”，表示设置get请求方式。 xhr.open('get', 'http://localhost:3000/demo.html?username=zhangsan &age=20'); xhr.send(); “?”后面的“username=zhangsan&age=20”表示GET请求参数, 多个参数时需要使用“&”符号连接。
Vue Ajax请求
XWenXiang的博客
06-28 4313
前端发送 Ajax
ajax请求
weixin_51116095的博客
01-05 2171
今天我们来学习一下ajax的几种请求方式 ajax共有两种请求方式 第一种get请求 第二种是post请求 第一种get请求，get请求又分为有参与无参 get无参
原生的AJAX请求
qq_44849271的博客
03-20 8265
AJAX概念 AJAX全称：Asynchronous Javascript And XML。AJAX并不是一种新的编程语言，是一种技术。AJAX实现了页面不需要刷新也能获取数据。 使用AJAX技术，关键在于XMLHttpRequest对象。 AJAX是异步操作 Demo: let xmlhttp=new XMLhttpRequest();//创建 XMLhttpRequest 对象 xmlhttp.open("请求方式","请求资源的地址"); xmlhttp.send();//发送请求 xmlhtt
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
chrome扩展插件获取ajax请求记录
04-06
其中，获取Ajax请求记录是开发者调试过程中非常关键的一环，因为它可以帮助开发者检查数据的发送和接收情况，排查网络问题，以及理解应用程序的工作流程。 Chrome扩展插件就是一种增强浏览器功能的方式，它们可以...
实例详解Android Webview拦截ajax请求
08-28
Android Webview 拦截 Ajax 请求的详细讲解 Android Webview 提供了页面加载及资源请求的钩子，但是对于 H5 的 Ajax 请求并没有提供干涉的接口。这意味着我们不能在 Webview 中干涉 JavaScript 发起的 HTTP 请求，...
Jquery ajax请求导出Excel表格的实现代码
10-22
下面小编就为大家带来一篇Jquery ajax请求导出Excel表格的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AJAX请求队列实现
10-21
主要为大家详细介绍了AJAX请求队列的实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
快速入门了解Ajax
最新发布
音符犹如代码的博客
07-25 673
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
某数据泄露防护(DLP)系统NetSecConfigAjax接口SQL注入漏洞复现 [附POC]
薛定谔嘚喵博客
07-23 433
某数据泄露防护(DLP)系统是一款综合性的数据安全产品，旨在通过多种先进技术手段保护企业的敏感数据，防止数据泄露。某数据泄露防护(DLP)系统存在SQL注入漏洞，攻击者可通过该漏洞获取数据库敏感数据。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 329
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1106
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值