3.AJAX原理 DAY3

最新推荐文章于 2024-05-31 10:04:55 发布
最新推荐文章于 2024-05-31 10:04:55 发布
阅读量51 收藏
点赞数
分类专栏： AJAX 文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51394252/article/details/131870188
版权

一、XMLHttpRequest

1.1 AJAX原理 - XMLHttpRequest

1.2 使用 XMLHttpRequest

步骤：

  1. 创建 XMLHttpRequest 对象
  2. 配置请求方法和请求 url 地址
  3. 监听 loadend 事件，接收响应结果
  4. 发起请求

案例：使用 XMLHttpRequest

需求：获取并展示所有省份名字

<!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>
    /**
     * 目标：使用XMLHttpRequest对象与服务器通信
     *  1. 创建 XMLHttpRequest 对象
     *  2. 配置请求方法和请求 url 地址
     *  3. 监听 loadend 事件，接收响应结果
     *  4. 发起请求
    */
  //  1. 创建 XMLHttpRequest 对象
  const xhr = new XMLHttpRequest()
  // 2. 配置请求方法和请求 url 地址
  xhr.open('GET', 'http://hmajax.itheima.net/api/province')
  // 3. 监听 loadend 事件，接收响应结果
  xhr.addEventListener('loadend', () => {
    console.log(xhr.response)
    // 将JSON字符串转化为JSON对象
    const data  = JSON.parse(xhr.response)
    console.log(data.list.join('<br>'))
    document.querySelector('.my-p').innerHTML = data.list.join('<br>')
  })
  // 4. 发起请求
  xhr.send()

  </script>
</body>

</html>

1.3 总结

  1. AJAX 原理是什么？
    ➢ XMLHttpRequest 对象
  2. 为什么学习 XHR？
    ➢ 有更多与服务器数据通信方式
    ➢ 了解 axios 内部原理
  3. XHR 使用步骤？
    ➢ 创建 XHR 对象
    ➢ 调用 open 方法，设置 url 和请求方法
    ➢ 监听 loadend 事件，接收结果
    ➢ 调用 send 方法，发起请求

1.4 XMLHttpRequest - 查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
语法：http://xxxx.com/xxx/xxx ?参数名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>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)
    console.log(data)
    document.querySelector('.city-p').innerHTML = data.list.join('<br>')
   })
   xhr.send()
  </script>
</body>

</html>
案例：地区查询

需求：输入省份和城市名字，查询地区列表
请求地址：http://hmajax.itheima.net/api/area?参数名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/bootstrap@5.1.3/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 `<li class="list-group-item">${areaName}</li>`
      })
      console.log(htmlStr)
      document.querySelector('.list-group').innerHTML = htmlStr
    })
    xhr.send()
  })
  </script>
</body>

</html>

1.5 XMLHttpRequest - 数据提交

需求：通过 XHR 提交用户名和密码，完成注册功能
核心：
请求头设置 Content-Type：application/json
请求体携带 JSON 字符串

<!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:'shiyou001',
        password:'7654321'
      }
      const userStr = JSON.stringify(userObj)
      // 设置请求体，发送请求
      xhr.send(userStr)
    })
  </script>
</body>

</html>

二、Promise

2.1 Promise

<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>
  1. 什么是 Promise？
    ➢ 表示（管理）一个异步操作最终状态和结果值的对象
  2. 为什么学习 Promise？
    ➢ 成功和失败状态，可以关联对应处理程序
    ➢ 了解 axios 内部原理
  3. Promise 使用步骤？

2.2 Promise - 三种状态

作用：了解Promise对象如何关联的处理函数，以及代码执行顺序
概念：一个Promise对象，必然处于以下几种状态之一
✓ 待定（pending） ：初始状态，既没有被兑现，也没有被拒绝
✓ 已兑现（fulfilled） ：意味着，操作成功完成
✓ 已拒绝（rejected） ：意味着，操作失败
注意：Promise对象一旦被兑现/拒绝
就是已敲定了，状态无法再被改变

<body>
  <script>
    /**
     * 目标：认识Promise状态
    */
    // 1. 创建Promise对象
    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>
  1. Promise 对象有哪 3 种状态？
    ➢ 待定 pending
    ➢ 已兑现 fulfilled
    ➢ 已拒绝 rejected
  2. Promise 状态有什么用？
    ➢ 状态改变后，调用关联的处理函数

2.3 使用Promise + XHR 获取省份列表

需求：使用 Promise 管理 XHR 获取省份列表，并展示到页面上
步骤：

  1. 创建 Promise 对象
  2. 执行 XHR 异步代码，获取省份列表
  3. 关联成功或失败函数，做后续处理
