几种ajax请求方式

上一篇写了vue推荐的Axios写法
vue入门到精通-Axios入门

顺便把之前写的原生的也记录下
参考博客 https://blog.csdn.net/gty204625782/article/details/120538711

1.原生AJAX

1.1 get请求

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajaxtitle>
head>
<body>

    <button>点击发送请求button>

    <script>
        const btn = document.getElementsByTagName('button')[0];

        btn.onclick = function () {
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖');
            //3. 发送
            xhr.send();
           //4. 事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function () {
                //readyState:
                // 0: 请求未初始化
                // 1: 服务器连接已建立
                // 2: 请求已接收
                // 3: 请求处理中
                // 4: 请求已完成,且响应已就绪
                if (xhr.readyState === 4) {
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本

                        alert(xhr.response)
                    } else {

                    }
                }

            }
        }

    script>
body>

html>

1.2 post请求

<body>
    <button>点击发送请求button>

    <script>
        const btn = document.getElementsByTagName('button')[0];

        btn.onclick = function () {
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求方法和url
            xhr.open('POST', 'https://api.apiopen.top/api/login');

            //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // xhr.setRequestHeader('token', '');
            //xhr.send('a=100&b=200&c=300');

            xhr.responseType = 'json';

            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            xhr.onreadystatechange = function () {
                //readyState:
                // 0: 请求未初始化
                // 1: 服务器连接已建立
                // 2: 请求已接收
                // 3: 请求处理中
                // 4: 请求已完成,且响应已就绪
                if (xhr.readyState === 4) {
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果  行 头 空行 体
                        //响应 
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                        //设置 result 的文本

                        alert(JSON.stringify(xhr.response))
                    } else {

                    }
                }

            }
        }

    script>
body>

1.3 ie缓存信息

xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖&t' + Date.now());

1.4 超时回掉

            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //超时设置 2s 设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function () {
                alert("网络异常, 请稍后重试!!");
            }
            //2. 初始化 设置请求方法和url
            xhr.open('GET', 'http://wthrcdn.etouch.cn/weather_mini1city=巢湖&t' + Date.now());
            //3. 发送
            xhr.send();

2. jQuery 发送 AJAX 请求

引入js

<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2.1 get请求

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajaxtitle>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
head>

<body>
    <button>点击发送请求button>

    <script>
  $('button').eq(0).click(function() {
    $.get('http://wthrcdn.etouch.cn/weather_mini?city=巢湖', function(data) {
         alert(JSON.stringify(data))
        }, 'json');
    })
    script>
body>

html>

2.2 post请求

    <script>
        $('button').eq(0).click(function () {
            $.post('https://api.apiopen.top/api/login', {
                account: "[email protected]",
                password: "123456"
            }, function (data) {
                alert(JSON.stringify(data));
            });
        });
    script>

2.3 通用方法

选择器我们用id选择器,之前两个用的是标签选择器
get方式

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajaxtitle>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
head>

<body>
    <button id="button">点击发送请求button>

    <script>
        $('#button').click(function () {
            $.ajax({
                //url
                url: 'http://wthrcdn.etouch.cn/weather_mini?city=巢湖',
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function (data) {
                   alert(JSON.stringify(data))
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function () {
                    alert("出错啦")
                },
                //头信息
                headers: {
                   
                }
            });
        });
    script>
body>

html>

post请求

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajaxtitle>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js">script>
head>

<body>
    <button id="button">点击发送请求button>

    <script>
        $('#button').click(function () {
            $.ajax({
                //url
                url: 'https://api.apiopen.top/api/login',
                //参数
                data: {
                    account: "[email protected]",
                    password: "123456"
                },
                //请求类型
                type: 'post',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function (data) {
                    alert(JSON.stringify(data))
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function () {
                    alert("出错啦")
                },
                //头信息
                headers: {

                }
            });
        });
    script>
body>

html>

你可能感兴趣的:(大前端,ajax,javascript,前端)