Ajax

最新推荐文章于 2024-08-30 18:03:30 发布
最新推荐文章于 2024-08-30 18:03:30 发布
阅读量306 收藏 6
点赞数
分类专栏： # 前端基础 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40318474/article/details/106641665
版权

目录

伪Ajax（iframe）

由于HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。

<body>
    
    <input type="text" id="url" />
    <input type="button" value="发送iframe请求" onclick="iframeRequest();" />
    <iframe id="ifm" src="http://www.baidu.com"></iframe>
      
    <script src="/static/jquery-1.12.4.js"> </script>
    <script>
        function iframeRequest(){
            var url = $("#url").val();
            console.log(url);
            $("#ifm").attr("src", url);
        }
    </script>
</body>

<body>
    
    <form action="/ajax_json/" method="POST" target="ifm1"> <!-- 通过target属性，将form和iframe建立关系，表单一提交，就会通过iframe将数据提交到后台，页面将不刷新 -->
        <iframe name="ifm1" id="ifm1"></iframe>
        <input type="text" name="username" />
        <input type="text" name="email" />
        <input type="submit" value="Form提交" />
    </form>    
    <script src="/static/jquery-1.12.4.js"> </script>
    <script>
        
    </script>
</body>

如何得到后台返回的数据：

<body>
    <form action="/ajax_json/" method="POST" target="ifm1"> <!-- 通过target属性，将form和iframe建立关系，表单一提交，就会通过iframe将数据提交到后台，页面将不刷新 -->
        <!--<iframe name="ifm1" onload="iframeLoad();"></iframe>-->
        <iframe name="ifm1" id="ifm1"></iframe>
        <input type="text" name="username" />
        <input type="text" name="email" />
        <input type="submit" value="Form提交" onclick="submitForm();"/>
    </form>    
    <script src="/static/jquery-1.12.4.js"> </script>
    <script>

        function submitForm(){
            $("#ifm1").load(function(){
                var text = $("#ifm1").contents().find("body").text();
                var obj = JSON.parse(text);
            });
        }

        /*function iframeLoad(){
            console.log(123);
        }*/
    </script>
</body>

原生Ajax

Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作，该对象在主流浏览器中均存在(除早起的IE)，Ajax首次出现IE5.5中存在（ActiveX控件）。

XmlHttpRequest对象

XmlHttpRequest对象的主要方法：

a. void open(String method,String url,Boolen async)
   用于创建请求
    
   参数：
       method： 请求方式（字符串类型），如：POST、GET、DELETE...
       url：    要请求的地址（字符串类型）
       async：  是否异步（布尔类型）
 
b. void send(String body)
    用于发送请求
 
    参数：
        body： 要发送的数据（字符串类型）
 
c. void setRequestHeader(String header,String value)
    用于设置请求头
 
    参数：
        header： 请求头的key（字符串类型）
        vlaue：  请求头的value（字符串类型）
 
d. String getAllResponseHeaders()
    获取所有响应头
 
    返回值：
        响应头数据（字符串类型）
 
e. String getResponseHeader(String header)
    获取响应头中指定header的值
 
    参数：
        header： 响应头的key（字符串类型）
 
    返回值：
        响应头中指定的header对应的值
 
f. void abort()
 
    终止请求

XmlHttpRequest对象的主要属性：

a. Number readyState
   状态值（整数）
 
   详细：
      0-未初始化，尚未调用open()方法；
      1-启动，调用了open()方法，未调用send()方法；
      2-发送，已经调用了send()方法，未接收到响应；
      3-接收，已经接收到部分响应数据；
      4-完成，已经接收到全部响应数据；
 
b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数（回调函数）
 
c. String responseText
   服务器返回的数据（字符串类型）
 
d. XmlDocument responseXML
   服务器返回的数据（Xml对象）
 
e. Number states
   状态码（整数），如：200、404...
 
f. String statesText
   状态文本（字符串），如：OK、NotFound...

跨浏览器支持

  • XmlHttpRequest: IE7+, Firefox, Chrome, Opera, etc.
  • ActiveXObject(“Microsoft.XMLHTTP”): IE6, IE5

例子：

views.py
	def ajax(request):
	    return render(request, 'ajax.html')
	
	def ajax_json(request):
	    ret = {'status': True, 'data': request.POST.get('username')}
	    import json
	    return HttpResponse(json.dumps(ret)) #, status=404, reason='Not Found'

