js_jQuery——AJAX

2021-11-18 01:29:53

1、Ajax原理

1）创建XMLHttpRequest/ActiveObject对象

2）注册回调函数

3）配置请求参数

4）发送请求

5）创建回调

2、动手实现AJAX

1）XMLHttpRequest的几种状态

_0_对象没有完成初始化

_1_对象开始发送请求

_2_对象的请求发送完成

_3_对象开始读取服务器响应

_4_对象读取服务器响应结束

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <script type=‘text/javascript‘>
    // 创建XMLHttpRequest/ActiveObject对象
      var xmlhttp = null;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP‘);
      } else {
        alert(‘浏览器不支持‘);
      }

      // 注册回调函数
      if (xmlhttp != null) {
        xmlhttp.onreadystatechange = callback;
      }

      // 配置请求参数
      var url = ‘https://www.imooc.com:8001‘;

      //发送请求
      xmlhttp.open(‘GET‘, url, true);    // (true，异步)
      xmlhttp.send(null);

      // 创建回调
      function callback() {
        if (xmlhttp.readyState === 4) {
          console.log(xmlhttp.status);
        }
      }
    
  </script>
</body>
</html>

3、.ajax(options)函数

_1_url——请求地址

_2_method——请求类型

_3_data——请求参数

_4_dataType——返回的数据类型（xml/html/json等）

_5_headers——请求头信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 中使用ajax</title>
    <script src="/static/js/jquery-3.5.1min.js"></script>
</head>
<body>
<p>jquery 中使用ajax</p>
<script>
    $(() => {
        $.ajax({
            url: ‘http://127.0.0.1:8082/ajax/js/‘,
            method: ‘POST‘,
            data: {
                ‘username‘: ‘admin‘,
                ‘password‘: ‘111‘
            },
            success: (data, status) => {
                console.log(‘data:‘, data, ‘status:‘, status)
            },
            error: (data, status) => {
                console.log(‘error:‘, data, ‘status:‘, status)
            },
            complete: (data, status) => {
                console.log(‘complete:‘, data, ‘status:‘, status)
            }
        })
    })
</script>
</body>
</html>

4、AJAX快捷函数

1）参数模板

_1_url——请求地址

_1_1_.post()——post请求

_1_2_.get()——get请求

_1_3_.getJSON()——get请求json数据

_2_data——请求参数

_3_callback——请求完成后的回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 中使用ajax</title>
    <script src="/static/js/jquery-3.5.1min.js"></script>
</head>
<body>
<p>jquery 中使用ajax</p>

<a href="javascript:void(0);">提交</a>
<script>
    /** $(‘a‘).click(() => {
        {#$.post(‘http://127.0.0.1:8082/ajax/js/‘, {#}
        $.get(‘http://127.0.0.1:8082/ajax/js/‘, {

        }, (rest) => {
            console.log(rest)
        })
    }) */

    $(‘a‘).click(() => {
        {#$.get(‘http://127.0.0.1:8082/ajax/json/‘, {#}
        $.getJSON(‘http://127.0.0.1:8082/ajax/json/‘, {

        }, (rest) => {
            /** let username = JSON.parse(rest).username
            console.log(username) */
            console.log(rest.username)
        })
    })
</script>
</body>
</html>

5、AJAX全局设置

1)ajaxSetup()全局设置使用场景

_1_请求响应拦截，如：http状态码为401跳转到登录界面

_2_添加全局参数

_3_添加请求头信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 中使用ajax</title>
    <script src="/static/js/jquery-3.5.1min.js"></script>
</head>
<body>
<p>jquery 中使用ajax</p>

<a href="javascript:void(0);">提交</a>
<script>
    $.ajaxSetup({
        headers: {
            ‘appfrom‘: ‘web‘,
        },
        statusCode: {
            401: () => {
                alert("没有登录");
            }
        }
    })


    $(‘a‘).click(() => {
        {#$.get(‘http://127.0.0.1:8082/ajax/json/‘, {#}
        $.getJSON(‘http://127.0.0.1:8082/ajax/json/‘, {

        }, (rest) => {
            /** let username = JSON.parse(rest).username
            console.log(username) */
            console.log(rest.username)
        })
    })
</script>
</body>
</html>

js_jQuery——AJAX

码农公寓

相关文章