Ajax 详解及其使用

Ajax(Asynchronous JavaScript and XML)是一种在客户端与服务器之间进行异步通信的技术,它允许网页在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。Ajax 的核心是XMLHttpRequest(XHR)对象,它提供了在客户端与服务器之间发送和接收数据的能力。Vue中通常利用Ajax技术来实现动态数据的获取、展示和更新。

Ajax 的工作原理

  1. 创建 XMLHttpRequest 对象

    • 所有现代浏览器(IE7+,Firefox, Chrome, Safari 以及 Opera)都内建了 XMLHttpRequest 对象。创建方式通常是直接通过 new XMLHttpRequest() 来实现。
  2. 发送请求到服务器

    • 通过调用 XMLHttpRequest 对象的 open()send() 方法,可以向服务器发送请求。open() 方法用于规定请求的类型(如"GET"、"POST")、URL以及是否异步处理请求。send() 方法则实际上是发送请求。
  3. 服务器处理请求

    • 服务器接收到请求后,根据请求处理后端逻辑,然后发送响应数据。
  4. 接收服务器响应

    • AJAX 异步接收响应,不会影响用户的其他操作。通过监听 XMLHttpRequest 对象的 onreadystatechange 事件,可以在服务器响应的状态改变时进行操作。当 readyState 属性变为 4 且 status 为 200 时,表示成功收到服务器的响应数据。
  5. 更新网页内容

    • 通过 JavaScript 操作 DOM,可以将接收到的数据动态展示在网页上,从而实现无需重新加载整个页面即可更新部分网页内容的效果。

在 Vue 中使用 Ajax

在 Vue 项目中,Ajax 通常与前端框架结合使用来动态获取或提交数据。Vue 应用通常使用 Axios 作为 HTTP 客户端进行 Ajax 请求,Axios 是一个基于 Promise 的 HTTP 库,可以用于浏览器和 node.js。

引入 Axios

首先,需要在 Vue 项目中安装 Axios:

bash 复制代码
npm install axios
示例:在 Vue 组件中发送 GET 请求

接下来,展示如何在一个 Vue 组件中使用 Axios 发送 GET 请求获取数据:

javascript 复制代码
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/items')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.error('请求失败: ', error);
        });
    },
  },
};
</script>

在这个组件中,fetchData 方法通过 Axios 向 'https://api.example.com/items' 发送 GET 请求,然后在 .then 回调函数中使用响应数据更新 items 数据属性。mounted 钩子确保在组件挂载完成后立即获取数据。

了解Ajax技术及其在Vue中的应用,需要从几个方面更深入地探讨。以下将详细介绍包括XMLHttpRequest对象的使用细节,以及Vue.js项目中常用的HTTP客户端Axios的高级应用。

XMLHttpRequest对象

XMLHttpRequest是实现Ajax技术的基础,其工作流程大致如下:

  1. 实例化 :创建一个XMLHttpRequest对象的实例。

    javascript 复制代码
    var xhr = new XMLHttpRequest();
  2. 配置请求 :通过调用open方法配置请求的主要参数,如请求方法、URL、是否异步等。

    javascript 复制代码
    xhr.open('GET', 'https://api.example.com/data', true);
  3. 设置回调函数 :通过监听onreadystatechange事件,设置当服务器响应的状态变化时的回调函数。在这个回调函数中,根据xhr.readyState的状态,决定是否处理响应数据。

    javascript 复制代码
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            console.log(response);
        }
    };
  4. 发送请求 :使用send方法发送请求。可以传递数据给服务器,也可以为null,具体取决于请求类型。

    javascript 复制代码
    xhr.send(null);
  5. 处理响应:在回调函数中处理服务器返回的数据。

Vue.js 与 Axios

在Vue项目中,通常使用Axios库来简化Ajax请求的流程。Axios是一个基于Promise的HTTP客户端,支持浏览器和node.js环境。它提供方便的API进行请求配置、发起和响应处理。

引入和安装Axios

在Vue项目中使用Axios之前,需要安装:

shell 复制代码
npm install axios

然后,在需要发起网络请求的Vue组件中引入Axios:

javascript 复制代码
import axios from 'axios';
示例:在Vue组件中发起GET请求

以下代码展示了如何在Vue组件的mounted生命周期钩子中调用fetchData方法,向服务器发起GET请求并处理响应:

javascript 复制代码
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/posts')
        .then(response => {
          this.items = response.data;
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }
  }
};
</script>
Axios的高级使用