ajax.html
	<body>
	    <input type='text' />
	    <input type="button" value="Ajax1" onclick="Ajax1();" />
	   
	    <script src="/static/jquery-1.12.4.js"> </script>
	    <script>
	
	        function getXHR(){ // 解决浏览器兼容性问题
	            var xhr = null;
	            if(XMLHttpRequest){
	                xhr = new XMLHttpRequest();
	            }else{
	                xhr = new ActiveXObject("Microsoft.XMLHTTP");
	            }
	            return xhr;
	        }
	
	        function Ajax1(){
	            var xhr = getXHR();
	            xhr.open("GET", "/ajax_json/", true);
	            xhr.onreadystatechange = function(){
	                if(xhr.readyState == 4){
	                    //接收数据
	                    //console.log(xhr.responseText)
	                    var obj = JSON.parse(xhr.responseText)
	                    console.log(obj)
	                }
	            };
	            xhr.setRequestHeader("k1", "v1");
	            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); // 发post请求，必须加，不然数据发不过去
	            xhr.send("name=root;pwd=123");
	        }
	    </script>
	</body>

jQuery Ajax

作用：前端页面验证

jQuery.get(...) # 参数非字典
    所有参数：
         url: 待载入页面的URL地址
        data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。
    dataType: 返回内容格式，xml, json,  script, text, html


jQuery.post(...)
    所有参数：
         url: 待载入页面的URL地址
        data: 待发送 Key/value 参数
     success: 载入成功时回调函数
    dataType: 返回内容格式，xml, json,  script, text, html


jQuery.getJSON(...)
    所有参数：
         url: 待载入页面的URL地址
        data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。


jQuery.getScript(...)
    所有参数：
         url: 待载入页面的URL地址
        data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。

jQuery.ajax(...) # 参数是字典
	部分参数：
    url：请求地址
    type：请求方式，GET、POST（1.9.0之后用method）
    headers：请求头
    data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
    async：是否异步
    timeout：设置请求超时时间（毫秒）

    beforeSend：发送请求前执行的函数(全局)
    complete：完成之后执行的回调函数(全局)
    success：成功之后执行的回调函数(全局)
    error：失败之后执行的回调函数(全局)
    
    accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
    dataType：将服务器端返回的数据转换成指定类型
		"xml": 将服务器端返回的内容转换成xml格式
		"text": 将服务器端返回的内容转换成普通文本格式
        "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
        "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式
        	使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

            如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string

	converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
		$.ajax({
			accepts: {
            	mycustomtype: 'application/x-some-custom-type'
            },
                  
            // Expect a `mycustomtype` back from server
            dataType: 'mycustomtype'

            // Instructions for how to deserialize a `mycustomtype`
            converters: {
            	'text mycustomtype': function(result) {
                	// Do Stuff
                    return newresult;
                }
            },
        });

demo1

$('#ajax_submit').click(function(){
	$.ajax({
	    url: '/test_ajax/',
	    type: "POST",
	    #data: $('#add_form').serialize() # form表单中的所有可以提交的值打包发送到后台
	    data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
	    //function有三个参数，其中的第2个或第3个就是XMLHttprequest对象
	    success: function(data){
	        // data是服务器端返回的字符串
	        var obj = JSON.parse(data)
	        if(obj.status){
	            location.reload();
	        }else{
	            $('#error_msg').text(obj.error);
	        }
	    }
	})
});

def test_ajax(request):
    ret = {"status": True, "error": None, "data": None}
    try:
        print(request.method, request.POST, sep="\t")
        h = request.POST.get('hostname')
        i = request.POST.get('ip')
        p = request.POST.get('port')
        b = request.POST.get('b_id')
        if h and len(h) > 5:
            models.Host.objects.create(hostname=h,
                                            ip=i,
                                            port=p,
                                            b_id=b)
        else:
            ret['status'] = False
            ret['error'] = '太短了'
    except Exception as e:
        ret['status'] = False
        ret['error'] = '请求错误'
    return HttpResponse(json.dumps(ret))# HttpResponse的参数是字符串，ret是一个字典，所以需要通过json将字典转换成字符串

demo2

$('#add_submit_ajax').click(function(){
    $.ajax({
        url: '/ajax_add_app/',
        //data: {"user": 123, 'host_list': [1,2,3,4]},
        data: $('#add_form').serialize(),
        type: "POST",
        traditional: true, # 需要这个属性，才可以将前端的列表、字典发送到后端
        dataType: "JSON", # 帮我们处理了转换的过程，直接返回给我们对象的格式
        //function有三个参数，其中的第2个或第3个就是XMLHttprequest对象
        success: function(obj){

        },
        error: function(){

        }
    });
});

