Ajax

当涉及到异步通信和动态更新网页内容的时候，Ajax（Asynchronous JavaScript and XML）就是一项非常有用的技术。这篇文章将介绍Ajax技术及其常见写法、缩写、全写以及参数介绍。

什么是Ajax

Ajax是一种在Web应用中传输数据的方法，它允许在无需刷新整个页面的情况下，通过异步通信与服务器进行数据交换。这意味着可以在后台向服务器发送请求并接收响应，将数据作为JavaScript对象进行处理并根据需要更新页面的部分内容。

使用Ajax，你可以在不中断用户操作的情况下更新数据，从而提供更好的用户体验和响应速度。

常见的Ajax写法

传统的方式

最早的Ajax写法是通过原生JavaScript中的XMLHttpRequest对象实现的。以下是一个简单的例子:

//1. 创建XMLHttpRequest 
var xhr = new XMLHttpRequest();
//2. 发送异步请求
xhr.open('GET', 'http://example.com/data', true);
//3. 获取服务响应数据
xhr.onreadystatechange = function() {
	//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // 处理响应数据
    }
};
xhr.send();

在这个例子中，我们创建了一个XMLHttpRequest对象，使用open方法指定请求方法和URL。在onreadystatechange回调函数中，我们检查readyState和status属性以确保请求已成功完成，并处理响应数据。

使用jQuery

jQuery提供了简化Ajax调用的方法，使得编写代码更加简洁。以下是使用jQuery的例子：

$.ajax({
    url: 'http://example.com/data',
    method: 'GET',
    success: function(response) {
        // 处理响应数据
    }
});

这里使用$.ajax函数来发送请求，指定URL和请求方法。在success回调函数中，我们处理返回的响应数据。

jQuery还提供了其他方法如$.get和$.post，使得发送GET和POST请求更加简单。

Ajax的缩写和全写

缩写Ajax实际上代表了"Asynchronous JavaScript and XML"，它强调了这项技术的基本原则。

但是随着时间的推移，人们开始意识到，Ajax不仅限于使用XML作为数据格式，还可以使用其他格式如JSON。因此，Ajax的全写也被赋予了新的含义：“Asynchronous JavaScript and (JSON/XML)”。

无论是Ajax还是(JSON/XML)，它们都指的是同一项技术。

Ajax的参数介绍

在Ajax请求中，有一些常见的参数需要了解：

• url：请求的URL地址。
• method：请求的方法，如GET、POST等。
• data：发送到服务器的数据，可以是字符串、对象或FormData。
• headers：HTTP头部信息，如Content-Type，可以是对象。
• success：请求成功时的回调函数，处理响应数据。
• error：请求失败时的回调函数，处理错误信息。

除了这些常见的参数，还有许多其他的参数可以根据你的需求来使用，如timeout（超时时间）、dataType（响应数据类型）等。

使用 Axios

当谈到使用Ajax发送HTTP请求时，Axios是一个常用的JavaScript库（之前使用的都是原生的方式），它提供了优雅且易于使用的API。下面详细介绍了Axios的使用方法。

首先，确保你的项目中已经引入了Axios库。你可以通过以下方式引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

或者在Node.js环境中，可以通过npm安装：

npm install axios

然后，你可以按照以下步骤使用Axios发送HTTP请求：

1. 导入Axios库：

import axios from 'axios';

2. 发送GET请求：

axios.get('http://example.com/data')
  .then(function(response) {
    // 处理响应数据
  })
  .catch(function(error) {
    // 处理错误
  });

在这个例子中，我们使用axios.get方法发送GET请求，并通过.then处理成功响应和.catch处理错误。

3. 发送POST请求：

axios.post('http://example.com/data', { name: 'John', age: 30 })
  .then(function(response) {
    // 处理响应数据
  })
  .catch(function(error) {
    // 处理错误
  });

这个例子展示了如何使用axios.post方法发送POST请求，并通过传递一个对象作为第二个参数来发送数据。

4. 使用配置选项：

你可以通过创建一个配置对象来自定义Axios请求的各方面。以下是一些常见的配置选项：

