首页 > 其他分享 >AJAX学习(三)

AJAX学习(三)

时间:2023-10-26 21:31:34浏览次数:29  
标签:XMLHttpRequest 请求 URLSearchParams 学习 xhr AJAX 参数 const

一、AJAX原理-XMLHttpRequest

(1)定义及原理

定义:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

AJAX的原理也就是XMLHttpRequest对象(下文简称XHR)

注意axios不等于XMLHttpRequest

关系:axios内部采用XMLHttpRequest与服务器交互

AJAX学习(三)_html

(2)使用XHR的原因

有更多与服务器数据通信方式

了解axios内部原理

(3)使用XHR

步骤:

创建XMLHttpRequest对象

配置请求方法和请求URL地址

监听Loadend事件,接收响应结果

发起请求

AJAX学习(三)_服务器_02

代码示例如下:

<!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>XMLHttpRequest_基础使用</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    // <p class="my-p"></p>

    /**
     * 目标:使用XMLHttpRequest对象与服务器通信
     *  1. 创建 XMLHttpRequest 对象
     *  2. 配置请求方法和请求 url 地址
     *  3. 监听 loadend 事件,接收响应结果
     *  4. 发起请求
    */



    //1. 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()

    //2. 配置请求方法和请求 url 地址
    xhr.open('GET', 'https://hmajax.itheima.net/api/province')

    //3. 监听 loadend 事件,接收响应结果
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      console.log(data)
      console.log(data.list.join('<br>'))
      document.querySelector('.my-p').innerHTML = data.list.join('<br>')
    })

    xhr.send()
  </script>
</body>

</html>

AJAX学习(三)_服务器_03

二、XMLHttpRequest-查询参数

(1)定义及语法

定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据

语法:http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2(UR+?+参数名=值)

注意:参数名1=值1&参数名2=值2   参数之间需要&连接

AJAX学习(三)_服务器_04

代码示例如下

<!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>XMLHttpRequest_查询参数</title>
</head>

<body>
  <script>
    /**
     * 目标:使用XHR携带查询参数,展示某个省下属的城市列表
    */
	
  	//创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest()
    
    //配置请求方法和请求URL地址
    xhr.open('GET', 'https://hmajax.itheima.net/api/city?pname=辽宁省')
    
    //监听Loadend事件,接收响应结果
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response)
    })

    //发起请求
    xhr.send()
  </script>
</body>

</html>

AJAX学习(三)_html_05

(2)URLSearchParams对象的使用

参数名较多的情况下,使用http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2比较麻烦并且容易出错,这时候就需要URLSearchParams对象帮忙了

使用方法如下

