原生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 ...
随机推荐
- LCA模板 ( 最近公共祖先 )
LCA 有几种经典的求取方法.这里只给出模板,至于原理我完全不懂. 1.RMQ转LCA.复杂度O(n+nlog2n+m) 大致就是 DFS求出欧拉序 => 对欧拉序做ST表 => LCA( ...
- UVa 1600 Patrol Robot (BFS最短路 && 略不一样的vis标记)
题意 : 机器人要从一个m * n 网格的左上角(1,1) 走到右下角(m, n).网格中的一些格子是空地(用0表示),其他格子是障碍(用1表示).机器人每次可以往4个方向走一格,但不能连续地穿越k( ...
- 【CF1252L】Road Construction（基环树，最大流）
题意:给定一张n点n边无重边自环的无向图,刚开始每条边都没有被选择,每条边上有一个颜色集合,必须从中选择一种 有K个工人,每个工人有颜色a[i],需要把工人分配到与其颜色相同的边上 问是否能有一种使得 ...
- TCP，UDP，HTTP
使用图表非常系统介绍了TCP和UDP的区别 https://blog.fundebug.com/2019/03/22/differences-of-tcp-and-udp/ 举了一个TCP/IP通讯的 ...
- VS Code报错Module 'xx' has no 'xx' member pylint(no-member)解决办法
pylint是vscode的python语法检查器,pylint是静态检查,在用第三方库的时候有些成员只有在运行代码的时候才会被建立,它就找不到成员,在设置(settings.json)里添加 &qu ...
- eclipse设置酷炫的代码颜色风格
eclipse安装默认的代码颜色风格是“白色背景”,颜色有些刺眼,于是想到手动去改eclipse的代码颜色,但改来改去还是很难达到我们的要求,甚至有时候将背景和某些代码的颜色改成相同,导致代码看不见. ...
- 不使用spring-boot-starter-parent进行依赖的版本管理
spring-boot-starter-parent 提供了Dependency Management 进行项目依赖的版本管理,默认的资源过滤和插件配置. 但是,当需要将其他项目作为parent 的时 ...
- js 扫码枪的输入
关于js 获取扫码枪的输入获取方式,之前在网上搜了好多,都是大同小异的,都是说扫码枪输入的时间间隔不会超过30毫秒.但事实上我拿了几台电脑测试的结果是,有的时间间隔甚至超过了100毫秒,所以用时间间隔 ...
- JS将页面中表格，导出到Excel中(IE中)
原文地址:http://blog.csdn.net/sinat_15114467/article/details/51098522 var idTmr; function getExplorer() ...
- 国内4G频段划分
国内4G频段划分 2015年 4G网络建设如火如荼地进行,换手机大家几乎都买的4G手机,那么看到如下参数怎么知道手机所支持的网络呢? SIM 1:4G TDD-LTE:TD38/39/40/41: ...