Ajax的基本用法什么是Ajax？ Ajax（Asynchronous Javascript And XML），即是异步

什么是Ajax？

Ajax（Asynchronous Javascript And XML），即是异步的JavaScript和XML，Ajax其实就是浏览器与服务器之间的一种异步通信方式。

异步的JavaScript

它可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，在这种情况下，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据。

XML

是前后端数据通信时传输数据的一种格式，现在已经不怎么用了，现在比较常用的是 JSON 所以归纳上述的概念，Ajax就是在浏览器不重新加载网页的情况下，对页面的某部分进行更新。

简单一句话，Ajax就是用JS向服务器发起的一个请求，并获取服务器返回内容

JavaScript中的Ajax的实现

第一步：创建一个Ajax对象

第二步：配置本次的请求信息

第三步：配置一个请求完成后触发的事件

第四步：把本次请求发送出去

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>获取天气</button>
    <script>
        // 获取天气按钮点击事件
document.querySelector('button').onclick = getWeather;
// 定义获取天气的函数
function getWeather() {
    //第一步：创建一个Ajax对象
    var request = new XMLHttpRequest();
}
//第二步：配置本次的请求信息
request.open('GET', 'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=Paris', true);
//第三步：配置一个请求完成后触发的事件
request.onload = function() {
        console.log(request.responseText);
};
//第四步：发送请求
request.send();
    </script>
</body>
</html>

请求方式

Ajax的请求方式有get、post、delete、patch等，常用的是哥谭post请求，下面我们仅针对这两种请求方式的常见区别做对比

对比项	GET	POST
语义	用于获取数据	用于提交数据
可见性	数据在URL中对所有都是可见的	数据不会显示在URL
安全性	与POST相比，GET的安全性较差，因为所发送的数据是URL的一部分	POST比GET更安全，因为参数不会被保存在浏览器历史或web服务器的日志中
数据限制	URL的最大长度是2048个字符（浏览器和文本服务器限制了URL的长度，并不是http限制的）	无限制
后退按钮/刷新	无害	数据会被重新提交

同步请求与异步请求

同步请求： 就是在发送一个请求之后，需要等待服务器响应返回，才能够发送下一个请求。
异步请求： 和同步请求相对，异步不需要等待响应，随时可以发送下一次请求。

jQuery优化Ajax写法

$ajax({ key:value, key.value, ... }) 其中key.value为配置项，常见配置项如下：

配置项	含义
URL	必填，表示请求地址
method	选填，默认是GET，表示请求方式
data	选填，默认是''，表示携带给后端的参数
async	选填，默认是true，表示是否异步
success	选填，表示请求成功的回调函数
error	选填，表示请求失败的的回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>获取天气</button>
    <script>
        $('buton').click(getWeather)
        function getWeather(){
            $.ajax({
                url: 'https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=LOCATION',
                type: 'GET',
                data :{city:'芜湖'}
                async:true
                success: function(response) {
                    console.log(response);
                },
                error: function(error) {
                    console.log(error);
                }
            })
        }
    </script>
</body>
</html>