axios.get('http://example.com/data', {
  params: { id: 1 }, // GET请求的query参数
  headers: { 'X-Requested-With': 'XMLHttpRequest' }, // 设置请求头
  timeout: 5000 // 请求超时时间
})

在此示例中，我们使用params来指定GET请求的query参数，headers来设置请求头，timeout来设置请求的超时时间。

5. 并发请求：

Axios还提供了并发请求的能力，可以一次性发送多个请求并等待它们全部完成。你可以使用axios.all和axios.spread来实现这一点：

axios.all([
  axios.get('http://example.com/users'),
  axios.get('http://example.com/posts')
])
  .then(axios.spread(function(usersResponse, postsResponse) {
    // 处理每个请求的响应数据
  }))
  .catch(function(error) {
    // 处理错误
  });

在这个例子中，我们使用axios.all方法将两个GET请求组合为一个数组，然后使用axios.spread将这些请求的响应数据传递给.then方法中的回调函数进行处理。

以上是使用Axios发送HTTP请求的基本方法和一些常见用法。Axios提供了更多的功能和选项，如拦截器、取消请求等，请参考官方文档以深入了解。希望这些详细的信息对你有所帮助，如果你有任何其他问题，请随时提问！

请求方法的别名

上面的请求方式是Axios提供别名方式的api,具体如下：

方法	描述
axios.get(url [, config])	发送get请求
axios.delete(url [, config])	发送delete请求
axios.post(url [, data[, config]])	发送post请求
axios.put(url [, data[, config]])	发送put请求

我们只重点关注get和post请求，所以在上述的入门案例中，常见的get请求代码如下：

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})

post请求如下：

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})

函数调用式写法

Axios提供了一种函数调用形式的写法，通过直接调用axios函数，并传入一个配置对象作为参数来发送HTTP请求。这种写法相比于简单的axios.get或axios.post等方法，提供了更大的灵活性和可定制性。下面将详细介绍Axios函数调用形式的写法：

1. 导入Axios库：

   import axios from 'axios';

2. 使用Axios函数调用形式：

   axios(config)
     .then(function(response) {
       // 处理成功响应数据
       console.log(response.data);
     })
     .catch(function(error) {
       // 处理错误
       console.error('Error making request: ', error);
     });

在函数调用形式中，我们将配置对象作为参数传递给axios函数。配置对象的结构如下：

   {
     // 请求方法，默认为GET
     method: 'get',
     // 请求的URL
     url: '/api/data',
     // 请求的数据，用于POST、PUT等方法
     data: {
       key: 'value'
     },
     // 请求头配置
     headers: {
       'Content-Type': 'application/json'
     },
     // 请求超时时间
     timeout: 5000,
     // 请求转换函数
     transformRequest: [function(data, headers) {
       // 对请求数据进行转换处理
       return data;
     }],
     // 响应转换函数
     transformResponse: [function(data) {
       // 对响应数据进行转换处理
       return data;
     }]
   }

在配置对象中，可以指定请求的方法（method）、URL地址（url）、请求参数（data）、请求头（headers）、超时时间（timeout）以及请求和响应的转换函数（transformRequest和transformResponse）等选项。

通过使用函数调用形式，你可以更加灵活地配置请求选项，处理复杂的请求场景，例如发送带有特定头部信息、自定义数据转换、配置超时时间等。

注意，函数调用形式返回的是一个Promise对象，它可以通过.then和.catch方法来处理请求成功和失败的情况。

常见写法举例

GET

axios({
  url:'url',
  params:{
    '参数名':'值'
  }
}).then(response=>{
  response.data
})

常用格式

axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

错误处理

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

总结

本文介绍了Ajax技术及其常见写法、缩写、全写以及一些常见参数的介绍。通过Ajax，我们可以在不刷新整个页面的情况下与服务器进行异步通信，从而提供更好的用户体验。无论是使用传统的XMLHttpRequest对象还是借助jQuery、Axios等库，Ajax都为我们提供了便捷的方式来处理异步请求。