原生ajax源码

 function GetXHR(){

             var xhr = null;

             if(XMLHttpRequest){

                 xhr = new XMLHttpRequest();        #如果没有XMLHttpRequest对象就使用ie的ActiveXObject("Microsoft.XMLHTTP")对象

             }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'); #使用POST的方法是需要加一个请求头

             // 发送请求

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

         }

     jQuery的ajax提交在返回函数这里

     success：function(arg,a1,a2)这几个参数里面有一个就是XMLHtt

伪ajax操作源码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!--<input type="text" id="url"/>

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

 <iframe id="iframe" src="https://www.baidu.com"> </iframe>-->

 {#伪ajax提交#}

 <input type="text">

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

     <iframe id="ifml" name="iframe1" onload="iframeload();"></iframe>

     {% csrf_token %}

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

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

     <input type="submit" value="form提交" onclick="sunmit()"/>

 </form>

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

 <script>

    /* function iframerequest(){

     var url=$('#url').val();

     $('#iframe').attr('src',url)*/

    /* function iframeload(){

         console.log('233333')

     }*/

     function sunmit(){

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

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

             var obj = JSON.parse(text);

             console.log(obj)

         })

     }

 </script>

 </body>

 </html>
 def ajax(request):

     print request.POST

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

     import json

     return  render(request,'ajax.html')

 def ajax_json(request):

     print request.POST

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

     import json

     return  HttpResponse(json.dumps(ret))

记录笔记

参考博客：

		http://www.cnblogs.com/wupeiqi/articles/5703697.html

	原生

	function GetXHR(){

            var xhr = null;

            if(XMLHttpRequest){

                xhr = new XMLHttpRequest();        #如果没有XMLHttpRequest对象就使用ie的ActiveXObject("Microsoft.XMLHTTP")对象

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

                }

            };

            // 指定连接方式和地址----文件方式  是否异步 true

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

            // 设置请求头

            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); #使用POST的方法是需要加一个请求头

            // 发送请求

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

        }

	jQuery的ajax提交在返回函数这里

	success：function(arg,a1,a2)这几个参数里面有一个就是XMLHttpRequest，可以在这个对象里面取到所有想取的东西

	伪Ajax操作

	<iframe></iframe>标签

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

    <iframe id="ifml" name="iframe1" onload="iframeload();"></iframe>

    {% csrf_token %}

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

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

    <input type="submit" value="form提交" onclick="sunmit()"/>

</form>

	    function sunmit(){

        $('#ifml').load(function () {                    #给iframe的onload绑定事件，当执行onload的时候获取后台返回的数据，然后进行相关的操作

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

            var obj = JSON.parse(text);

            console.log(obj)

        })

	时机：

		如果发送的是【普通数据】 -> jQuery，XMLHttpRequest，iframe

　　

原生ajax与伪ajax的更多相关文章

  1. 框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）

    一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

  2. 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)

    自动发送  ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...

  3. ajax之---“伪”ajax

    views.py def ajax1(request): ret={'status':'true','message':'successful'} return HttpResponse(json.d ...

  4. 33)django-原生ajax,伪ajax

    一:概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...

  5. 前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式

    DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...

  6. 原生Ajax 和Jq Ajax

    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...

  7. 分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

    实现网页版的在线聊天室的方法有很多,在没有来到HTML5之前,常见的有:定时轮询.长连接+长轮询.基于第三方插件(如FLASH的Socket),而如果是HTML5,则比较简单,可以直接使用WebSoc ...

  8. 一个伪ajax图片上传代码的例子

    一个伪ajax图片上传实现代码. 复制代码代码如下: <?php  if($_FILES){  ?>  <script>  window.parent.ajaxUploadPi ...

  9. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

随机推荐

  1. 批量下载文件asp.net

    一.实现步骤 在用户操作界面,由用户选择需要下载的文件,系统根据所选文件,在服务器上创建用于存储所选文件的临时文件夹,将所选文件拷贝至临时文件夹.然后调用 RAR程序,对临时文件夹进行压缩,然后输出到 ...

  2. 2019 Multi-University Training Contest 3 T7 Find the answer

    Find the answer Time Limit: 4000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...

  3. 页面禁止刷新处理Js实现

    document.onkeydown = function(e) { e = window.event || e; var k = e.keyCode; //屏蔽ctrl+R,F5键,ctrl+F5键 ...

  4. 【转载】Save terminal output to a file

    To write the output of a command to a file, there are basically 10 commonly used ways. Overview: Ple ...

  5. centos网卡配置NM_CONTROLLED=”yes” 慎用

    今天有1台服务器修改了 /etc/sysconfig/network-scripts/ifcfg-eth0 配置文件中的一个参数: NM_CONTROLLED=“yes” 修改成 NM_CONTROL ...

  6. Java 实现日期 Date 的赋值

    关键的语句也就三句话: (1) SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd"); (2) Date ...

  7. Jmeter 设置连接oracle数据库

    一.添加需要数据库驱动jar包 方式1:直接将jar包复制到jmeter的lib目录,或lib/ext目录:(亲测两个目录都可以使用) 方式2:使用jmeter的Test Plan引入相应的jar包: ...

  8. 用例a失败，跳过测试用例b和c并标记失败xfail

    前言 当用例a失败的时候,如果用例b和用例c都是依赖于第一个用例的结果,那可以直接跳过用例b和c的测试,直接给他标记失败xfail用到的场景,登录是第一个用例,登录之后的操作b是第二个用例,登录之后操 ...

  9. Flink整体执行流程

    以Flink源码中自带的WordCount为例,执行的入口从用户程序的execute()函数入手,execute()的源码如下: public JobExecutionResult execute(S ...

  10. 正则表达式——Unicode

    第 7 章 Unicode 7.1 关于编码   通常,英文编码较为统一,都采用ASCII编码或可以兼容ASCII编码(即编码表的前127位与ASCII编码一直,常见的各种编码,包括Unicode编码 ...