<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：使用Promise管理XHR请求省份列表
     *  1. 创建Promise对象
     *  2. 执行XHR异步代码，获取省份列表
     *  3. 关联成功或失败函数，做后续处理
    */
  //  1. 创建Promise对象
  const p = new Promise((resolve, reject) => {
    // 2. 执行XHR异步代码，获取省份列表
    const xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://hmajax.itheima.net/api/province')
    xhr.addEventListener('loadend', () => {
      // xhr如何判断响应是否成功还是失败的？
      // 2xx开头的都是成功响应状态码
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(new Error(xhr.response))
      }
    })
    xhr.send()
  })

  // 3. 关联成功或失败函数，做后续处理
  p.then(result => {
    console.log(result)
    document.querySelector('.my-p').innerHTML = result.list.join('<br>')
  }).catch(error => {
    // 错误对象要用console.dir详细打印
    console.dir(error);
  })
    
  </script>
</body>

三、封装简易版 axios

3.1 封装_简易axios_获取省份列表

<!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>封装_简易axios函数_获取省份列表</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：封装_简易axios函数_获取省份列表
     *  1. 定义myAxios函数，接收配置对象，返回Promise对象
     *  2. 发起XHR请求，默认请求方法为GET
     *  3. 调用成功/失败的处理程序
     *  4. 使用myAxios函数，获取省份列表展示
    */
  //  1.定义myAxios函数，接收配置对象，返回Promise对象
  function myAxios(config) {
    return new Promise((resolve, reject) => {
      // 2. 发起XHR请求，默认请求方法为GET
      const xhr = new XMLHttpRequest()
      xhr.open(config.method || 'GET', config.url)
      xhr.addEventListener('loadend',() => {
        // 3. 调用成功/失败的处理程序
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response))
        } else {
          reject(new Error(xhr.response))
        }
      })
      xhr.send()
    })
  }
  // 4. 使用myAxios函数，获取省份列表展示
  myAxios({
    url: 'http://hmajax.itheima.net/api/province'
  }).then(result => {
    console.log(result)
    document.querySelector('.my-p').innerHTML = result.list.join('<br>')
  }).catch(error => {
    console.log(error)
    document.querySelector('.my-p').innerHTML = error.message
  })

  </script>
</body>

</html>

3.2 封装_简易axios_获取地区列表

需求：修改 myAxios 函数支持传递查询参数，获取"辽宁省"，"大连市"对应地区列表展示
步骤：
1.myAxios 函数调用后，判断 params 选项
2.基于 URLSearchParams 转换查询参数字符串
3.使用自己封装的 myAxios 函数展示地区列表

<!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>封装_简易axios函数_获取地区列表</title>
</head>

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：封装_简易axios函数_获取地区列表
     *  1. 判断有params选项，携带查询参数
     *  2. 使用URLSearchParams转换，并携带到url上
     *  3. 使用myAxios函数，获取地区列表
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        // 1. 判断有params选项，携带查询参数
        if (config.params) {
          // 2. 使用URLSearchParams转换，并携带到url上
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          // 把查询参数字符串，拼接到url？后面
          config.url += `?${queryString}`
        }

        xhr.open(config.method || 'GET', config.url)
        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        xhr.send()
      })
    }

    // 3. 使用myAxios函数，获取地区列表
    myAxios({
      url: 'http://hmajax.itheima.net/api/area',
      params: {
        pname: '辽宁省',
        cname: '大连市'
      }
    }).then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    })
    

  </script>
</body>

</html>

3.3 封装_简易axios_注册用户

需求：修改 myAxios 函数支持传递请求体数据，完成注册用户功能
步骤：
1.myAxios 函数调用后，判断 data 选项
2.转换数据类型，在 send 方法中发送
3.使用自己封装的 myAxios 函数完成注册用户功能

<!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>封装_简易axios函数_注册用户</title>
</head>

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：封装_简易axios函数_注册用户
     *  1. 判断有data选项，携带请求体
     *  2. 转换数据类型，在send中发送
     *  3. 使用myAxios函数，完成注册用户
    */
    function myAxios(config) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()

        if (config.params) {
          const paramsObj = new URLSearchParams(config.params)
          const queryString = paramsObj.toString()
          config.url += `?${queryString}`
        }
        xhr.open(config.method || 'GET', config.url)

        xhr.addEventListener('loadend', () => {
          if (xhr.status >= 200 && xhr.status < 300) {
            resolve(JSON.parse(xhr.response))
          } else {
            reject(new Error(xhr.response))
          }
        })
        // 1. 判断有data选项，携带请求体
        if(config.data) {
          // 2. 转换数据类型，在send中发送
          const jsonStr = JSON.stringify(config.data)
          xhr.setRequestHeader('Content-Type', 'application/json')
          xhr.send(jsonStr)
        } else {
          xhr.send()
        }
      })
    }
    document.querySelector('.reg-btn').addEventListener('click', () => {
      // 3. 使用myAxios函数，完成注册用户
      myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          username:'itheima999',
          password:'666666'
        }
      }).then(result => {
        console.log(result)
      }).catch(error => {
        console.dir(error)
      })
    })
  </script>
