ajax的基础

最新推荐文章于 2024-10-12 17:05:37 发布

I love studying!!!

最新推荐文章于 2024-10-12 17:05:37 发布

阅读量772

点赞数 7

文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/m0_73759720/article/details/142109623

版权

一、概念及特点

1. 概念

Ajax 是一项创建动态网页的技术，是一种快速实现数据前后端交互。其中有免费的API接口：API 接口列表 (qq.com)https://mp.weixin.qq.com/s/dXp78swPjQggWREr78ugYg使用ajax的步骤如下：

用户触发事件： 用户在网页上触发一个事件，比如点击按钮或提交表单。
发送请求： 使用 JavaScript 发送异步请求到服务器。请求可以是 GET、POST 等方法。
服务器处理请求： 服务器接收到请求后，处理数据并返回响应，通常是 JSON、XML、HTML 等格式的数据。
接收响应： 浏览器接收到服务器的响应数据。
更新网页： 使用 JavaScript 更新网页的部分内容，而不重新加载整个页面。

2. 特点

主要特点如下：

可以读取（本地或远程）的文档内容
异步请求，局部刷新
处理数据的前后端交互，快速开发动态网页

二、使用方法

1. 原生JS实现ajax

原生 JavaScript 提供了 XMLHttpRequest 对象来处理 AJAX 请求。以下是源代码：

其中：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生JS实现</title>
    <style></style>
</head>
<body>
    <h3 class="city"></h3>
    <h3 class="weather"></h3>
    <h3 class="date"></h3>
    <script>
        // 1、创建异步对象实例
        var xhr = new XMLHttpRequest()
        // xhr.open('请求方式','请求地址','布尔值')
        // 2、发送请求
        // 此代码通过运行整页代码，然后得到的
        xhr.open('get','./api/weather.json',true)
        // 3、发送请求主体
        xhr.send()
        // 4、执行事件监听
        xhr.onreadystatechange = function(){
            // console.log(xhr.readyState)
            if(xhr.readyState === 4){
                // 响应状态
                if(xhr.status === 200){   //表示响应成功
                    // json字符串
                    // console.log(xhr.responseText)
                    // 字符串转成对象
                    var res = JSON.parse(xhr.responseText)
                    console.log(res)
                    // 渲染在页面上
                    document.querySelector(".city").innerHTML = res.city
                    document.querySelector(".weather").innerHTML = res.data[0].wea
                    document.querySelector(".date").innerHTML = res.data[0].date
                }
            }
        }


    </script>
</body>
</html>

2. jQuery提供的方法

jQuery 提供了一个更简单和跨浏览器兼容的方式来发起AJAX请求。源代码如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery请求</title>
    <style>
        input , button {
            box-sizing: border-box;
            font-size: 24px;
        }
    </style>
</head>

<body>

    <div class="search">
        <input class="inp" type="text">
        <button class="btn">搜索</button>
    </div>
    <div class="list">
        <ul>
            <!-- <li>
               <span>歌曲名称</span>
           </li> -->
        </ul>
    </div>


    <script src="./lib/jquery@3.5.1/jquery-3.5.1.js"></script>
    <script>
        $(".btn").on("click",function(){
            var value = $(".inp").val();
            if(value.length == 0) return;
            $.ajax({
                // 请求方式
                type:'get',
                // 请求地址
                url:'https://apis.netstart.cn/music/search',
                // 提交参数
                data:{
                    keywords:value
                },
                success: function(res){
                    console.log(res);
                    // 判断后台响应的数据是否符合格式
                    if(res.code == 200) {
                        // 取出数组
                        var songs = res.result.songs;
                        // 字符串拼接
                        var str = '';
                        for(var i = 0 ; i < songs.length ; i ++){
                            str += `
                                <li>
                                    <span>${songs[i].name}</span> # 
                                    <span>${songs[i].id}</span>
                                </li>
                            `
                        }
                        // 渲染数据
                        $(".list ul").html(str);
                    }
                }
            })
        })

    </script>
</body>

</html>

3. H5新增的 fetch 方法

Fetch API 是现代浏览器提供的用于进行网络请求的接口，它基于Promise，语法更加简洁。源代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fetch方法</title>
    <style></style>
</head>
<body>
    <script>
        // get方式
        fetch('https://apis.netstart.cn/music/search?keywords=小跳蛙',
            {
                // 请求方式
                method:'get',
                // body: JSON.stringify({keywords:'小跳蛙'})  //post请求
            }
        )
        // ES6 新增的 (promise)
        .then(
            function(response){
                // 调用方法获取响应数据
                return response.json()
            }
        )
        // 请求成功
        .then(
            function(res){
                console.log(res)
            }
        )
        // 请求失败
        .catch(
            function(err){
                console.log(err)
            }
        )

        // post方式
        fetch('http://send.wxbus163.cn/weather/get15Weather',{
            method:'post',
            body:JSON.stringify({cityid:'4840'})
        })
        .then(
            function(response){
                return response.json()
            }
        )
        .then(
            // 请求成功
            function(res){
                console.log(res)
            }
        )
        .catch(
            // 请求失败
            function(err){
                console.log(err)
            }
        )

    </script>
</body>
</html>

4. 通过axios网络请求

Axios 是一个基于Promise的HTTP客户端，适用于浏览器和Node.js，它提供了更强大的功能和更好的错误处理机制。源代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <style></style>
</head>
<body>


    <script src="./lib/axios/axios.js"></script>
    <script>
        // 接口地址：https://apis.netstart.cn/music/search
        // 请求方式：get
        // 响应数据：json格式
        // 参数： keywords 关键字
        axios.get('https://apis.netstart.cn/music/search',{params: {keywords: '征服'}})
        .then(
            function(response){
                // 记录后台响应的数据
                var res = response.data;
                console.log(res);
            })

        // post
        // axios.post('请求地址',{参数：值})
        // .then(function(response){})




    </script>
</body>
</html>