Ajax学习笔记

冰镇毛衣

已于 2022-08-25 09:56:27 修改

阅读量202

点赞数

文章标签： ajax 服务器 javascript

于 2022-08-24 19:22:58 首次发布

本文链接：https://blog.csdn.net/sumatray/article/details/126509348

版权

一、AJAX原理

1.创建XMLHttpRequest/ActiveObject对象

2.注册回调参数

3.配置请求参数

4.发送请求

5.创建回调

1.1 、XMLHttpRequest对象

用于在后台与服务器交换数据

1.2、XMLHttpRequest的几种状态

0.对象没有完成初始化

1.对象开始发送请求

2.对象请求发送完成

3.对象开始读取服务器响应

4.对象读取服务器响应结束

二、AJAX的js实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ajax js 的实现</title>
</head>
<body>
    <p>ajax js 的实现</p>
	<script>
		// 1. 创建XMLHttpRequest对象
		var xmlhttp = null;
		if (window.XMLHttpRequest) {
			xmlhttp = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		} else {
			alert('浏览器不支持')
		}
		// 2. 注册回调函数
		if (xmlhttp !== null) {
			xmlhttp.onreadystatechange = callback;
		}

		// 3. 配置请求参数
		var url = 'http://127.0.0.1:5000/ajax/js'
		// 4. 发送请求
		xmlhttp.open('POST', url, true);
		// 发送请求
		xmlhttp.send(null); 


        // 5. 回调处理
		function callback() {
			if(xmlhttp.readyState === 4) {
				// http状态码
				console.log(xmlhttp.status)
			}
		}

		// 跨域错误  同源策略：协议 地址 端口

	</script>
</body>
</html>

三、AJAX的jquery实现

.ajax函数参数

url----请求地址
method ---- 请求类型
data ---- 请求参数
dataType ---- 返回的数据类型（xml/html/json等）
headers ---- 请求头信息
success --- 请求成功后的回调
error ---- 发生错误后的回调（状态码补位2XX）
complete --- 请求完成后的回调

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
  <p>jquery 中使用 ajax</p>
  <a href="javascript:;">点击提交</a>
  <script>
    $(document).ready(function() {
        $('a').click(function () {
          $.ajax({
            //请求地址
            url: 'http://127.0.0.1:5000/ajax/js',
            //请求类型
            method: 'GET',
            //请求参数
            data: {
                username: 'zhangsan',
                password: '123123'
            },
              /**
            success: function (res) {
              console.log(res)
              alert('成功了')
            },
            error: function () {
                alert('出错了')
            },
               **/
              complete: function() {
                alert('请求完成了')
              }
          })
        })
    })
  </script>
</body>
</html>

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/ajax')
def index():
    return render_template('ajaxjs.html')


@app.route('/ajax/js', methods=['GET', 'POST'])
def ajax_js():
    print(request.values)
    return 'js ajax', 200


@app.route('/ajax/jq')
def ajax_jq():
    return  render_template('ajaxjq.html')

四、AJAX快捷函数

.post --- post请求
.get() ---- get请求
.getJSON() --- get请求json数据

4.1 AJAX全局设置

ajaxSetup()全局设置使用场景

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

2.添加全局参数，如：error:function(event,statusText){}

3. 添加请求头信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax 快捷函数的使用</title>
  <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>
<body>
  <p>ajax 快捷函数的使用</p>
  <a href="javascript:;">点击提交</a>
  <script>
    $(function () {
      $.ajaxSetup({
          headers: {
              'appfrom': 'h5'
          },
          error: function (event) {
            console.log(event.status);
            if(event.status === 401) {
                alert('请登录')
            } else {
               alert('发生了错误')
            }
          }
      })
      $('a').click(function () {
        // $.post('http://127.0.0.1:5000/ajax/js', {
        // $.get('http://127.0.0.1:5000/ajax/js', {
        $.getJSON('http://127.0.0.1:5000/ajax/js', {
            'username': 'zhangsan',
            'password': '123123'
        }, function (res) {
          res = JSON.parse(res)
          console.log(res);
          console.log(res.username);
          alert('请求成功')
        })
      })
    })
  </script>
</body>
</html>