前端学习——ajax (Day3)

AJAX原理 - XMLHttpRequest

前端学习——ajax (Day3)_第1张图片

使用 XMLHttpRequest

前端学习——ajax (Day3)_第2张图片
前端学习——ajax (Day3)_第3张图片

DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
head>
<body>
  <p class="my-p">p>
  <script>
    const xhr = new XMLHttpRequest()
    xhr.open('GET','http://hmajax.itheima.net/api/province')
    xhr.addEventListener('loadend',()=>{
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      // console.log(data.list.join('
'))
document.querySelector('.my-p').innerHTML = data.list.join('
'
) }) xhr.send()
script> body> html>

前端学习——ajax (Day3)_第4张图片
前端学习——ajax (Day3)_第5张图片

XMLHttpRequest - 查询参数

前端学习——ajax (Day3)_第6张图片

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="city-p">p>
  <script>
    /**
     * 目标:使用XHR携带查询参数,展示某个省下属的城市列表
    */
   const xhr = new XMLHttpRequest()
   xhr.open('GET','http://hmajax.itheima.net/api/city?pname=吉林省')
   xhr.addEventListener('loadend',()=>{
    console.log(xhr.response)
    const data = JSON.parse(xhr.response)
    document.querySelector('.city-p').innerHTML = data.list.join('
'
) }) xhr.send()
script> body> html>

前端学习——ajax (Day3)_第7张图片

前端学习——ajax (Day3)_第8张图片

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. 查询按钮-点击事件
    document.querySelector('.sel-btn').addEventListener('click', () => {
      // 2. 收集省份和城市名字
      const pname = document.querySelector('.province').value
      const cname = document.querySelector('.city').value

      // 3. 组织查询参数字符串
      const qObj = {
        pname,
        cname
      }
      // 查询参数对象 -> 查询参数字符串
      const paramsObj = new URLSearchParams(qObj)
      const queryString = paramsObj.toString()
      console.log(queryString)

      // 4. 使用XHR对象,查询地区列表
      const xhr = new XMLHttpRequest()
      xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)
        const data = JSON.parse(xhr.response)
        console.log(data)
        const htmlStr = data.list.map(areaName => {
          return `
  • ${areaName}
  • `
    }).join('') console.log(htmlStr) document.querySelector('.list-group').innerHTML = htmlStr }) xhr.send() })
    script> body> html>

    XMLHttpRequest - 数据提交

    前端学习——ajax (Day3)_第9张图片

    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', () => {
          const xhr = new XMLHttpRequest()
          xhr.open('POST', 'http://hmajax.itheima.net/api/register')
          xhr.addEventListener('loadend', () => {
            console.log(xhr.response)
          })
    
          // 设置请求头-告诉服务器内容类型(JSON字符串)
          xhr.setRequestHeader('Content-Type', 'application/json')
          // 准备提交的数据
          const userObj = {
            username: 'itheima007',
            password: '7654321'
          }
          const userStr = JSON.stringify(userObj)
          // 设置请求体,发起请求
          xhr.send(userStr)
        })
      script>
    body>
    
    html>
    

    Promise

    前端学习——ajax (Day3)_第10张图片

    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>认识Promisetitle>
    head>
    
    <body>
      <script>
        /**
         * 目标:使用Promise管理异步任务
        */
        // 1. 创建Promise对象
        const p = new Promise((resolve, reject) => {
          // 2. 执行异步代码
          setTimeout(() => {
            // resolve('模拟AJAX请求-成功结果')
            reject(new Error('模拟AJAX请求-失败结果'))
          }, 2000)
        })
    
        // 3. 获取结果
        p.then(result => {
          console.log(result)
        }).catch(error => {
          console.log(error)
        })
      script>
    body>
    
    html>
    

    Promise - 三种状态

    前端学习——ajax (Day3)_第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>认识Promise状态title>
    head>
    
    <body>
      <script>
        /**
         * 目标:认识Promise状态
        */
        // 1. 创建Promise对象(pending-待定状态)
        const p = new Promise((resolve, reject) => {
          // Promise对象创建时,这里的代码都会执行了
          // 2. 执行异步代码
          setTimeout(() => {
            // resolve() => 'fulfilled状态-已兑现' => then()
            resolve('模拟AJAX请求-成功结果')
            // reject() => 'rejected状态-已拒绝' => catch()
            reject(new Error('模拟AJAX请求-失败结果'))
          }, 2000)
        })
        console.log(p)
    
        // 3. 获取结果
        p.then(result => {
          console.log(result)
        }).catch(error => {
          console.log(error)
        })
    
    
      script>
    body>
    
    html>
    

    你可能感兴趣的:(前端,学习,ajax)