def ajax_add_app(request):
    ret = {"status": True, "error": None, 'data': None}
    print(request.POST.get('app_name'))
    print(request.POST.getlist('host_list'))
    app_name = request.POST.get('app_name')
    host_list = request.POST.getlist('host_list')
    obj = models.Application.objects.create(name=app_name)
    obj.r.add(*host_list)
    return HttpResponse(json.dumps(ret))

补充：

前端对象转换成字符串
li = [1,2,3,4]
json.stringify(li)

时机：如果发送的是【普通数据】——> jquery, ajax, iframe

基于ajax的文件上传

def upload_file(request):
    username = request.POST.get("username")
    fafafa = request.FILES.get('fafafa')
    print(username, fafafa)
    import os
    img_path = os.path.join('static/imgs', fafafa.name)
    with open(img_path, 'wb') as f:
        for item in fafafa.chunks():
            f.write(item)

    ret = {'status': True, 'data': img_path}
    import json
    return HttpResponse(json.dumps(ret))

原生的ajax文件上传

<body>
	<div style="position: relative; width: 100px; height: 50px;">
	    <input class="file" type="file" id="fafafa" name="afafaf" />
	    <a class="upload"> 上传 </a>
	</div>
	<!--XHR提交和JQuery提交都用到了FormData，但并不是所有的浏览器都支持FormData，比如IE-->
	<input style="top: 160px;" type="button" value="提交XHR" onclick="xhrSubmit();" />
	<script src="/static/jquery-1.12.4.js"> </script>
    <script>
		function xhrSubmit(){
	        // $("#fafafa")[0] jquery对象
	         var file_obj = document.getElementById("fafafa").files[0]; // document对象
	
	         var fd = new FormData();
	         fd.append("username", "root");
	         fd.append("fafafa", file_obj);
	
	         var xhr = new XMLHttpRequest();
	         xhr.open("POST", "/upload_file/", true);
	         xhr.onreadystatechange = function(){
	             if(xhr.readyState == 4){
	                 //接收数据
	                 //console.log(xhr.responseText)
	                 var obj = JSON.parse(xhr.responseText)
	                 console.log(obj)
	             }
	         };
	         xhr.send(fd);
	     }
	</script>  
</body>

基于jquery的ajax文件上传

<body>
	<div style="position: relative; width: 100px; height: 50px;">
	    <input class="file" type="file" id="fafafa" name="afafaf" />
	    <a class="upload"> 上传 </a>
	</div>
	<!--XHR提交和JQuery提交都用到了FormData，但并不是所有的浏览器都支持FormData，比如IE-->
	<input style="top: 160px;" type="button" value="提交JQuery" onclick="jqSubmit();" />
	<script src="/static/jquery-1.12.4.js"> </script>
    <script>
		function jqSubmit(){
            // $("#fafafa")[0]
            var file_obj = document.getElementById("fafafa").files[0];

            var fd = new FormData();
            fd.append("username", "root");
            fd.append("fafafa", file_obj);

            $.ajax({
                url: "/upload_file/",
                type: "POST",
                data: fd,
                processData: false,  // tell jQuery not to process the data, 不要做特殊的处理
                contentType: false,  // tell jQuery not to set contentType, 不要做特殊的处理
                success: function(arg, a1, a2){
                    console.log(arg);
                    console.log(a1);
                    console.log(a2);
                }
            });
        }
	</script>  
</body>

伪ajax文件上传+文件预览

<body>
	<div style="position: relative; width: 100px; height: 50px;">
	    <input class="file" type="file" id="fafafa" name="afafaf" />
	    <a class="upload"> 上传 </a>
	</div>
	<form id="fm1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe name="ifm1" id="ifm1" style="display: none;"></iframe>
        <input type="file" name="fafafa" onchange="changeUpload();" /> <!-- 文件选中即上传 -->
        <input type="submit" value="提交iframe" onclick="iframeSubmit();"/>
    </form>
	<script src="/static/jquery-1.12.4.js"> </script>
    <script>
    	function changeUpload(){
            $("#ifm1").load(function(){
                var text = $("#ifm1").contents().find("body").text();
                var obj = JSON.parse(text);
                
                $("#preview").empty();
                var imgTag = document.createElement("img");
                imgTag.src = "/" + obj.data;
                $("#preview").append(imgTag);
            });

            $("#fm1").submit();
        }
            
		function iframeSubmit(){
            $("#ifm1").load(function(){ //通过load拿到返回值
                var text = $("#ifm1").contents().find("body").text();
                var obj = JSON.parse(text);
                
                $("#preview").empty();
                var imgTag = document.createElement("img");
                imgTag.src = "/" + obj.data;
                $("#preview").append(imgTag);
            });
        }
	</script>  