Axios提供了很多高级功能,包括但不限于:

  • 拦截器(Interceptors):可以在请求或响应被处理前,对它们进行拦截和操作。

    javascript 复制代码
    // 添加请求拦截器
    axios.interceptors.request.use(config => {
      // 在发送请求之前做些什么
      return config;
    }, error => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use(response => {
      // 对响应数据做点什么
      return response;
    }, error => {
      // 对响应错误做点什么
      return Promise.reject(error);
    });
  • 取消请求:Axios允许在请求发出后,如果需要,可以取消进行中的请求。

    javascript 复制代码
    const CancelToken = axios.CancelToken;
    let source = CancelToken.source();
    
    axios.get('https://api.example.com/posts', {
      cancelToken: source.token
    }).catch(function(thrown) {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        // 处理错误
      }
    });
    
    // 取消请求 (请求原因是可选的)
    source.cancel('Operation canceled by the user.');
  • 全局配置:Axios允许定义针对所有请求的全局默认值。

    javascript 复制代码
    axios.defaults.baseURL = 'https://api.example.com';
    axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

通过结合Vue的响应式系统和Axios的高级特性,可以有效地管理应用的数据流,使得数据处理更加灵活和高效。

Ajax 实战演练

根据和风天气(QWeather)API文档,若需通过城市名直接获取天气信息,您需要首先使用地理编码(Geocode)API将城市名称转换成相应的地理位置代码(即 location ID),然后再用这个位置代码调用天气预报 API。以下是基于和风天气API进行操作的步骤:

步骤1: 地理编码API转换城市名到 location ID

首先,使用和风天气的geoAPI:

https://geoapi.qweather.com/v2/city/lookup?location=城市名&key=您的API密钥&lang=zh
  • location参数修改为您想查询的城市名(例如北京)。
  • key参数请替换为您的和风天气API密钥。

示例请求(以"北京"为例,假设密钥为YOUR_API_KEY):

https://geoapi.qweather.com/v2/city/lookup?location=北京&key=YOUR_API_KEY&lang=zh

返回的JSON数据中会包含该城市的location ID等信息。

步骤2: 使用天气预报API获取7天天气

获得location ID后,使用7天天气预报API:

https://devapi.qweather.com/v7/weather/7d?location=获得的位置ID&key=您的API密钥&lang=zh

location参数替换为步骤1中获得的位置ID,key参数替换为您的API密钥。

示例代码

应用上述步骤的示例JavaScript代码片段(假设您使用axios进行HTTP请求):

第一部分:通过城市名获取location ID

javascript 复制代码
axios.get("https://geoapi.qweather.com/v2/city/lookup?location=北京&key=YOUR_API_KEY&lang=zh")
    .then(response => {
        if (response.data.code === "200") {
            const locationId = response.data.location[0].id; // 假设取第一个返回结果的ID
            getWeather(locationId); // 调用获取天气信息的函数
        }
    })
    .catch(error => {
        console.error("获取地理编码失败:", error);
    });

第二部分:使用location ID获取7天天气信息

