JavaScript原生以及封装ajax请求 和 jQuery的ajax请求 【所有代码可直接copy运行，访问在线网址】

最新推荐文章于 2023-06-10 15:46:09 发布
最新推荐文章于 2023-06-10 15:46:09 发布
阅读量497 收藏
点赞数 1
分类专栏： web前端 # ajax 文章标签： javascript ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hannah2233/article/details/122934849
版权

AJAX 学习笔记
AJAX练习代码

文章目录

一、 原生AJAX请求\

GET和POST请求书写方式差不多

1-1 返回结果

在这里插入图片描述

1-2 请求代码
<!DOCTYPE html>


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX原生请求</title>

</head>

<body>
    <button>点击发送请求</button>

    <script>
        // 获取button元素
        const btn = document.getElementsByTagName('button')[0];
        // 绑定事件
        btn.onclick = function() {
            var xhr = new XMLHttpRequest()
            xhr.open("GET", "https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/playlist/hot", true)
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send()
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = xhr.responseText
                    var datas = JSON.parse(data)
                    console.log(datas)
                }
            }
        }
    </script>
</body>

</html>

二、 函数封装AJAX请求

copy代码在控制台即可查看运行结果

2-1 代码
<!DOCTYPE html>


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX原生请求</title>

</head>

<body>
    <button>点击发送请求</button>

    <script>
        // 获取button元素
        const btn = document.getElementsByTagName('button')[0];
        // 绑定事件
        btn.onclick = function() {
            function Ajax(type, url, data, success) {
                var xhr = null; // 初始化xhr
                if (window.XMLHttpRequest) { //兼容IE
                    xhr = new XMLHttpRequest();
                } else {
                    xhr = new ActiveXObject('Microsoft.XMLHTTP')
                }

                var type = type.toUpperCase();

                var random = Math.random(); //创建随机数

                // GET处理缓存问题
                if (type == 'GET') {
                    if (data) {
                        xhr.open('GET', url + '?' + data, true); //如果有数据就拼接
                    } else {
                        xhr.open('GET', url + '?t=' + random, true); //如果没有数据就传入一个随机数
                    }
                    xhr.send();
                    // POST 设置请求头
                } else if (type == 'POST') {
                    xhr.open('POST', url, true);
                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    xhr.send(data);
                }


                xhr.onreadystatechange = function() { // 创建监听函数
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        success(xhr.responseText);
                    }
                }
            }

            // 调用函数
            Ajax('get', 'https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/playlist/hot', "", function(data) {
                console.log(JSON.parse(data));
            });
        }
    </script>
</body>

</html>

三、 jQuery 中的 ajax

$.get;;$.ajax;;$.post

3-1 运行结果

在这里插入图片描述

3-2 代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap-grid.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function() {
            $.get("https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/playlist/hot", {
                a: 100,
                b: 200
            }, function(data) {
                console.log(data);
            })
        })
        $('button').eq(1).click(function() {
            $.get("https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/playlist/hot", {
                a: 100,
                b: 200
            }, function(data) {
                console.log(data);
            }, 'json')
        })

        $('button').eq(2).click(function() {
            $.ajax({
                // url
                url: 'https://netease-cloud-music-api-crete722p-hannah-bingo.vercel.app/playlist/hot',
                // 参数
                data: {
                    // a: 100,
                    // b: 200
                },
                // 请求类型
                type: 'GET',
                // 响应体结果
                dataType: 'json',
                success: function(data) {
                    console.log(data);
                },

                // 超时时间
                timeout: 2000,

                // 失败的回调
                error: function() {
                    console.log('出错了！');
                },
                // // 头信息
                // headers: {
                //     c: 300,
                //     d: 400
                // }

            })
        })
    </script>
</body>

</html>

参考 ： https://www.cnblogs.com/xwkj/p/10298400.html，完善加以记录

