33)django-原生ajax,伪ajax
一:概述
对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上。
1、传统的Web应用
一个简单操作需要重新加载全局数据
2、AJAX
AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案。
- 异步的JavaScript:
使用 【JavaScript语言】 以及 相关【浏览器提供类库】 的功能向服务端发送请求,当服务端处理完请求之后,【自动执行某个JavaScript的回调函数】。
PS:以上请求和响应的整个过程是【偷偷】进行的,页面上无任何感知。- XML
XML是一种标记语言,是Ajax在和后台交互时传输数据的格式之一利用AJAX可以做:
1、注册时,输入用户名自动检测用户是否已经存在。
2、登陆时,提示用户名密码错误
3、删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
二:原生Ajax
ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。
1、XmlHttpRequest对象介绍
XmlHttpRequest对象的主要方法:
a. void open(String method,String url,Boolen async)
用于创建请求 参数:
method: 请求方式(字符串类型),如:POST、GET、DELETE...
url: 要请求的地址(字符串类型)
async: 是否异步(布尔类型) b. void send(String body)
用于发送请求 参数:
body: 要发送的数据(字符串类型) c. void setRequestHeader(String header,String value)
用于设置请求头 参数:
header: 请求头的key(字符串类型)
vlaue: 请求头的value(字符串类型) d. String getAllResponseHeaders()
获取所有响应头 返回值:
响应头数据(字符串类型) e. String getResponseHeader(String header)
获取响应头中指定header的值 参数:
header: 响应头的key(字符串类型) 返回值:
响应头中指定的header对应的值 f. void abort() 终止请求
XmlHttpRequest对象的主要属性:
a. Number readyState
状态值(整数) 详细:
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据; b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数(回调函数) c. String responseText
服务器返回的数据(字符串类型) d. XmlDocument responseXML
服务器返回的数据(Xml对象) e. Number states
状态码(整数),如:200、404... f. String statesText
状态文本(字符串),如:OK、NotFound...
2、跨浏览器支持
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <h1>XMLHttpRequest - Ajax请求</h1>
<input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
<input type="button" onclick="XmlPostRequest();" value="Post发送请求" /> <script src="/statics/jquery-1.12.4.js"></script>
<script type="text/javascript"> function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}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');
// 发送请求
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();
} </script> </body>
</html> 基于原生AJAX - Demo
三:伪ajax
由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
</head> <body> <div>
<p>请输入要加载的地址:<span id="currentTime"></span></p>
<p>
<input id="url" type="text" />
<input type="button" value="刷新" onclick="LoadPage();">
</p>
</div> <div>
<h3>加载页面位置:</h3>
<iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div> <script type="text/javascript"> window.onload= function(){
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime(); }; function LoadPage(){
var targetUrl = document.getElementById('url').value;
document.getElementById("iframePosition").src = targetUrl;
} </script> </body>
</html>
四:ajax
jQuery其实就是一个JavaScript的类库,其将复杂的功能做了上层封装,使得开发者可以在其基础上写更少的代码实现更多的功能。
- jQuery 不是生产者,而是大自然搬运工。
- jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject
注:2.+版本不再支持IE9以下的浏览器
jQuery Ajax 方法列表
jQuery.get(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
dataType: 返回内容格式,xml, json, script, text, html jQuery.post(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数
success: 载入成功时回调函数
dataType: 返回内容格式,xml, json, script, text, html jQuery.getJSON(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。 jQuery.getScript(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。 jQuery.ajax(...) 部分参数: url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒) beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局) accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式
使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数 如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数
$.ajax({
accepts: {
mycustomtype: 'application/x-some-custom-type'
}, // Expect a `mycustomtype` back from server
dataType: 'mycustomtype' // Instructions for how to deserialize a `mycustomtype`
converters: {
'text mycustomtype': function(result) {
// Do Stuff
return newresult;
}
},
}); jQuery Ajax 方法列表
五:时机
时机:
如果发送的是普通数据-->jQuery,XMLHttpRequest,iframe
不普通:上传文件
六:示例
1)原生ajax 提交数据,获取数据
2)伪ajax 提交数据,获取数据
##ajax
原生
jquery
伪ajax操作(iframe)
时机:
如果发送的是普通数据-->jQuery,XMLHttpRequest,iframe
不普通:上传文件 ##原生ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<input type="button" value="ajax" onclick="ajax1();">
<script>
//浏览器兼容
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr; }
function ajax1(){
var xhr=GetXHR();
xhr.open("POST","/ajax_json/",true);
//回调函数,当状态变化时触发
xhr.onreadystatechange=function(){
//4是表示所有数据接受完了
if (xhr.readyState==4){
//获取返回值
console.log(xhr.responseText) //返回的是字符串
//转对象
JSON.parse(xhr.responseText)
} }
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');//直接这样发后以是收不到,必须要设置发送的请求头
xhr.send("name=alex;password=123");//发送的数据只能是字符串 }
</script>
</body>
</html> def ajax_json(request):
ret={"status":False,"data":None}
if request.method=="GET": return HttpResponse(json.dumps(ret),status=200,reason="OK") #status返回状态码
elif request.method=="POST":
print(request.POST)
ret["status"]=True
return HttpResponse(json.dumps(ret)) ##伪请求<iframe>会发请求 <form action="/ajax_json/" method="post" target="ifm1">
<!-- 普通form会刷新,我们可以把请求给iframe,target在iframe之间建立关联,当提交的时候就会通过iframe把数据传递到后台-->
<iframe name="ifm1"></iframe>
<input type="text" name="username">
<input type="text" name="email">
<input type="submit" value="form提交">
</form>
<!-- 上面是会刷新,我们可以把请求给iframe-->
<script>
//浏览器兼容
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr; }
function ajax1(){
var xhr=GetXHR();
xhr.open("POST","/ajax_json/",true);
//回调函数,当状态变化时触发
xhr.onreadystatechange=function(){
//4是表示所有数据接受完了
if (xhr.readyState==4){
//获取返回值
console.log(xhr.responseText) //返回的是字符串
//转对象
JSON.parse(xhr.responseText)
} }
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.setRequestHeader("k1","v1")//直接这样发后以是收不到,必须要设置发送的请求头
xhr.send("name=alex;password=123");//发送的数据只能是字符串 }
</script> #数据放在iframe里面了。 #上面并没有获取到数据
#这需要把值获取出来。iframe里面值是服务器什么时候返回就会显示。这是一个onload事件。所以可能通过onload事件获取结果 <form action="/ajax_json/" method="post" target="ifm1">
<!-- 普通form会刷新,我们可以把请求给iframe,target在iframe之间建立关联,当提交的时候就会通过iframe把数据传递到后台-->
<iframe id="ifm1" name="ifm1"></iframe>
<input type="text" name="username">
<input type="text" name="email">
<input type="submit" onclick="submit_ok();" value="form提交">
<!-- 因为javascript是从上到下加载的,而js是放在下面的,所以第一次会出错。
可以通过onclick="submit_ok"动态给iframe绑定onload事件-->
</form>
<!-- 上面是会刷新,我们可以把请求给iframe-->
<script src="/static/jquery-1.12.4.js"></script>
<script>
//浏览器兼容
function GetXHR(){
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr; }
function ajax1(){
var xhr=GetXHR();
xhr.open("POST","/ajax_json/",true);
//回调函数,当状态变化时触发
xhr.onreadystatechange=function(){
//4是表示所有数据接受完了
if (xhr.readyState==4){
//获取返回值
console.log(xhr.responseText) //返回的是字符串
//转对象
JSON.parse(xhr.responseText)
} }
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.setRequestHeader("k1","v1")//直接这样发后以是收不到,必须要设置发送的请求头
xhr.send("name=alex;password=123");//发送的数据只能是字符串 }
function submit_ok(){
$("#ifm1").load(
function(){
//因为iframe里面有document,所以获取document(上下文)元素先用contents.
var content=$('#ifm1').contents().find('body').text();
console.log(content);
}
)} </script>
33)django-原生ajax,伪ajax的更多相关文章
- 前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式
DJANGO环境搭建: 目录文件: 关闭CSRF 添加目录文件路径 配置url 视图配置: index页面配置: 测试:(成功) 进入正题: ajax 通过GET提交数据至后台: <!DOCTY ...
- 框架----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 ...
- django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...
- 使用Ajax (put delete ) django原生CBV 出现csrf token解决办法
原因 django原生CBV中对于 Ajax put 或 delete 请求进行封装时,会把请求数据放在 request.body里, 所以获取不到csrf token 方式一: 关闭csrf 中间件 ...
- 原生ajax与伪ajax
原生ajax源码 function GetXHR(){ var xhr = null; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); #如果没有XML ...
- day 72 Django基础七之Ajax
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策略与 ...
- day 60 Django基础七之Ajax
Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 六 同源策 ...
- AJAX初识(原生JS版AJAX和Jquery版AJAX)
一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...
随机推荐
- vue 中 使用百度编辑器 UEditor
(单页应用,多编辑器也可行) 新建一个Ueditor.vue组件对象,该组件用来封装ueditor,用来进行复用. <template> <div> <!--下面通过传递 ...
- [译]Debug ASP.NET Core 2.0源代码
原文 首先你的VS必须为VS 2017 15.3或以上版本. 打开你的Startup类,在ConfigureServices方法上设置个断点,按F5 Debug应用. 在Call Stack(调用堆栈 ...
- python函数后面有多个括号怎么理解?
一般而言,函数后面只有一个括号.如果看见括号后还有一个括号,说明第一个函数返回了一个函数,如果后面还有括号,说明前面那个也返回了一个函数.以此类推. 比如fun()() def fun(): prin ...
- 通过Java构造参数列表
背景:我们在进行性能测试时,需要构造测试数据,即参数化文件,如下: 上面的文件内容,我们可以通过Java代码轻松实现,主要代码解释: All 代码(其实我也看不懂,但是会改就行啦) package f ...
- centos6.8安装python3.7无法import _ssl
转载https://www.jianshu.com/p/ace9be0b08ed 公司运维提供的服务器是centos6.8,打算在上面装python3.7,结果费尽周折,按照网上的步骤python3. ...
- Javascript入门(四)条件控制语句
一.条件控制语句 1. if <script type="text/javascript"> var num = 1 if( num == 3 ){ alert(&qu ...
- python(六)列表推导式、字典推导式、集合推导式
转载 https://www.cnblogs.com/tkqasn/p/5977653.html
- TensorFlow架构学习
0 - TensorFlow 基于数据流图,节点表示某种抽象计算,边表示节点之间联系的张量. Tensorflow结构灵活,能够支持各种网络模型,有良好的通用性和扩展性. 1 - 系统概述 Tenso ...
- Python print输出重定向到文件和屏幕,超简单
import sys import os class Logger(object): def __init__(self, filename="log.txt"): self.te ...
- CentOS 7 安装配置 MySQL
https://blog.imzhengfei.com/centos-7-an-zhuang-pei-zhi-mysql/ MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前 ...