javascript 复制代码
function getWeather(locationId) {
    axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${locationId}&key=YOUR_API_KEY&lang=zh`)
        .then(response => {
            console.log("7天天气信息:", response.data);
            // 这里可以进一步处理和显示天气信息
        })
        .catch(error => {
            console.error("获取天气信息失败:", error);
        });
}

实现过程如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../02%20vue%20初识/vue.js"></script>
    <style>
        table,tr,th,td{
            border: 3px solid red;
            border-collapse: collapse;
        }
        th ,td{
            width: 200px;
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        .co{
            background-color: orange;
        }
    </style>
</head>
<body>
<div id="app" class="center-block">
    <input type="text" v-model="city"><button @click="getque" class="table-bordered">查询城市天气</button>
    <div>当前查询城市: {{city}}</div>
    <p></p>
    <table  v-if="data!=''">
        <tr>
            <th>序号</th>
            <th>城市</th>
            <th>日期</th>
            <th>白天天气</th>
            <th>夜间天气</th>
            <th>最高温度</th>
            <th>最低温度</th>
            <th>相对湿度</th>
            <th>能见度</th>
        </tr>
        <tr v-for="(tq,index) in data">
            <td>{{index+1}}</td>
            <td>{{city}}</td>
            <td>{{tq.fxDate}}</td>
            <td>{{tq.textDay}}</td>
            <td>{{tq.textNight}}</td>
            <td>{{tq.tempMax}}</td>
            <td>{{tq.tempMin}}</td>
            <td>{{tq.humidity}}</td>
            <td>{{tq.vis}}</td>
        </tr>
    </table>
</div>
<script>
    const app={
        data(){
            return{
                data:[],
                id:'',
                city:'北京',
            }
        },
        methods:{
            getque(){
                axios.get(`https://geoapi.qweather.com/v2/city/lookup?location=${this.city}&key=dc7728d14dfb4c6eb3eadc070a58397&lang=zh`).then(response=>{
                    console.log(response.data.location)
                    // 获取地理位置ID
                    // const locationId = response.data.location[0].id;
                    //获取城市名字
                    this.city=response.data.location[0].name
                    //获取城市id
                    this.id=response.data.location[0].id
                    console.log(this.data,this.id)
                    axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${this.id}&key=dc7728d14dfb4c6eb3eadc070a58397&lang=zh`).then(response=>{
                        console.log(response.data.daily)
                        this.data = response.data.daily;
                    })
                })
            }
        }
    }
    vm=Vue.createApp(app).mount('#app')
</script>
</body>
</html>

方法二:

将获取城市天气情况进行优化,采用官方推荐方法实现

html 复制代码
<script>
  const app={
    data(){
      return{
        data:[],
        id:'',
        city:'北京',
      }
    },
    methods:{
      getque(){
        axios.get("https://geoapi.qweather.com/v2/city/lookup?key=dc7728d14dfb4c6eb3eadc070a58397b&lang=zh",{
          params:{
              location:this.city
            }
        }).then(response=>{
          console.log(response.data.location)
          // 获取地理位置ID
          // const locationId = response.data.location[0].id;
          //获取城市名字
          this.city=response.data.location[0].name
          //获取城市id
          this.id=response.data.location[0].id
          console.log(this.data,this.id)
          axios.get(`https://devapi.qweather.com/v7/weather/7d?location=${this.id}&key=dc7728d14dfb4c6eb3eadc070a58397b&lang=zh`).then(response=>{
            console.log(response.data.daily)
            this.data = response.data.daily;
          })
        })
      }
    }
  }
  vm=Vue.createApp(app).mount('#app')
</script>

代码解释:

代码段使用了axios来发送HTTP GET请求到和风天气(即QWeather)的API,查询特定城市的信息。您的方式完全正确,并且使用了params对象传递了查询参数,这是axios推荐的方式之一,因为它可以使URL查询参数的管理更加清晰易读。

这段代码将发送一个GET请求到和风天气API的城市地理位置查找接口(city/lookup)。请求的认证通过key参数传递,同时指定语言参数lang为中文(zh),查询的城市名称通过location参数动态指定,值来源于this.city,这意味着this.city应当事先在相应的Vue组件的data函数中定义,并且可以通过某些交互方式(例如用户输入)得到赋值。

成功响应后,response.data.location将包含一个或多个城市的相关信息,例如城市名、ID、经纬度等,具体包含哪些信息取决于和风天气API的返回数据结构。

这个示例中,使用了Vue的v-model指令来实现数据的双向绑定,使用户可以通过输入框输入城市名称,然后点击按钮调用queryCity方法进行查询,查询结果将在控制台输出。

axios的使用语境中,paramsaxios库中用来指定URL查询参数(URL query parameters)的一个选项,并不是JavaScript或其他编程语言中的固定语法。在使用axios.get或其他HTTP方法时,可以通过在配置对象中添加一个params属性来传递这些参数。axios会自动把params对象转换成相应的URL查询字符串并附加到请求的URL后面。

例如:

javascript 复制代码
axios.get('https://example.com/api', {
  params: {
    key1: 'value1',
    key2: 'value2'
  }
});

上面的请求会向https://example.com/api?key1=value1&key2=value2发送一个GET请求。

所以,params在这里是axios专用的一个配置项名称,用于在发起请求时指定要传递的URL查询参数。这样做的好处是让请求参数更加清晰可读,同时避免了手动拼接查询字符串的麻烦。

这种方式在使用axios发送需要查询字符串的请求时非常有用,但需要注意,这是axios库的特定功能,与其它HTTP请求库或原生JavaScript的fetch API使用方法可能有所不同。

实现效果:

输入想要查询的城市未来七天的天气默认城市为北京,点击search按钮进行查询:

查询其他城市,比如深圳

其他

