原生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. BeanPostProcessor和BeanFactoryPostProcessor的区别

    官方文档: 在Spring核心的1.8章节 使用BeanPostProcessor自定义Bean BeanPostProcessor 接口定义了您可以实现的回调方法,以提供您自己的(或覆盖容器的默认) ...

  2. 微信长按识别二维码，在 vue 项目中的实现

    微信长按识别二维码是 QQ 浏览器的内置功能,该功能的基础一定要使用 img 标签引入图片,其他方式的二维码无法识别. 在 vue 中使用 QrcodeVue 插件 demo1 在 template ...

  3. [BZOJ2870]最长道路tree：点分治

    算法一:点分治+线段树 分析 说是线段树,但是其实要写树状数组卡常. 代码 #include <bits/stdc++.h> #define rin(i,a,b) for(register ...

  4. sqli-labs(10)

    基于双引号的时间盲注 先来随便测试一下 发现 错不错都是返回的真确的结果 那么应该是被从定向了 我们可以输入 and sleep(5) %23 测试 加’发现立刻返回 加双引号发现报错了 过了5秒才返 ...

  5. [LeetCode]-010-Regular_Expression_Matching

    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...

  6. C语言第四次实验报告

    第四次实验报告 一·实验项目名称: 多球反弹 二·实验项目功能描述: (1)实现多个小球 (2)实现多个小球碰壁会反弹 (3)实现小球之间碰撞反弹 三· 项目模块结构介绍 #define High 4 ...

  7. 条形码（barcode）code128生成代码

    条形码(barcode)code128生成代码 很简单 多些这位兄弟https://bbs.csdn.net/topics/350125614 下面是我的DEMO 直接放到VS2005下面编译即可 # ...

  8. 你的第一个Quartz程序

    package org.quartz.examples.example1; import java.util.Date; import org.slf4j.Logger; import org.slf ...

  9. 2018 icpc 沈阳

    https://codeforces.com/gym/101955 J 签到 #include<iostream> #include<cstring> #include< ...

  10. 那些年我们经历的BT面试题

    初入职场面试的我到处碰壁,以下是我个人对几道面试题的小总结: 1.一列数字的规则如下:1,1,2,3,5,8,13,21, 34........ 求第30位数字是多少,用递规和非递归两种方法算法实现. ...