AJAX笔记原理篇

黑马程序员视频地址：

AJAX-Day03-01.XMLHttpRequest_基本使用https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=33https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=33

XMLHttpRequest

基本使用方法 

    //第一步：创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()
    //第二步：配置请求方法和请求 url 地址
    xhr.open("GET", "https://hmajax.itheima.net/api/province")
    //第三步：监听 loadend 事件，接收响应结果
    xhr.addEventListener("loadend", () => {
      //响应结果
      console.log(xhr.response)//得到的是字符串
      const object = JSON.parse(xhr.response) //字符串转对象
      console.log(object)
    })
    //第四步：发起请求
    xhr.send()

查询参数 

    //第二步：配置请求方法和请求 url 地址
    xhr.open("GET", "https://hmajax.itheima.net/api/area?pname=辽宁省&cname=大连市")

将  对象  快速转成  参数1=值1&参数2=值2...   的字符串格式

   //获取输入框的值
   const pname = document.querySelector(".province").value
   const cname = document.querySelector(".city").value
   //构建对象 (输入框数量多时，用serialiaze函数快速获取，得到的结果是对象，就可以直接使用)
   const valueObj = {
    pname,
    cname
   }


   //⭐️查询参数对象转成查询参数字符串
   const paramsObj = new URLSearchParams(valueObj)
   const queryString = paramsObj.toString()


   //创建XMR对象
   const xhr = new XMLHttpRequest()
   //配置参数
   xhr.open("GET", `https://hmajax.itheima.net/api/area?${queryString}`)
   //配置监听事件
   xhr.addEventListener("loadend", () => {
    console.log(xhr.response)
   })
   //发送请求
   xhr.send()

数据提交

    document.querySelector('.reg-btn').addEventListener('click', () => {
      //创建请求体实例对象
      const xhr = new XMLHttpRequest()
      //设置参数
      xhr.open("POST", "https://hmajax.itheima.net/api/register")

      //设置监听时间
      xhr.addEventListener("loadend", () => {
        console.log(xhr.response)
      })
      //⭐️设置请求头-告诉服务器数据类型
      xhr.setRequestHeader("Content-Type", "application/json")
      //准备提交的数据
      const userObj = {
        username: "admin123",
        password: "12345678"
      }
      const userStr = JSON.stringify(userObj)

      //设置请求体，发送请求
      xhr.send(userStr)
    })

Promise

基本使用方法

   //创建Promise对象
   const p = new Promise((resolve, reject) => {
    //执行异步任务-并传递结果
    //如果此处调用了resolve(),则接下来会让then()执行
    //如果此处调用了reject(),则接下来会让catch()执行
   })
   p.then(result => {
    //成功执行
   })
   p.catch(error => {
    //失败执行
   })

promise的三种状态

XHR与Promise联合使用

    const p = new Promise((resolve, reject) => {
      //创建XHR对象
      const xhr = new XMLHttpRequest()
      //设置参数
      xhr.open("GET", "https://hmajax.itheima.net/api/province123")
      //设置监听事件
      xhr.addEventListener("loadend", () => {
        //可以打印一下xhr对象看一下数据
        if(xhr.status >= 200 && xhr.status <= 300)
        {
          //成功，调用resolve()让其自动调用then()
          resolve(JSON.parse(xhr.response))
        }else
        {
          //失败，调用reject()让其自动调用catch()
          reject(new Error(xhr.response))
        }
      })
      //发送请求体
      xhr.send()
    }).then(result => {
      //成功执行
      console.log(result)
    }).catch(error => {
      //失败执行,错误要用dir打印
      console.dir(error)
    })

dir打印结果 

封装简易版axios

简陋版（简单GET获取，不需要传参）

//封装函数
   function myAxios(object)
   {
    return new Promise((resolve, reject) => {
      //创建XHR对象
      const xhr = new XMLHttpRequest()
      //设置属性
      xhr.open(object.method || "GET", object.url)
      //设置监听事件
      xhr.addEventListener("loadend", () => {
        if(xhr.status >= 200 && xhr.status < 300)
        {
          //成功
          resolve(JSON.parse(xhr.response))
        }else
        {
          //失败
          reject(new Error(xhr.response))
        }
      })
      //发送请求体
      xhr.send()
    })
   }

//调用
 myAxios({
    url: "https://hmajax.itheima.net/api/province"
   }).then(result => {
    console.log(result)
   }).catch(error => {
    console.log(error)
   })

完整版（GET/POST都可以用，可以携带参数）

