快速入门了解Ajax

举报
天天困 发表于 2024/07/26 22:57:30 2024/07/26
【摘要】 Ajax的初识意义:AJAX(Asynchronous JavaScript and XML)即异步 JavaScript 和 XML作用:数据交换:允许网页在不重新加载整个页面的情况下,从服务器获取最新的数据。异步交互:当发送 AJAX 请求获取数据时,页面的其他操作和功能不会被阻塞,由于异步操作不需要等待数据返回就可以继续执行其他任务,能够更有效地利用系统资源,特别是在处理耗时的网络请求...

Ajax的初识

意义:AJAX(Asynchronous JavaScript and XML)即异步 JavaScript 和 XML

作用:

  • 数据交换:允许网页在不重新加载整个页面的情况下,从服务器获取最新的数据。
  • 异步交互:当发送 AJAX 请求获取数据时,页面的其他操作和功能不会被阻塞,由于异步操作不需要等待数据返回就可以继续执行其他任务,能够更有效地利用系统资源,特别是在处理耗时的网络请求时。

原生Ajax:
官网文档:AJAX - XMLHttpRequest 对象
//1. 创建新的 XMLHttpRequest 对象
var xmlHttpRequest  = new XMLHttpRequest();
//2. 发送异步请求
xmlHttpRequest.open('GET','http://~');
xmlHttpRequest.send();//发送请求
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
    //此处判断 4表示浏览器请求已完成就绪的响应数量,200表示请求的状态好是对的,没有错误
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
    }
}

上面是一个原生的Ajax的一个写法,但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题,所以现在都是基于原生的Ajax的Axios

Axios
介绍:Axios是简化的Ajax,对传统的Ajax操作的简化和改进,也是一个更强大和便捷的http请求处理的工具

官网:Axios中文文档 | Axios中文网

下边是两个来自官网的post的请求和get请求的代码

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
const axios = require('axios');
 
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });
 
// 上述请求也可以按以下方式完成(可选)
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });  
 
// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
//请求方式的别名(来自官网)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。