原生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+批量下载附件

    asp.net 下载文件几种方式 protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新的方 ...

  2. 【学习小记】Berlekamp-Massey算法

    Preface BM算法是用来求一个数列的最短线性递推式的. 形式化的,BM算法能够对于长度为n的有穷数列或者已知其满足线性递推的无穷数列\(a\),找到最短的长度为m的有穷数列\(c\),满足对于所 ...

  3. linux服务器在线测速

    cd /tmpwget https://raw.github.com/sivel/speedtest-cli/master/speedtest.py或者wget https://raw.githubu ...

  4. Burpsuiet爆破

    burpsuite中intruder标签内attack type四种类型的用法和区别 2016年07月24日 18:13:26 xss_01 阅读数:9802更多 个人分类: burpsuite网络安 ...

  5. vue 在移动端实现红包雨 （兼容性好）

    下面是代码:<template>    <div class="ser_home">        <ul class="red_packe ...

  6. Hybrid平台

    需求说明 离线包管理平台主要负责对需要接入Hybrid平台的应用进行管理,通过这个平台可以实现对应用的静态资源进行构建.发布.生成离线包,版本控制等,核心场景如下: 将需要做预加载的应用在平台上注册, ...

  7. VS2010护眼界面（护眼绿）

    工具-->选项 RGB(204.232.207) “选择菜单[工具][导入和导出设置], 在弹出的“导入和导出设置向导”对话框中选择“导入选定的环境设置”, 然后根据自己的实际情况选择“是,保存 ...

  8. 【IOS打包】ARCHIVE FAILED：Command CodeSign failed with a nonzero exit code

    [问题] [解决办法] 用xcode打开项目 command + k 重启电脑 参照:xcode打包报错command codesign failed with a nonzero exit code ...

  9. Apache web服务器（LAMP架构）

    1.apache介绍 1).世界上使用率最高的网站服务器,最高时可达70%:官方网站:apache.org 2).http 超文本协议 HTML 超文本标记语言 3).URL 统一资源定位符 http ...

  10. JMeter常用的4种参数化方式-操作解析

    目录结构 一.JMeter参数化简介 1.JMeter参数化的概念 2.JMeter参数化方式之使用场景对比 二.JMeter参数化的4种主要方式-操作演练 1.User Parameters(用户参 ...