//封装函数
function myAxios(object)
   {
    return new Promise((resolve, reject) => {
      //创建XHR对象
      const xhr = new XMLHttpRequest()
      //设置属性
      if(obj.params){
        object.url += "?" + new URLSearchParams(object.params).toString()
      }
      xhr.open(object.method || "GET",  object.url)
      //设置监听事件
      xhr.addEventListener("loadend", () => {
        if(xhr.status >= 200 && xhr.status < 300){
          //成功
          resolve(JSON.parse(xhr.response))
        }else{
          //失败
          reject(new Error(xhr.response))
        }
      })
      //判断是否有data选项
      if(object.data){
        //设置请求头
        xhr.setRequestHeader("Content-Type", "application/json")
        const strdata = JSON.stringify(object.data)
        //发送请求体
        xhr.send(strdata)
      }else{
        //发送请求体
        xhr.send()
      }
    })
   }



//调用（用户注册）
myAxios({
    url: "https://hmajax.itheima.net/api/register",
    method: "POST",
    data: {
      username: "usera_001",
      password: "usera_001"
    }
  }).then(result => {
    console.log(result)
  }).catch(error => {
    console.log(error)
  })

案例：获取天气预报

 

function getWeather(cityCode)   //封装获取天气函数
{
  myAxios({
    url: "https://hmajax.itheima.net/api/weather",
    params: {
      city: cityCode
    }
  }).then(result => {
    const weatherData = result.data
    for(let k in weatherData)
    {
      if(k === "data")
      {

      }else if(k === "dayForecast")
      {
        const weatherList = weatherData[k].map(item => {
          return`<li class="item">          
                    <div class="date-box">            
                      <span class="dateFormat">${item.dateFormat}</span>            
                      <span class="date">${item.date}</span>          
                    </div>          
                    <img src="${item.weatherImg}" alt="" class="weatherImg">          
                    <span class="weather">${item.weather}</span>          
                    <div class="temp">            
                      <span class="temNight">${item.temNight}</span>-            
                      <span class="temDay">${item.temDay}</span>            
                      <span>℃</span>          
                    </div>          
                    <div class="wind">            
                      <span class="windDirection">${item.windDirection}</span>            
                      <span class="windPower">&lt;${item.windPower}</span>          
                    </div>        
                    </li>`
        })
        document.querySelector(".week-wrap").innerHTML = weatherList.join("")
      }else if(k === "todayWeather")
      {
        document.querySelector(".today-weather").innerHTML = `
      <div class="range-box">
        <span>今天：</span>
        <span class="range">
          <span class="weather">${weatherData[k].weather}</span>
          <span class="temNight">${weatherData[k].temNight}</span>
          <span>-</span>
          <span class="temDay">${weatherData[k].temDay}</span>
          <span>℃</span>
        </span>
      </div>
      <ul class="sun-list">
        <li>
          <span>紫外线</span>
          <span class="ultraviolet">${weatherData[k].ultraviolet}</span>
        </li>
        <li>
          <span>湿度</span>
          <span class="humidity">${weatherData[k].humidity}</span>%
        </li>
        <li>
          <span>日出</span>
          <span class="sunriseTime">${weatherData[k].sunriseTime}</span>
        </li>
        <li>
          <span>日落</span>
          <span class="sunsetTime">${weatherData[k].sunsetTime}</span>
        </li>
      </ul>`
      }else if(k === "weatherImg")
      {
        document.querySelector(`.${k}`).src = weatherData[k]
      }else
      {
        document.querySelector(`.${k}`).innerText = weatherData[k]
      }
    }
  }).catch(error => {
    console.log(error)
  })
}

getWeather("110111")  //默认获取北京天气


document.querySelector(".search-city").addEventListener("input", e => { //输入字符实时搜索城并返回列表
  myAxios({
    url: "https://hmajax.itheima.net/api/weather/city",
    params: {
      city: e.target.value
    }
  }).then(result => {
    document.querySelector(".search-list").innerHTML = result.data.map(item => {
      return `<li class="city-item" data-cityCode = "${item.code}">${item.name}</li>`
    }).join("")
  })
})

document.querySelector(".search-list").addEventListener("click", e => {   //列表点击再次搜索
  if(e.target.classList.contains("city-item"))
  {
    getWeather(e.target.dataset.citycode)
  }
})

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/963447.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ComfyUI安装调用DeepSeek——DeepSeek多模态之图形模型安装问题解决（ComfyUI-Janus-Pro）

ComfyUI安装调用DeepSeek——DeepSeek多模态之图形模型安装问题解决（ComfyUI-Janus-Pro）

ComfyUI 的 Janus-Pro 节点&#xff0c;一个统一的多模态理解和生成框架。 试用&#xff1a; https://huggingface.co/spaces/deepseek-ai/Janus-1.3B https://huggingface.co/spaces/deepseek-ai/Janus-Pro-7B https://huggingface.co/spaces/deepseek-ai/JanusFlow-1.3B 安装…
阅读更多...
3D图形学与可视化大屏：什么是材质属性，有什么作用？