const paramsObj = new URLSearchParams({
      参数名1:值1,
      参数名2:值2
    })

    //2生成指定格式查询参数 字符串
    const querString = paramsObj.toString()
    //结果 参数名1=值1&参数名2=值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>案例_地区查询</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <style>
    :root {
      font-size: 15px;
    }

    body {
      padding-top: 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <form id="editForm" class="row">
      <!-- 输入省份名字 -->
      <div class="mb-3 col">
        <label class="form-label">省份名字</label>
        <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
      </div>
      <!-- 输入城市名字 -->
      <div class="mb-3 col">
        <label class="form-label">城市名字</label>
        <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
      </div>
    </form>
    <button type="button" class="btn btn-primary sel-btn">查询</button>
    <br><br>
    <p>地区列表: </p>
    <ul class="list-group">
      <!-- 示例地区 -->
      <li class="list-group-item">东城区</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */

    //1创建 URLSearchParams对象
    // const paramsObj = new URLSearchParams({
    //   参数名1:值1,
    //   参数名2:值2
    // })

    // //2生成指定格式查询参数 字符串
    // const querString = paramsObj.toString()
    // //结果 参数名1=值1&参数名2=值2



    document.querySelector('.sel-btn').addEventListener('click', () => {
      const pname = document.querySelector('.province').value
      const cname = document.querySelector('.city').value

      const qObj = {
        pname,
        cname
      }

      const paramsObj = new URLSearchParams(qObj)
      const querString = paramsObj.toString()
      console.log(querString)

    })
  </script>
</body>

</html>

AJAX学习(三)_ios_06

AJAX学习(三)_ios_07

打印结果说明我们是成功的了,然后就可以使用XHR对象来进行操作了


AJAX学习(三)_ios_08

AJAX学习(三)_ios_09

三、XMLHttpRequest-数据提交

我们用一张图来概括XMLHttpRequest数据提交的使用方法

AJAX学习(三)_服务器_10

请求行:请求方法,URL,协议

请求头:以键值对的格式携带的附加信息,比如:Content-Type

空行:分隔请求头,空行之后的是发送给服务器的资源

请求体:发送的资源

AJAX学习(三)_html_11

示例代码如下

<!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>XMLHttpRequest_数据提交</title>
</head>

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标:使用xhr进行数据提交-完成注册功能
    */



    document.querySelector('.reg-btn').addEventListener('click', () => {

      //1创建 URLSearchParams对象
      const xhr = new XMLHttpRequest()

       //2. 配置请求方法和请求 url 地址
      xhr.open('POST','https://hmajax.itheima.net/api/register')

       //3. 监听 loadend 事件,接收响应结果
      xhr.addEventListener('loadend',()=>{
        console.log(xhr.response)
      })

      //设置请求头,告诉服务器内容类型(JSON字符串)
      xhr.setRequestHeader('Content-Type','application/json')

      //准备提交数据
      const userObj = {
        username:'Orange',
        password:'1234567'

      }
      const userStr = JSON.stringify(userObj)
      //设置请求体,发起请求
      xhr.send(userStr)

    })
  </script>
</body>

</html>

AJAX学习(三)_ios_12



标签:XMLHttpRequest,请求,URLSearchParams,学习,xhr,AJAX,参数,const
From: https://blog.51cto.com/u_15858858/8043353

相关文章

  • 学习笔记:概率期望
    概率&期望样本空间、随机事件定义一个随机现象中可能发生的不能再细分的结果被称为样本点。所有样本点的集合称为样本空间,通常用\(\Omega\)来表示。一个随机事件是样本空间\(\Omega\)的子集,它由若干样本点构成,用大写字母\(A,B,C,\cdots\)表示。对于一个随机现......
  • 【KELM回归预测】基于核极限学习KELM实现风电回归预测附matlab代码
    ✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。......
  • usb2.0协议复习--Apple的学习笔记
    一,前言10多年前买过一本圈圈教你usb,然后自己移植了代码到自己焊接的单片机最小系统,当时连原理图都是我自己画的,现在原理图软件已经不知道怎么用了,所以usb协议基本也忘记了。居然配置了usbhost那么简单,这样感觉都没有学习过什么,我还是希望要雁过留痕。所以下载了wiresharkusb抓包......
  • 2023-2024 20231313《计算机基础与程序设计》第五周学习总结
    2023-202420231313《计算机基础与程序设计》第五周学习总结作业速达作业课程班级链接作业要求计算机基础与程序设计第五周学习总结作业内容计算机科学概论第6章、《C语言程序设计》第4章并完成云班课测试————>Pep/9虚拟机、机器语言与汇编语言、算法与伪......
  • 广义 SAM 学习笔记
    开CF开到了一道广义SAM,决定来学一学。发现网上确实充斥着各种各样的伪广义SAM,也看到了前人反复修改假板子的过程,所以试着来整理一下这堆奇奇怪怪的问题。当然本文的代码也不保证百分百正确,有误请指出(?前置知识后缀自动机(SAM)的构造及应用其实想写在一起的,但因为太长就......
  • 2023/10/25学习笔记·
    Linux基础命令学习2alias——别名语法:alias 自定义命令=“原始命令”(原始命令中有特殊符号的需要打上引号)例如:vim/etc/sysconfig/network-scripts/ifcfg-ens33这条命令是用来更改网卡的aliasmyvim=“vim/etc/sysconfig/network-scripts/ifcfg-ens33”这样......
  • 2023/10/26学习笔记
    Linux基础命令学习3关于文件的命令cat——查看文件语法:cat [选项]...文件...选项:-A:显示隐藏字符-n:显示行号-b:跳过空白行编辑-s:压缩空白行(压缩回车键)合并文件:cat a b  >c——合并ab文件变成c拓展:tac——反向查看文件rev——将每一行的内容反过来查看more/......
  • 多年学习django知识经验总结,从基础到高手,markdown笔记,共计50页,10大模块。 第(2)期
    Django的主要目的是简便、快速的开发数据库驱动的网站。它强调代码复用,多个组件可以很方便的以"插件"形式服务于整个框架,Django有许多功能强大的第三方插件,你甚至可以很方便的开发出自己的工具包。这使得Django具有很强的可扩展性。它还强调快速开发和DRY(DoNotRepeatYourself)原......
  • 人工智能 | 机器学习与自动驾驶
    随着科技的不断进步,机器学习技术正逐渐改变着我们的生活和社会,而自动驾驶汽车则是这一变革中的重要里程碑。机器学习在自动驾驶领域的应用已经取得了巨大成功,为道路安全、交通效率和出行方式带来了深刻的变革。机器学习与自动驾驶的融合自动驾驶汽车依赖于大量的传感器和数据来感知......
  • 数据结构学习2
    三、递归3.1、时空间复杂度   3.2、递归式 ......