</body>

时机：如果发送的是【文件】——>iframe, jquery(FormData), ajax(FormData)

73、
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax
huangyh技术栈
09-28 3万+
1.1 什么是ajax: Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（无刷新...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
看这一篇就够了！-Ajax详解
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
Ajax请求的五个步骤
热门推荐
chaopingyao的博客
06-02 17万+
Ajax请求的五个步骤 一、定义 1、什么是Ajax Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。 2、同步与异步的区别 同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。 异步提交：当用户发送请
AJAX简介
xpmhhh的博客
03-20 6865
AJAX: 全称Asynchronous JavaScript And XML，即异步JS和XML。 通过AJAX可以在浏览器中向服务器发送异步请求。 最大的优势：无刷新的获取数据。 Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 XML: 可扩展标记语言，被设计用来传输和存储数据。 与HTML的区别：HTML中都是预定义的标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。 以前Ajax是用XML格式的字符串进行数据交换，现在已经被JSON取代了。
Ajax请求
weixin_45030426的博客
03-25 1万+
ajax请求简介： ajax是利用前端的技术，向服务器发送一个异步请求 原有的请求在请求后需要刷新整张页面，
AJAX
风间琉璃の博客
08-04 4040
AJAX AJAX 不是一种新的编程语言而是一种使用现有标准的新方法，与服务器交换数据并更新部分网页的新技术（不用重新加载整个界面）。 AJAX = 异步JavaScript和xml。 1.创建AJAX对象 XMLHttpRequest 对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); 老版本的ie var xhr = new ActiveXObj...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
C# 如何使用ajax请求
08-18
C# 如何使用ajax请求 C# 使用ajax请求是指在C# 项目中使用ajax技术来实现异步更新网页的内容。ajax即“Asynchronous Javascript And XML”（异步JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页...
Ajax学习笔记
小陈从不熬夜
08-21 1206
Ajax学习笔记
Ajax的$.post()，$.get()，$.ajax 方法请求都是默认异步请求
程序人生
08-30 226
【代码】Ajax的$.post()，$.get()，$.ajax 方法请求都是默认异步请求。
理解 Axios、jQuery Ajax 和 Fetch 的差别
最新发布
a2274001782的博客
08-30 510
jQuery 是一个功能强大的 JavaScript 库，Ajax 是其核心功能之一。通过 jQuery Ajax，我们可以轻松地进行异步 HTTP 请求，更新页面内容而无需重新加载页面。Fetch API 是现代浏览器提供的原生 API，用于替代传统的 XMLHttpRequest（XHR）。它基于 Promise，提供了更简洁和强大的接口来处理 HTTP 请求。Axios 是一个基于 Promise 的 HTTP 客户端，可以运行在浏览器和 Node.js 中。
Mali_Texture_Compression_Tool_v4_Windows_x64.zip
08-30
Mali_Texture_Compression_Tool_v4_Windows_x64.zip
高分项目-卡卡汽车 获取用户 设备信息小程序源码（优秀毕业设计源码）.zip
08-30
1. 精选系统小程序代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：java，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
基于Java的图书馆管理系统代码.rar
08-30
一键三连加关注私信up获取源码无偿分享群，以下为福利链接：https://pan.baidu.com/s/1niFL_7h0KhdJSW7r0XdtDw?pwd=1234 提取码：1234 基于springboot的XXXX管理系统，可以用于计算机专业毕设和课设使用 开发语言：Java 开发软件：eclipse/myeclipse/idea 框架：ssm JDK版本：JDK1.8 服务器：tomcat7 数据库：mysql 5.7（一定要5.7版本） 数据库工具：Navicat11 Maven包：Maven3.3.9 浏览器：谷歌浏览器 管理员账号：admin 管理员密码：admin 配置环境安装包： Java配置环境链接：https://cloud.189.cn/t/baeQZrAjEvyy （访问码：pfd5） 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：localhost:8080/项目名称/front/dist/inde
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值