3D图形学与可视化大屏：什么是材质属性，有什么作用？

一、颜色属性 漫反射颜色 漫反射颜色决定了物体表面对入射光进行漫反射后的颜色。当光线照射到物体表面时&#xff0c;一部分光被均匀地向各个方向散射&#xff0c;形成漫反射。漫反射颜色的选择会直接影响物体在光照下的外观。例如&#xff0c;一个红色的漫反射颜色会使物体在…
阅读更多...
JVM方法区

JVM方法区

一、栈、堆、方法区的交互关系 二、方法区的理解: 尽管所有的方法区在逻辑上属于堆的一部分&#xff0c;但是一些简单的实现可能不会去进行垃圾收集或者进行压缩&#xff0c;方法区可以看作是一块独立于Java堆的内存空间。 方法区(Method Area)与Java堆一样&#xff0c;是各个…
阅读更多...
租赁管理系统在促进智能物业运营中的关键作用和优化策略分析

租赁管理系统在促进智能物业运营中的关键作用和优化策略分析

租赁管理系统在智能物业运营中的关键作用与优化策略 随着科技的飞速发展&#xff0c;租赁管理系统在智能物业运营中扮演着越来越重要的角色。这种系统不仅提高了物业管理的效率&#xff0c;更是促进了资源的优化配置和客户关系的加强。对于工业园、产业园、物流园、写字楼和公…
阅读更多...
LLMs之DeepSeek：Math-To-Manim的简介(包括DeepSeek R1-Zero的详解)、安装和使用方法、案例应用之详细攻略

LLMs之DeepSeek：Math-To-Manim的简介(包括DeepSeek R1-Zero的详解)、安装和使用方法、案例应用之详细攻略

LLMs之DeepSeek&#xff1a;Math-To-Manim的简介(包括DeepSeek R1-Zero的详解)、安装和使用方法、案例应用之详细攻略 目录 Math-To-Manim的简介 1、特点 2、一个空间推理测试—考察不同大型语言模型如何解释和可视化空间关系 3、DeepSeek R1-Zero的简介&#xff1a;处理更…
阅读更多...
【课题推荐】基于t分布的非高斯滤波框架在水下自主导航中的应用研究

【课题推荐】基于t分布的非高斯滤波框架在水下自主导航中的应用研究

水下自主导航系统在海洋探测、环境监测及水下作业等领域具有广泛的应用。然而&#xff0c;复杂的水下环境常常导致传感器输出出现野值噪声&#xff0c;这些噪声会严重影响导航信息融合算法的精度&#xff0c;甚至导致系统发散。传统的卡尔曼滤波算法基于高斯噪声假设&#xff0…
阅读更多...
Arduino大师练成手册 -- 控制 AS608 指纹识别模块

Arduino大师练成手册 -- 控制 AS608 指纹识别模块

要在 Arduino 上控制 AS608 指纹识别模块&#xff0c;你可以按照以下步骤进行&#xff1a; 硬件连接 连接指纹模块&#xff1a;将 AS608 指纹模块与 Arduino 连接。通常&#xff0c;AS608 使用 UART 接口进行通信。你需要将 AS608 的 TX、RX、VCC 和 GND 引脚分别连接到 Ardu…
阅读更多...
深度学习深度解析：从基础到前沿

深度学习深度解析：从基础到前沿

引言 深度学习作为人工智能的一个重要分支&#xff0c;通过模拟人脑的神经网络结构来进行数据分析和模式识别。它在图像识别、自然语言处理、语音识别等领域取得了显著成果。本文将深入探讨深度学习的基础知识、主要模型架构以及当前的研究热点和发展趋势。 基础概念与数学原理…
阅读更多...
享元模式——C++实现

享元模式——C++实现

目录 1. 享元模式简介 2. 代码示例 1. 享元模式简介 享元模式是一种结构型模式。 享元模式用于缓存共享对象&#xff0c;降低内存消耗。共享对象相同的部分&#xff0c;避免创建大量相同的对象&#xff0c;减少内存占用。 享元模式需要将对象分成内部状态和外部状态两个部分…
阅读更多...
ResNet--深度学习中的革命性网络架构

ResNet--深度学习中的革命性网络架构

一、引言 在深度学习的研究和应用中&#xff0c;网络架构的设计始终是一个关键话题。随着计算能力和大数据的不断提升&#xff0c;深度神经网络逐渐成为解决复杂任务的主流方法。然而&#xff0c;随着网络层数的增加&#xff0c;训练深度神经网络往往面临梯度消失或梯度爆炸的…
阅读更多...
HTML特殊符号的使用示例

HTML特殊符号的使用示例