</body>

</html>

四、案例 - 天气预报

步骤：

  1. 获取北京市天气数据，展示
  2. 搜索城市列表，展示
  3. 点击城市，显示对应天气数据


需求：根据关键字，展示匹配城市列表
步骤：

  1. 绑定 input 事件，获取关键字
  2. 获取展示城市列表数据


需求：展示用户搜索查看的城市天气
步骤：

  1. 检测搜索列表点击事件，获取城市 code 值
  2. 复用获取展示城市天气函数
/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */
// 获取并渲染城市天气函数
function getWeather(cityCode) {
    // 1.1 获取北京市天气数据
    myAxios({
        url: 'http://hmajax.itheima.net/api/weather',
        params: {
            city: cityCode
        }
    }).then(result => {
        console.log(result)
        const wObj = result.data
        console.log(wObj)
        // 1.2 数据展示到页面
        // 阳历和阴历日期
        const dataStr = `<span class="dateShort">${wObj.date}</span>
        <span class="calendar">农历&nbsp;
          <span class="dateLunar">${wObj.dateLunar}</span>
        </span>`
        document.querySelector('.title').innerHTML = dataStr
        // 城市名字
        document.querySelector('.area').innerHTML = wObj.area
        // 当天气温
        const nowWStr = `<div class="tem-box">
        <span class="temp">
          <span class="temperature">${wObj.temperature}</span>
          <span>°</span>
        </span>
      </div>
      <div class="climate-box">
        <div class="air">
          <span class="psPm25">${wObj.psPm25}</span>
          <span class="psPm25Level">${wObj.psPm25Level}</span>
        </div>
        <ul class="weather-list">
          <li>
            <img src="${wObj.weatherImg}" class="weatherImg" alt="">
            <span class="weather">${wObj.weather}</span>
          </li>
          <li class="windDirection">${wObj.windDirection}</li>
          <li class="windPower">${wObj.windPower}</li>
        </ul>
      </div>`
      document.querySelector('.weather-box').innerHTML = nowWStr
    //  当天天气
    const twObj = wObj.todayWeather 
    // console.log(twObj)
    const todayWStr = `<div class="range-box">
    <span>今天：</span>
    <span class="range">
      <span class="weather">${twObj.weather}</span>
      <span class="temNight">${twObj.temNight}</span>
      <span>-</span>
      <span class="temDay">${twObj.temDay}</span>
      <span>℃</span>
    </span>
  </div>
  <ul class="sun-list">
    <li>
      <span>紫外线</span>
      <span class="ultraviolet">${twObj.ultraviolet}</span>
    </li>
    <li>
      <span>湿度</span>
      <span class="humidity">${twObj.humidity}</span>%
    </li>
    <li>
      <span>日出</span>
      <span class="sunriseTime">${twObj.sunriseTime}</span>
    </li>
    <li>
      <span>日落</span>
      <span class="sunsetTime">${twObj.sunsetTime}</span>
    </li>
  </ul>`
  document.querySelector('.today-weather').innerHTML = todayWStr
//   7日天气预报数据展示
const dayForecast = wObj.dayForecast
const datForecastStr = dayForecast.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">${item.windPower}</span>
    </div>
  </li>`
}).join('')
// console.log(dayForecastStr)
document.querySelector('.week-wrap').innerHTML = datForecastStr
    })
}

// 默认进入网页-就要获取天气数据（北京市城市编码：'110100'）
getWeather('110100')
/**
 * 目标2：搜索城市列表
 * 2.1 绑定input事件，获取关键字
 * 2.2 获取展示城市列表
 */
// 2.1 绑定input事件， 获取关键字
document.querySelector('.search-city').addEventListener('input', (e) => {
    console.log(e.target.value)
    // 2.2获取展示城市列表数据
    myAxios({
        url: 'http://hmajax.itheima.net/api/weather/city',
        params:{
            city: e.target.value
        }
    }).then(result => {
        console.log(result)
        const liStr = result.data.map(item => {
            return `<li class="city-item" data-code = "${item.code}">${item.name}</li>`
        }).join('')
        console.log(liStr)
        document.querySelector('.search-list').innerHTML = liStr
    })
})
/**
 * 目标3：切换目标城市
 * 3.1 绑定城市点击事件，获取城市code值
 * 3.2 调用获取并展示天气的函数
 */
document.querySelector('.search-list').addEventListener('click', e => {
    if (e.target.classList.contains('city-item')){
        // 只有点击城市li才会走这里
        const cityCode = e.target.dataset.code
        console.log(cityCode)
        // 3.2 调用获取并展示天气函数
        getWeather(cityCode)

    }
})
是柚柚耶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui用ajax服务器交互,Mui --- app与服务器之间的交互原理、mui ajax使用
weixin_34486987的博客
08-05 1010
1、APP与服务器之间的交互原理app端(客户端)与服务端的交互其实理解起来和容易，客户端想服务器端发送请求，服务器端进行数据运算后返回最终结果。结果可以是多种格式：1、text 文本格式2、xml 格式3、json 格式2、什么是JSON？JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON 语法规则:数据在键值对中数据由逗号分隔花括号保存对象方...
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
10-19
主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下
Ajax.Day3.Ajax与Jquery
疯子的梦想@的博客
10-14 100
Ajax与jqueryJquery中的AJAXJquery通用方法发送AJAX请求axios发送AJAX请求使用fetch函数发送AJAX请求同源策略解决跨域，JSONP跨域请求CORS响应 Jquery中的AJAX 首先新建一个案例client.html，使用了bootstrap进行样式美化。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ht
2.AJAX 综合案例 DAY2
m0_51394252的博客
07-22 97
Bootstrap 弹框
1.AJAX 入门 DAY1 让数据活起来
m0_51394252的博客
07-21 78
（「艾科C藕丝」）引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js使用 axios 函数✓ 传入配置对象✓ 再用.then回调函数接收结果，并做后续处理AJAX 有什么用？➢ 浏览器和服务器之间通信，动态数据交互AJAX 如何学：➢ 先掌握 axios 使用➢ 再了解 XMLHttpRequest 原理这一节 axios 体验步骤？➢ 引入 axios 库➢ 使用 axios 语法。
Day03_AJAX原理
一只小老虎
04-15 142
ajax原理学习
day1.2.5.Ajax篇
夏暮秋风的博客
09-18 86
文章目录Ajax入门请求方式同步请求异步请求原理应用：语法：原生AjaxjQuery框架简化$.get请求$.post请求$.ajax请求方式jquery3.0新特性ajax请求注意 Ajax入门 一种新型的发送请求的方式,能局部刷新数据。Ajax 即"Asynchronous Javascript And XML"（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 请求方式 同步请求 整体更新，返回整个页面，数据量大返回较慢。当前野米安要等请求完毕才能进行操作。 异步请
AJAX-day02-AJAX原理
来自计科大一萌新的编程记录本
07-20 511
学习目标：1.了解Ajax原理 2.学会使用XMLHttpRequest 和Promise并能封装简易的axios
ajax概述原理,ajax基本原理
weixin_39521520的博客
08-05 73
C&plus;&plus;模拟C&num;事件委托机制(一)原文来自于http://www.cnblogs.com/netssfy/articles/1652671.html 写了一段时间的C#代码后确实发现C#的事件委托非常好用.于是便想是否在C++中也能如 ...【BZOJ】1085&colon; &lbrack;SCOI2005&rsqb;骑士...
12.ajax
weixin_30556959的博客
08-13 97
1. ajax概述 AJAX asynchronous js and xml: 异步的js和xml AJAX是一个异步请求的操作，可以在页面大部分内不变情况下完成局部刷新的操作。 ajax是通过js来实现的。其中异步请求发送的数据是xml格式的数据。 ...
$.ajax()方法参数详解
12-10
会灵活的运用ajax的方法，非常重要，本文先给大家介绍ajax的几种方法，然后通过实例给大家分析详解，具体内容请看下文吧 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为...
Ext.Ajax.request跨域
04-22
NULL 博文链接：https://chun521521.iteye.com/blog/1935516
Jquery中$.post和$.ajax的用法小结
10-24
本节重点讲的是jquery中调用ajax的4种方法中最常用的：$.post、和$ajax。如果读者没有javascript和jquery的知识，或者没有ajax的概念，那么请先去问问度娘，再来读本文。
axios_vue3.zip
06-25
这个压缩包包含两个东西，一个是vue3.js，也就是vue的3.x版本，另一个是axios，它是一个用于发送ajax的js库，https://axios-http.com/docs/intro，ajax是用于实现异步的http通信的
jquery---ajax方法示例
I_am_shy的博客
05-29 267
ajax方法有一个参数，一定长度的对象，内部指定了ajax的请求地址和格式，方式等等，它可以有以下的属性和值。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 510
记录一次前端页面崩溃的产生及处理
前端开发记录
最新发布
qq_25806839的博客
05-31 165
【代码】前端开发记录。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 524
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
$.ajax请求jsonp的原理
06-06
在使用 `$.ajax` 发送 JSONP 请求时，jQuery 会利用 `<script>` 标签的跨域特性，动态创建一个 `<script>` 标签，标签的 `src` 属性指向请求的 URL 地址，同时在 URL 后面加上一个名为 `callback` 的参数，这个参数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值