原生ajax与伪ajax
原生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的更多相关文章
- 框架----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_ ...
- 手动(原生ajax)和自动发送ajax请求 伪ajax(Ifrname)
自动发送 ---> 依赖jQuery文件 实例-->GET请求: function AjaxSubmit() { $.ajax({ url:'/data', type:"GET ...
- ajax之---“伪”ajax
views.py def ajax1(request): ret={'status':'true','message':'successful'} return HttpResponse(json.d ...
- 33)django-原生ajax,伪ajax
一:概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作 ...
- 前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式
DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...
- 原生Ajax 和Jq Ajax
前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
- 分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室
实现网页版的在线聊天室的方法有很多,在没有来到HTML5之前,常见的有:定时轮询.长连接+长轮询.基于第三方插件(如FLASH的Socket),而如果是HTML5,则比较简单,可以直接使用WebSoc ...
- 一个伪ajax图片上传代码的例子
一个伪ajax图片上传实现代码. 复制代码代码如下: <?php if($_FILES){ ?> <script> window.parent.ajaxUploadPi ...
- 伪ajax上传文件
伪ajax上传文件 最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...
随机推荐
- 多module project修改module名称
1.mvn clean 2.project 去掉这个module 3.全局替换所有pom.xml文件的老module名为新module名 4.修改源代码文件夹目录名为新的module名 5.proje ...
- npm 安装与卸载模块
1. 只卸载模块 由于之前安装过,在 package.json 中的记录仍然存在 npm uninstall lodash 2. --save 参数使用 卸载模块的同时删除在 package.json ...
- 洛谷 P1505 BZOJ 2157 [国家集训队]旅游
bzoj题面 Time limit 10000 ms Memory limit 265216 kB OS Linux 吐槽 又浪费一个下午--区间乘-1之后,最大值和最小值更新有坑.新的最大值是原来最 ...
- Python黑科技 | Python中四种运行其他程序的方式
在Python中,可以方便地使用os模块来运行其他脚本或者程序,这样就可以在脚本中直接使用其他脚本或程序提供的功能,而不必再次编写实现该功能的代码.为了更好地控制运行的进程,可以使用win32proc ...
- 源码阅读-JLRoutes路由设置
最后更新: 2018-1-20 JLRoutes 是在 github 上 Star 比较多的一个, 在各大平台也有介绍, 一些知识可以参考到下面的连接查看. 本文仅仅作为我的思考以及对应的心得; 一. ...
- es入门--curl的使用
文档介绍: 首先要讲什么是文档,我们中大多是java程序员,java是面向对象的,那么在elasticsearch看来:对象和文档是等价的.只不过这个对象是可以被序列化成key-value形式的jso ...
- vue几种简单的传值方式
除了一下的几种方式外,可以参考 https://www.cnblogs.com/hpx2020/p/10936279.html 组件传值的方法: 一.父组件向子组件传递数据(props) 第1:父组件 ...
- sqli-labs(34)
0x01构造闭合 同样 发现 ’被注释掉了 试探了一波发现什么信息都不会返回 正确错误的页面都一样 之前我们的方法就是将过滤函数添加的 \ 给吃掉.而get型的方式我们是以url形式提交的,因此数据会 ...
- 二次封装axios，根据参数来实现多个请求多次拦截
1. 新建 axiosTool.js 文件,设置请求拦截和处理的逻辑 import Vue from 'vue' import axios from 'axios' //取消请求 let Cancel ...
- heap和stack区别
转载自博客:https://www.cnblogs.com/perfy/archive/2012/09/06/2672946.html 1.heap是堆 ,stack是栈 2.stack的空间由操作系 ...