7.Ajax

时间：2021-12-06 00:58:17

优先级

如果发送的是【普通数据】

  • jQuery
  • XMLHttpRequest
  • iframe

如果发送的是【文件】

  • iframe
  • jQuery(FormData)
  • XMLHttpRequest(FormData)

原生Ajax

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

1、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()

    终止请求

主要方法

主要方法

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...

主要属性

主要属性

2.用原生Ajax做个请求

ajax.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="text"/>

    <input type="button" value="Ajax1" onclick="Ajax1();" />

    <script>

        function Ajax1(){

            var xhr = new XMLHttpRequest();

            xhr.open('POST', '/ajax_json/',true);

            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4){

                    // 接收完毕

                    var obj = JSON.parse(xhr.responseText);

                    console.log(obj);

                }

            };

            xhr.setRequestHeader('k1','v1');

            // post请求必须加下面这句请求头 不然后台数据拿不到

            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');

            xhr.send("name=root;pwd=123");

        }

    </script>

</body>

</html>

views.py

def ajax(request):

    return render(request,'ajax.html')

def ajax_json(request):

    print(request.POST)

    ret = {'code':True,'data':None}

    import json

    return HttpResponse(json.dumps(ret))

3.跨浏览器支持

XmlHttpRequest

  • IE7+, Firefox, Chrome, Opera, etc.

ActiveXObject("Microsoft.XMLHTTP")

  • IE6, IE5
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <h1>XMLHttpRequest - Ajax请求</h1>

    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />

    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

    <script src="/statics/jquery-1.12.4.js"></script>

    <script type="text/javascript">

        function GetXHR(){

            var xhr = null;

            if(XMLHttpRequest){

                xhr = new XMLHttpRequest();

            }else{

                xhr = new ActiveXObject("Microsoft.XMLHTTP");

            }

            return xhr;

        }

        function XhrPostRequest(){

            var xhr = GetXHR();

            // 定义回调函数

            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4){

                    // 已经接收到全部响应数据，执行以下操作

                    var data = xhr.responseText;

                    console.log(data);

                }

            };

            // 指定连接方式和地址----文件方式

            xhr.open('POST', "/test/", true);

            // 设置请求头

            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');

            // 发送请求

            xhr.send('n1=1;n2=2;');

        }

        function XhrGetRequest(){

            var xhr = GetXHR();

            // 定义回调函数

            xhr.onreadystatechange = function(){

                if(xhr.readyState == 4){

                    // 已经接收到全部响应数据，执行以下操作

                    var data = xhr.responseText;

                    console.log(data);

                }

            };

            // 指定连接方式和地址----文件方式

            xhr.open('get', "/test/", true);

            // 发送请求

            xhr.send();

        }

    </script>

</body>

</html>

伪Ajax

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

views.py

def ajax(request):

    return render(request,'ajax.html')

def ajax_json(request):

    print(request.POST)

    ret = {'code':True,'data':None}

    import json

    return HttpResponse(json.dumps(ret))

1.Form表单提交到iframe中，页面不刷新

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="text"/>

    <input type="button" value="Ajax1" onclick="Ajax1();" />

    <form action="/ajax_json/" method="POST" target="ifm1"> <!-- target跟iframe进行关联 -->

        <iframe id="ifm1" name="ifm1" ></iframe>

        <input type="text" name="username" />

        <input type="text" name="email" />

        <input type="submit" value="Form提交"/>

    </form>

</body>

</html>

2.Ajax提交到iframe中，页面不刷新

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="text"/>

    <input type="button" value="Ajax1" onclick="Ajax1();" />

    <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();

            $('#ifm').attr('src',url);

        }

    </script>

</body>

</html>

3.Form表单提交到iframe中,并拿到iframe中的数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <input type="text"/>

    <input type="button" value="Ajax1" onclick="Ajax1();" />

    <form action="/ajax_json/" method="POST" target="ifm1">

        <iframe id="ifm1" name="ifm1" ></iframe>

        <input type="text" name="username" />

        <input type="text" name="email" />

        <input type="submit" onclick="sumitForm();" value="Form提交"/>

    </form>

    <script type="text/javascript" src="/static/jquery-1.12.4.js"></script>

    <script>

        function sumitForm(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                console.log(obj)

            })

        }

    </script>

</body>

</html>

文件上传的三种方式

原生Ajax、Ajax、伪Ajax进行上传文件

views.py

from django.shortcuts import render,HttpResponse

def upload(request):

    return render(request,'upload.html')

def upload_file(request):

    username = request.POST.get(('username'))

    fafafa = request.FILES.get('fafafa')        #获取文件

    with open(fafafa.name,'wb') as f:

        for item in fafafa.chunks():

            f.write(item)

    print(username,fafafa)

    ret = {'code': True, 'data': request.POST.get('username')}

    import json

    return HttpResponse(json.dumps(ret))

1.原生Ajax（XmlHttpRequest）上传文件+定制好看的上传按钮：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .upload{

            display: inline-block;padding: 10px;

            background-color: brown;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 90;

        }

        .file{

            width: 100px;height: 50px;opacity: 0;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 100;

        }

    </style>

</head>

<body>

    <div style="position: relative;width: 100px;height: 50px;">

        <input class="file" type="file" id="fafafa" name="afafaf" />

        <a class="upload">上传</a>

    </div>

    <input type="button" value="提交XHR" onclick="xhrSubmit();" />

    <script>

        function xhrSubmit(){

            // $('#fafafa')[0]

            var file_obj = document.getElementById('fafafa').files[0];  //获取文件对象

            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){

                    // 接收完毕

                    var obj = JSON.parse(xhr.responseText);

                    console.log(obj);

                }

            };

            xhr.send(fd);

        }

    </script>

