原生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 ...
随机推荐
- 使用 XSLT 显示 XML
通过使用 XSLT,您可以向 XML 文档添加显示信息. 使用 XSLT 显示 XML XSLT 是首选的 XML 样式表语言. XSLT (eXtensible Stylesheet Languag ...
- Linux whatis命令失效 nothing appropriate
在虚拟机中安装Linux的时候,可能没有生成whatis的数据库,所以whatis的命令无法使用. 如果出现无法使用whatis命令失效,那就生成whatis数据库. 命令: /usr/sbin/ma ...
- [C++基础] 纯虚函数
整理摘自https://blog.csdn.net/ithomer/article/details/6031329 1. 申明格式 class CShape { public: ; }; 在普通的虚函 ...
- [CSP-S模拟测试]:maze（二分答案+最短路）
题目传送门(内部题88) 输入格式 第一行两个数$n,m$.第二行四个数$sx,sy,tx,ty$.分别表示起点所在行数.列数,终点所在行数.列数.接下来$n$行,每行$m$个数,描述迷宫.最后一行一 ...
- vscode Vue格式化HTML标签换行问题
解决方法:在设置里面直接贴上代码: "vetur.format.defaultFormatter.html": "js-beautify-html", &quo ...
- 第三周总结&实验报告一
第三周总结 在这周对Java进行了更深层次的学习,Java的学习也越来越难了,慢慢的加入了一些新的构造新的方法,还有许许多多简化代码的相关知识,我还是要认真的去吃透这些知识,自己也要慢慢的去研究一些题 ...
- LeetCode_509.斐波那契数
LeetCode-cn_509 509.斐波那契数 斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列.该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和.也就是: F(0) ...
- 常量const实践
这篇文章写的很好:https://www.cnblogs.com/zhangfeionline/p/5882790.html 自己是实践: 1. 定义时必须初始化值,不然如下错误: 2. 3. 使用:
- 初识Nginx及其LNMP搭建
Nginx介绍 nginx www服务软件 俄罗斯人开发 开源 性能很高 web产品 大小780k c语言开发 本身是一款静态www软件,不能解析php jsp .do 最大特点 静态小文件(1m), ...
- 阶段3 1.Mybatis_08.动态SQL_02.mybatis中动态sql语句-where标签的使用
这里的userSex是实体类里面的属性名,而不是数据库内的字段名称 一个老王改成性别女,为了区分一下 增加sex字段的查询 where标签 用上where和刚才的执行效果是一样的 where标签使我们 ...