在使用axios这个HTTP库时,请求配置中除了params以外,还有许多其他的选项可以使用,以适应不同的请求需求。下面列举了一些常用的axios请求配置选项:

  1. url:要请求的URL地址。
  2. method :请求方法,如getpostput等。
  3. baseURL :会被自动加在url前面,除非url是一个绝对URL。这个参数可以在实例创建时设置,以便在实例中使用相对路径的请求。
  4. headers:自定义请求头。
  5. params:请求的URL查询参数。
  6. data :作为请求主体被发送的数据,适用于请求方法如PUTPOST,和PATCH等。
  7. timeout:请求超时时间(毫秒)。
  8. responseType :服务器响应的数据类型,如jsontextblob等。
  9. responseEncoding : 用于解码响应字符串的编码类型,默认是utf8
  10. maxContentLength:定义允许的响应内容的最大尺寸。
  11. validateStatus :自定义响应状态码的验证函数,如果验证函数返回true(或者设置为nullundefined),则承诺将解决,否则承诺将拒绝。
  12. withCredentials:表示跨站点访问控制请求时是否需要使用凭证。
  13. auth:表示应用于HTTP Basic Auth的凭证。
  14. onUploadProgressonDownloadProgress:上传和下载过程中的回调函数,允许处理进度事件。

这些配置都可以在每个请求中单独使用,也可以在创建axios实例时指定,以便在实例创建的所有请求中全局使用。配置选项使axios成为一个功能强大且灵活的HTTP客户端库。

需要注意的是,一些配置项(如dataparams)的适用场景不同。例如,params通常用于GET请求中附加URL查询参数,而data用于POST、PUT等请求中发送请求体数据。

此外,axios还提供了一些高级功能,如拦截器(Interceptors),它们允许您在请求或响应被thencatch处理之前对它们进行拦截和处理。这在实际开发中非常有用,比如添加通用的请求头、处理全局的错误提示等。

简单举例说明

好的,下面将通过具体的代码示例来说明axios中一些常用配置选项的用法。

1. urlmethod

向特定URL发送GET请求:

javascript 复制代码
axios({
  method: 'get',
  url: 'https://example.com/data',
}).then(response => {
  console.log(response.data);
});

2. baseURL

设置基本的URL路径,后续请求可以只写资源路径:

javascript 复制代码
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

instance.get('/data').then(response => {
  console.log(response.data);
});

3. headers

自定义请求头,比如设置Content-Type

javascript 复制代码
axios.post('/login', {
  username: 'example',
  password: '123456',
}, {
  headers: {
    'Content-Type': 'application/json'
  }
});

4. params

添加URL查询参数:

javascript 复制代码
axios.get('/data', {
  params: {
    ID: 12345
  }
}).then(response => {
  console.log(response.data);
});

5. data

发送请求体数据,常用于POST方法:

javascript 复制代码
axios.post('/submit', {
  name: '张三',
  age: 30
}).then(response => {
  console.log(response.data);
});

6. timeout

设置请求超时时间:

javascript 复制代码
axios.get('/data', {
  timeout: 5000  // 5秒超时
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error('请求超时或其他错误', error);
});

7. responseType

指定响应数据类型:

javascript 复制代码
axios.get('/data', {
  responseType: 'json'
}).then(response => {
  console.log(response.data);
});

8. withCredentials

带上跨站点访问控制请求中的凭证(如Cookies):

javascript 复制代码
axios.get('https://api.example.com/data', {
  withCredentials: true
});

9. auth

使用HTTP Basic Auth:

javascript 复制代码
axios.get('/admin', {
  auth: {
    username: 'admin',
    password: 's3cret'
  }
});

10. onUploadProgressonDownloadProgress

监控文件上传和下载进度:

javascript 复制代码
axios.post('/upload', formData, {
  onUploadProgress: progressEvent => {
    let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
});

axios.get('/download', {
  onDownloadProgress: progressEvent => {
    let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
});

每个配置选项都针对特定的使用场景,通过灵活使用这些选项,可以有效地控制HTTP请求的各个方面。

总结

Ajax 在现代 Web 开发中扮演着重要的角色,它允许创建快速动态网页。通过 Ajax,可以在不重新加载整个网页的情况下与服务器交换数据,这显著提升了用户体验。在 Vue.js 开发中,结合使用 Axios 库来进行 Ajax 请求是非常普遍和高效的做法。

相关推荐
IT女孩儿1 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐3 小时前
前端图像处理(一)
前端
程序猿阿伟3 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪3 小时前
AJAX的基本使用
前端·javascript·ajax