</body>

</html>

2.JQuery进行文件的上传：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .upload{

            display: inline-block;padding: 10px;

            background-color: brown;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 90;

        }

        .file{

            width: 100px;height: 50px;opacity: 0;

            position: absolute;

            top: 0;

            bottom: 0;

            right: 0;

            left: 0;

            z-index: 100;

        }

    </style>

</head>

<body>

    <div style="position: relative;width: 100px;height: 50px;">

        <input class="file" type="file" id="fafafa" name="afafaf" />

        <a class="upload">上传</a>

    </div>

{#    <input type="button" value="提交XHR" onclick="xhrSubmit();" />#}

    <input type="button" value="提交jQuery" onclick="jqSubmit();" />

    <div id="preview"></div>

    <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);

// Object {readyState: 4, responseText: "{"data": "root", "code": true}", status: 200, statusText: "OK"}

                }

            })

        }

    </script>

</body>

</html>

上面两种方式都用到FormData()，但是如果是IE浏览器的话是不支持FormData()，所以就得用到下面这种方式

3.Iframe进行文件的上传：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>

        <input type="file" name="fafafa"  />

        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>

    </form>

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        function iframeSubmit(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                console.log(obj)

            })

        }

    </script>

</body>

</html>

上传文件时预览

1.预览

views.py

def upload(request):

    return render(request,'upload.html')

def upload_file(request):

    username = request.POST.get(('username'))

    fafafa = request.FILES.get('fafafa')        #获取文件

    import os

    img_path = os.path.join('static/imgs/',fafafa.name)     #static下创建imgs目录

    with open(img_path,'wb') as f:

        for item in fafafa.chunks():

            f.write(item)

    print(username,fafafa)

    ret = {'code': True, 'data': img_path}

    import json

    return HttpResponse(json.dumps(ret))

upload.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>

        <input type="file" name="fafafa"  />

        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>

    </form>

    <div id="preview"></div>

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        function iframeSubmit(){

            $('#ifm1').load(function(){

                var text = $('#ifm1').contents().find('body').text();

                var obj = JSON.parse(text);

                console.log(obj)

                 $('#preview').empty();

                var imgTag = document.createElement('img');

                imgTag.src = "/" + obj.data;

                $('#preview').append(imgTag);

            })

        }

    </script>

</body>

</html>

2.选择文件后直接上传

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>

        <input type="file" name="fafafa" onchange="changeUpalod();" />    //onchange 选中文件时触发

{#        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>#}

    </form>

    <div id="preview"></div>

    <script src="/static/jquery-1.12.4.js"></script>

    <script>

        function changeUpalod(){

            $('#ifm1').load(function(){　　　　　　　　　　　　　　　　//load  绑定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);

            });

            $('#form1').submit();

        }

    </script>

</body>

</html>

7.Ajax的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  7. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  8. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  9. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

  10. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

随机推荐

  1. 体验Rabbitmq强大的【优先级队列】之轻松面对现实业务场景

    说到队列的话,大家一定不会陌生,但是扯到优先级队列的话,还是有一部分同学是不清楚的,可能是不知道怎么去实现吧,其实呢,,,这东西已 经烂大街了...很简单,用“堆”去实现的,在我们系统中有一个订单催付 ...

  2. s3c2440液晶屏驱动 （内核自带） linux-4&period;1&period;24

    自带有一部分驱动的配置信息,只要修改这部分就能支援 不同的液晶屏 - /arch/arm/mach-s3c24xx/mach-smdk2440.c 另一部分在 /drivers/video/fbdev ...

  3. python 定义实例方法

    定义实例方法 一个实例的私有属性就是以__开头的属性,无法被外部访问,那这些属性定义有什么用? 虽然私有属性无法从外部访问,但是,从类的内部是可以访问的.除了可以定义实例的属性外,还可以定义实例的方法 ...

  4. canvas 画六边形

    <section class="m1-c"> <div class="m1-t clearfix"> <ul> <li ...

  5. 【网站开发】在新浪SAE上搭建一个博客

    概述 在新浪SAE上搭建一个博客 1.访问新浪SAE站点 http://sae.sina.com.cn/ 2.注册新浪SAE 3.选择应用仓库 4.选择WordPress 5.安装WordPress ...

  6. Struts中的OGNL和EL表达式笔记

    Struts中的OGNL和EL表达式笔记 OGNL(Object-Graph Navigation Language),可以方便的操作对象属性的表达式语言. 1.#符号的用途 一般有三种方式: 1.1 ...

  7. apache ab压力测试报错（apr&lowbar;socket&lowbar;recv&colon; Connection reset by peer &lpar;104&rpar;）

    apache ab压力测试报错(apr_socket_recv: Connection reset by peer (104))   今天用apache 自带的ab工具测试,当并发量达到1000多的时 ...

  8. STL容器用法速查表：list&comma;vector&comma;stack&comma;queue&comma;deque&comma;priority&lowbar;queue&comma;set&comma;map

      list vector deque stack queue priority_queue set [unordered_set] map [unordered_map] multimap [uno ...

  9. JAVA线程池简介

    一 简介 线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观.Jdk1.5之后加入了java.uti ...

  10. 11&lowbar;Python文件操作

    一.文件操作的基本流程 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众 ...

相关文章