python基础——django中ajax

18
五月
2021

Ajax介绍

  1. Ajax(Asynchronous JavaScript and XML):是一种用于创建快速动态网页的技术。
  2. Asynchronous JavaScript and XML翻译为‘异步JavaScript和XML’,即使用JavaScript语言与服务器进行异步交互传输数据为XML(不只是XML,现在更多使用json数据)
  3. Ajax通过后台与服务器进行少量数据交换,实现网页异步更新,也就代表着可以不重载整个网页的情况下,对页面中的某些部分进行更新。

Ajax最大的优点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页

  1. 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求。
  2. 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。

Ajax工作流程

在这里插入图片描述
Ajax基于现有Internet标准,并联合使用:

		- XMLHttpRequest对象:异步与服务器交换数据
		- JavaScript/DOM:信息显示/交互
		- XML:转换数据的格式

Ajax应用程序与浏览器和平台无关

创建XMLHttpRequest对象

  1. XMLHttpRequest是Ajax的基础
  2. 除IE5和IE6使用ActiveXobject外,所有现在浏览器均致辞XMLHttpRequest对象
  3. XMLHttpRequest用于在后台与服务器交换数据,也就代表不必重加载整个网页的情况下,对部分网页进行更新
创建XMLHttpRequest对象语法
# 所有现在浏览器均内键XMLHttpRequest对象
 variable=new XMLHttpRequest();
 #  老本IE5和IE6使用ActiveX对象
 variable=new ActiveXObject("Microsoft.XMLHTTP");

案例

新建my_python文本文档
在这里插入图片描述
新建HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <script>
    	// 定义函数 执行代码 
        function loadXMLDoc() {
        	# 获取浏览器版本
            var xmlhttp;
            // 判断浏览器版本
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 鼠标点击事件
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
            // 打开my_python.txt文件并获取其中内容
            xmlhttp.open("GET", "my_python.txt", true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
<!-- 点击前显示 -->
<div id="myDiv"><h2>Ajax简单案例</h2></div>
<!-- 设置按钮 -->
<button type="button" onclick="loadXMLDoc()">点击修改</button>
</body>
</html>

运行代码
在这里插入图片描述
点击后
在这里插入图片描述

向服务器发送请求

XMLHttpRequest对象中使用open()和send()方法:

xmlhttp.open("GET","my_python.txt",true);
xmlhttp.send();

在这里插入图片描述

GET与POST方法相比之下,GET刚发更简单也更快,并且大部分情况下都可以使用

以下情况,使用POST请求:

1. 无法使用缓存文件(更新服务器上的文件或数据库)
2. 向服务器发送大量数据(POST方法没有数据量的限制)
3. 发送包含未知字符时的用户输入,POST比GET更加稳定和可靠

在这里插入图片描述

TAG

网友评论

共有访客发表了评论
请登录后再发布评论,和谐社会,请文明发言,谢谢合作! 立即登录 注册会员