Ajax(Asynchronous JavaScript and XML)是一种在客户端与服务器之间进行异步通信的技术,它允许网页在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。Ajax 的核心是XMLHttpRequest
(XHR)对象,它提供了在客户端与服务器之间发送和接收数据的能力。Vue中通常利用Ajax技术来实现动态数据的获取、展示和更新。
Ajax 的工作原理
-
创建 XMLHttpRequest 对象:
- 所有现代浏览器(IE7+,Firefox, Chrome, Safari 以及 Opera)都内建了
XMLHttpRequest
对象。创建方式通常是直接通过new XMLHttpRequest()
来实现。
- 所有现代浏览器(IE7+,Firefox, Chrome, Safari 以及 Opera)都内建了
-
发送请求到服务器:
- 通过调用
XMLHttpRequest
对象的open()
和send()
方法,可以向服务器发送请求。open()
方法用于规定请求的类型(如"GET"、"POST")、URL以及是否异步处理请求。send()
方法则实际上是发送请求。
- 通过调用
-
服务器处理请求:
- 服务器接收到请求后,根据请求处理后端逻辑,然后发送响应数据。
-
接收服务器响应:
- AJAX 异步接收响应,不会影响用户的其他操作。通过监听
XMLHttpRequest
对象的onreadystatechange
事件,可以在服务器响应的状态改变时进行操作。当readyState
属性变为 4 且status
为 200 时,表示成功收到服务器的响应数据。
- AJAX 异步接收响应,不会影响用户的其他操作。通过监听
-
更新网页内容:
- 通过 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技术的基础,其工作流程大致如下:
-
实例化 :创建一个
XMLHttpRequest
对象的实例。javascriptvar xhr = new XMLHttpRequest();
-
配置请求 :通过调用
open
方法配置请求的主要参数,如请求方法、URL、是否异步等。javascriptxhr.open('GET', 'https://api.example.com/data', true);
-
设置回调函数 :通过监听
onreadystatechange
事件,设置当服务器响应的状态变化时的回调函数。在这个回调函数中,根据xhr.readyState
的状态,决定是否处理响应数据。javascriptxhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var response = JSON.parse(xhr.responseText); console.log(response); } };
-
发送请求 :使用
send
方法发送请求。可以传递数据给服务器,也可以为null
,具体取决于请求类型。javascriptxhr.send(null);
-
处理响应:在回调函数中处理服务器返回的数据。
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允许在请求发出后,如果需要,可以取消进行中的请求。
javascriptconst 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允许定义针对所有请求的全局默认值。
javascriptaxios.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
首先,使用和风天气的geo
API:
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
的使用语境中,params
是axios
库中用来指定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
请求配置选项:
url
:要请求的URL地址。method
:请求方法,如get
、post
、put
等。baseURL
:会被自动加在url
前面,除非url
是一个绝对URL。这个参数可以在实例创建时设置,以便在实例中使用相对路径的请求。headers
:自定义请求头。params
:请求的URL查询参数。data
:作为请求主体被发送的数据,适用于请求方法如PUT
、POST
,和PATCH
等。timeout
:请求超时时间(毫秒)。responseType
:服务器响应的数据类型,如json
、text
、blob
等。responseEncoding
: 用于解码响应字符串的编码类型,默认是utf8
。maxContentLength
:定义允许的响应内容的最大尺寸。validateStatus
:自定义响应状态码的验证函数,如果验证函数返回true
(或者设置为null
或undefined
),则承诺将解决,否则承诺将拒绝。withCredentials
:表示跨站点访问控制请求时是否需要使用凭证。auth
:表示应用于HTTP Basic Auth的凭证。onUploadProgress
和onDownloadProgress
:上传和下载过程中的回调函数,允许处理进度事件。
这些配置都可以在每个请求中单独使用,也可以在创建axios
实例时指定,以便在实例创建的所有请求中全局使用。配置选项使axios
成为一个功能强大且灵活的HTTP客户端库。
需要注意的是,一些配置项(如data
、params
)的适用场景不同。例如,params
通常用于GET请求中附加URL查询参数,而data
用于POST、PUT等请求中发送请求体数据。
此外,axios
还提供了一些高级功能,如拦截器(Interceptors),它们允许您在请求或响应被then
或catch
处理之前对它们进行拦截和处理。这在实际开发中非常有用,比如添加通用的请求头、处理全局的错误提示等。
简单举例说明
好的,下面将通过具体的代码示例来说明axios
中一些常用配置选项的用法。
1. url
和 method
向特定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. onUploadProgress
和 onDownloadProgress
监控文件上传和下载进度:
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 请求是非常普遍和高效的做法。