• 认识并学会使用AJax

    1.Ajax是什么?

     “Asynchronous Javascript And XML”(异步JavaScript和XML)

    Ajax就是让浏览器跟服务器交互的一套API。它的作用就是让浏览器和服务器进行交互。

    是向服务器请求数据的局部刷新页面的技术。


     

    2.学习Ajax的目标是什么?

     学会使用Ajax根据接口文档和服务器交互。

     目前，我们网页所有的数据都是写死的。实际开发中，网页的数据需要从服务器获取

     而Ajax技术就是来实现这一功能的。

    3.Ajax基本使用结构

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <script>
    13.         // 1.创建一个请求对象
    14.         let xhr = new XMLHttpRequest()
    15.         // 2.调用xhr的open方法，开启请求
    16.         // 传入请求方法和请求地址
    17.         xhr.open('get', 'https://autumnfish.cn/api/joke')
    18.         // 3.设置请求成功后的回调函数
    19.         xhr.onload = function () {
    20.             console.log(xhr.response);
    21.         }
    22.         //4.调用send方法
    23.         xhr.send()
    24.     </script>
    25. </body>
    26.  
    27. </html>

    4.get请求

     GET (SELECT):服务器取出资源(一项或多项)我们之前是向服务器要内容 是获取资源 用的是get请求方法

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.     <script>
    13.         //AJAX发送get请求，通过url地址拼接传递参数
    14.         // url地址？key=value 
    15.  
    16.         //1.创建请求对象
    17.         let xhr = new XMLHttpRequest()
    18.         // 2.调用open，设置请求方式和请求地址
    19.         xhr.open('get', 'https://autumnfish.cn/api/joke/list?num=10')
    20.         //3.设置请求成功后的回调函数
    21.         xhr.onload = function () {
    22.             // console.log(xhr.response);
    23.             let obj = JSON.parse(xhr.response)
    24.             console.log(obj);
    25.         }
    26.         // 发送请求
    27.         xhr.send()
    28.     </script>
    29. </body>
    30. </html>

    5.Ajax发送get请求

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         body {
    11.             /* 居中 */
    12.             text-align: center;
    13.         }
    14.  
    15.         input {
    16.             border: 4px solid greenyellow;
    17.             background-color: aqua;
    18.         }
    19.  
    20.         .joke-container {
    21.             border: 1px solid rgb(55, 44, 44);
    22.             height: 500px;
    23.             width: 500px;
    24.             margin: 0 auto;
    25.             margin-top: 10px;
    26.         }
    27.     </style>
    28. </head>
    29.  
    30. <body>
    31.     <input type="button" value="点我看笑话" class="getJoke">
    32.     <div class="joke-container"></div>
    33.  
    34.     <script>
    35.         document.querySelector('.getJoke').onclick = function () {
    36.             // 1.创建一个请求对象
    37.             let xhr = new XMLHttpRequest()
    38.             // 2.调用xhr的open方法，开启请求
    39.             // 传入请求方法和请求地址
    40.             xhr.open('get', 'https://autumnfish.cn/api/joke')
    41.             // 3.设置请求成功后的回调函数
    42.             xhr.onload = function () {
    43.                 // 把响应的内容打印在控制台里
    44.                 // console.log(xhr.response);
    45.  
    46.                 // 把响应的内容显示在div区域
    47.                 document.querySelector('.joke-container').innerHTML = xhr.response;
    48.             }
    49.             //4.调用send方法
    50.             xhr.send()
    51.         }
    52.     </script>
    53. </body>
    54.  
    55. </html>

     6.post请求

    POST (CREATE):在服务器新建一个资源 我们现在做的是注册用户 是在服务器新建一个资源 用的是post请求

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    10.  
    11. <body>
    12.  
    13.     <!-- AJAX发生post请求
    14.          1.创建请求对象，实例化一个ajax对象
    15.          2.调用open方法，设置请求方式和地址
    16.          3.设置请求头（post请求才需要设置）（固定语法）
    17.          4.设置请求成功后的回调函数
    18.          5.send()方法去发生ajax请求 -->
    19.     <script>
    20.         // AJAX发生post请求
    21.         // 1.创建请求对象，实例化一个ajax对象
    22.         let xhr = new XMLHttpRequest();
    23.         // 2.调用open方法，设置请求方式和地址
    24.         xhr.open('post', 'https://autumnfish.cn/api/user/register')
    25.         // 3.设置请求头（post请求才需要设置）（固定语法）
    26.         xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    27.         // 4.设置请求成功后的回调函数
    28.         xhr.onload = function () {
    29.             console.log(xhr.response);
    30.         }
    31.         //5.send()方法去发生ajax请求，要注意 用send方法传递我们的参数时 一定在等号前后 不能有空格 不然这个参数就传递失败了
    32.         xhr.send('username=陈mour是') 
    33.     </script>
    34.  
    35. </body>
    36.  
    37. </html>

     

  • 相关阅读:
    【秋招必备】JVM性能调优面试题（2022最新版）
    L9.linux命令每日一练 -- 第二章 文件和目录操作命令 -- ln和readlink命令
    树莓派SSH链接出错 Host key verification failed. 解决办法
    源码深度剖析Spring Cloud Gateway如何处理一个请求（只能那么细了）【云原生】
    Android 数据恢复的顶级软件分享
    ArGIS Engine专题（13）之矢量要素图层符号化（单一符号化渲染）
    c++ Qt 网络连接
    怎样将word默认Microsoft Office，而不是WPS
    Android Framwork知识学习总结
    linux安装mysql
  • 原文地址：https://blog.csdn.net/weixin_66059613/article/details/128173968