原生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. 【bzoj3672&&uoj7】[Noi2014]购票

    *题目描述: 今年夏天,NOI在SZ市迎来了她30周岁的生日.来自全国 n 个城市的OIer们都会从各地出发,到SZ市参加这次盛会. 全国的城市构成了一棵以SZ市为根的有根树,每个城市与它的父亲用道路 ...

  2. 大哥带的Orchel数据库的注入

    0X01 先进行判断 a.jsp?username=SMITH and = 发现单引号闭合  我们尝试构造闭合  存在注入 a.jsp?username=SMITH'='1 正确 a.jsp?user ...

  3. GIT的工作原理和基本命令

    1.GIT的工作原理 工作区:我们写代码的地方. 暂存区:临时存储用的. 历史区:生成历史版本的地方. 提交流程:工作区->暂存区->历史区 图示: 2.GIT的全局配置 3.创建仓库完成 ...

  4. 第三周syh

    第三周作业   7-1 判断上三角矩阵 (15 分) 上三角矩阵指主对角线以下的元素都为0的矩阵:主对角线为从矩阵的左上角至右下角的连线. 本题要求编写程序,判断一个给定的方阵是否上三角矩阵. 输入格 ...

  5. Failed to find data source: kafka

    缺少包,在spark-submit 中指定 packages 如下: --packages org.apache.spark:spark-sql-kafka-0-10_2.11:2.1.0

  6. tensorflow学习——调试ctc的两个bug

    InvalidArgumentError (see above for traceback): Not enough time for target transition sequence (requ ...

  7. Maven中的dependency详解

    <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> & ...

  8. 各种sort排序总结

    冒泡排序 选择排序 插入排序

  9. [VBA]批量新建指定名称的工作表

    sub 批量新建指定名称的工作表() Dim i As Integer For i = 2 To 10    '根据实际情况修改i大小 Worksheets.Add after:=Worksheets ...

  10. Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView、TTreeViewItem

    Delphi XE2 之 FireMonkey 入门(44) - 控件基础: TTreeView.TTreeViewItem TScrollBox -> TCustomTreeView -> ...