目录 一、基本特殊符号的使用 1、空格符号&#xff1a; 2、小于号 和 大于号&#xff1a; 3、引号&#xff1a; 二、版权、注册商标符号的使用 1、版权符号&#xff1a;© 2、注册商标符号&#xff1a; 三、数学符号的使用 四、箭头符号的使用 五、货币符号的使用…
阅读更多...
C++11—右值引用

C++11—右值引用

目录 简介 左值和右值 左值 右值 右值引用 生命周期 引用折叠 实际应用 移动语义 移动构造函数 移动赋值运算符 完美转发 简介 之前我们曾学习过引用叫左值引用&#xff0c;但那是C98的&#xff0c;在C11中新增了一种引用叫右值引用。右值引用主要用于支持移动语…
阅读更多...
Ubuntu下的Doxygen+VScode实现C/C++接口文档自动生成

Ubuntu下的Doxygen+VScode实现C/C++接口文档自动生成

Ubuntu下的DoxygenVScode实现C/C接口文档自动生成 Chapter1 Ubuntu下的DoxygenVScode实现C/C接口文档自动生成1、 Doxygen简介1. 安装Doxygen1&#xff09;方法一&#xff1a;2&#xff09;方法二&#xff1a;2. doxygen注释自动生成插件3. doxygen注释基本语法4. doxygen的生成…
阅读更多...
函数与递归

函数与递归

函数与递归 声明或者定义应该在使用之前&#xff08;不单单针对于函数&#xff09; 函数对全局变量做出的改变还是不会随着函数结束而消失的 函数声明在main函数里面也是可以的 引用变量和引用实体的变化是一样的 传址调用比传值调用效率高 重载函数->编译器会根据传递…
阅读更多...
网络编程套接字（中）

网络编程套接字（中）

文章目录 &#x1f34f;简单的TCP网络程序服务端创建套接字服务端绑定服务端监听服务端获取连接服务端处理请求客户端创建套接字客户端连接服务器客户端发起请求服务器测试单执行流服务器的弊端 &#x1f350;多进程版的TCP网络程序捕捉SIGCHLD信号让孙子进程提供服务 &#x1…
阅读更多...
96，【4】 buuctf web [BJDCTF2020]EzPHP

96，【4】 buuctf web [BJDCTF2020]EzPHP

进入靶场 查看源代码 GFXEIM3YFZYGQ4A 一看就是编码后的 1nD3x.php 访问 得到源代码 <?php // 高亮显示当前 PHP 文件的源代码&#xff0c;用于调试或展示代码结构 highlight_file(__FILE__); // 关闭所有 PHP 错误报告&#xff0c;防止错误信息泄露可能的安全漏洞 erro…
阅读更多...
C++模板编程——可变参函数模板之折叠表达式

C++模板编程——可变参函数模板之折叠表达式

目录 1. 什么是折叠表达式 2. 一元左折 3. 一元右折 4. 二元左折 5. 二元右折 6. 后记 上一节主要讲解了可变参函数模板和参数包展开&#xff0c;这一节主要讲一下折叠表达式。 1. 什么是折叠表达式 折叠表达式是C17中引入的概念&#xff0c;引入折叠表达式的目的是为了…
阅读更多...
如何用微信小程序写春联

如何用微信小程序写春联

​ 生活没有模板，只需心灯一盏。 如果笑能让你释然，那就开怀一笑；如果哭能让你减压，那就让泪水流下来。如果沉默是金，那就不用解释；如果放下能更好地前行，就别再扛着。 一、引入 Vant UI 1、通过 npm 安装 npm i @vant/weapp -S --production​​ 2、修改 app.json …
阅读更多...
openRv1126 AI算法部署实战之——TensorFlow TFLite Pytorch ONNX等模型转换实战

openRv1126 AI算法部署实战之——TensorFlow TFLite Pytorch ONNX等模型转换实战

Conda简介 查看当前系统的环境列表 conda env list base为基础环境 py3.6-rknn-1.7.3为模型转换环境&#xff0c;rknn-toolkit版本V1.7.3&#xff0c;python版本3.6 py3.6-tensorflow-2.5.0为tensorflow模型训练环境&#xff0c;tensorflow版本2.5.0&#xff0c;python版本…
阅读更多...
电介质超表面中指定涡旋的非线性生成

电介质超表面中指定涡旋的非线性生成

涡旋光束在众多领域具有重要应用&#xff0c;但传统光学器件产生涡旋光束的方式限制了其在集成系统中的应用。超表面的出现为涡旋光束的产生带来了新的可能性&#xff0c;尤其是在非线性领域&#xff0c;尽管近些年来已经有一些研究&#xff0c;但仍存在诸多问题&#xff0c;如…
阅读更多...
最新文章

Copyright @ 2022~2023