牛小小小婷～
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript对XMLHttpRequest异步请求的面向对象封装
10-29
对XMLHttpRequest异步请求的面向对象封装,需要的朋友可以参考下。
基于js方法XMLHttpRequest封装方法
最新发布
hhhhhhaa1的博客
07-12 637
基于XMLHttpRequest对象封装的axjx函数。
XMLHttpRequest 的封装
weixin_46949711的博客
09-19 856
js XMLHttpRequest 的封装。
【前端知识点总结】Ajax(三) XMLHttpRequest封装Ajax
jiang_ziY的博客
03-11 2165
本章内容包含: XMLHttpRequest对象、GET请求携带参数、POST请求携带参数、手动封装一个 Ajax、数据交换格式JSON、 同源和跨域、跨域的解决方案、CORS、JSONP、Proxy
XMLHttpRequest读取xml乱码及请求封装
weixin_45288512的博客
10-26 1943
Content-type、charset、overrideMimeType解决XMLHttpRequest返回xml乱码问题。
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
12-09
前言：ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），当然也...
Javascript原生ajax请求代码实例
10-15
主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
原生js jquery ajax请求以及jsonp的调用方法
12-12
XMLHttpRequest，异步访问服务器并发送请求数据，服务器返回响应的数据，以页面无刷新的效果改变页面中的局部内容 同步：任务一个一个的执行，只有前面的任务执行完才会执行下一个任务，如果前面的任务是耗时操作，...
原生JavaScript实现Ajax异步请求
10-18
ajax现在是一种非常流行的技术，现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能，但是明白其原理也是非常重要的，下面是来使用纯javascript实现获取服务器端的功能来展示...
XMLHttpRequest发送网络请求的基本使用，和封装自己的ajax
weixin_43923808的博客
07-27 643
由于post请求要带请求体，请求体有三种格式，为了方便服务器接收数据，当提交请求时，需要指定一个叫做Content-Type的请求头。
http:我自己的XMLHttpRequest包装器
05-24
http模块 每个前端开发人员都必须创建自己的XMLHttpRequest包装器！ （c）未知的前端开发人员 关于 你喜欢CommonJS吗？ var http = require ( 'http.1.0.0.min.js' ) ; 还是RequireJS？ define ( [ 'http.1.0.0.min.js' ] , function ( http ) { // console.log(http); } ) ; 我希望你不想那样做。。但是你可以:) window . http ; GET请求 var request = new http . Request ( ) ; request . get ( "some_url" , function ( response ) { console . log ( response instanceof ht
自己写的一个完整的ajax xmlHttp请求类的封装
12-09
一个完整的ajax xmlHttp请求类的封装，兼容多种浏览器，包括了对返回数据的处理。
XHR的简单封装xr.zip
07-19
xr 是 XMLHttpRequest 的超简单封装，并返回 ES6 Promise。示例代码：xr.get('/api/items', {take: 5})   .then(res => console.log(res.data)); xr.post('/api/item', {name: 'hello'})   .then(res => console.log("new item", res.data)); xr({   method: xr.Methods.GET,   url: '/api/items',   params: {take: 5},   events: {     progress: (xhr, xhrProgressEvent) => {       console.log("xhr", xhr);       console.log("progress", xhrProgressEvent);     }   } });
第2讲：XMLHttpRequest封装Ajax应用
软件之家的博客
06-10 144
XMLHttpRequest封装Ajax应用，ajax技术封装在js文件中，应用页面加载ajax.js文件即可。
JavaScript ajax 系列三 XML使用；查询字符串；URL编码；JSON数据交换格式；封装ajax函数；HTTP时限；Formdata管理数据；上传文件及进度；ajax事件；axios库
m0_55170432的博客
04-09 212
Ajax 加强（原生） 1. XMLHttpRequest的基本使用 XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。 1.1 使用xhr发起GET请求 步骤： 创建 xhr 对象 调用 xhr.open() 函数 调用 xhr.send() 函数 监听 xhr.onreadystatechange 事件 <script>
XMLhttpRequest 封装
自由的天空
10-19 882
    部分资料来源于网上        1、xmlhttp.js       /***用于XMLHttpRequest(xhr)回调, 根据xhr的readyState*调用不同的函数*/function RequestListener() { /*     *当xhr.readyState = 0时调用     */ this.uninitialized = function () { };
js 使用XMLHttpRequest 封装http请求并返回响应的信息,如果超时了,则返回字符串请求超时...
weixin_42590539的博客
02-15 774
好的，下面是使用XMLHttpRequest对象封装HTTP请求的代码示例，如果请求超时则返回字符串"请求超时"： function httpGet(url, timeout) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.timeout = timeou...
简单封装XMLHttpRequest
知之为知之，不知为不知
11-15 437
【代码】简单封装XMLHttpRequest。
使用原生JavaScript来封装ajax请求
04-17
关于使用原生JavaScript来封装ajax请求，是一个很常见的问题。对于这个问题，我可以给您提供以下的思路和代码示例，帮助您更好地理解和实现： 思路： 1. 创建XMLHttpRequest对象 2. 设置请求参数，包括请求方法、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值