Tornado-Ajax
介绍
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX是在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页.
AJAX 的要点是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
以下在login.html和jquerylogin.html中分别用原生javascript和jquery实现了基本的Ajax请求。
其实用jquery实现Ajax不仅简便,其内部也帮我们处理好了兼容性问题(IE6没有XMLHttpRequest这个对象,需要用active控件来写)
主要方法
open(String method, String url, Boolen async)
用于创建请求
method:请求方式,如POST, GET, DELETE
url:要请求的地址
async:是否异步
send(String body)
用于发送请求
body:要发送的数据
setRequestHeader(String header, String value)
用于设置请求头
header:请求头的key
value:请求头的value
getResponseHeader(String header)
用于获得响应头(根据键header)
getAllReponseHeader()
abort()
主要属性
Number(int) readyState
0-未初始化,尚未调用open()
1-启动,调用了open(),未调用send()
2-已调用send(),未接收到响应
3-接收,已接受到部分相应
4-已接收全部响应
Function onreadystatechange
当readystate的值改变时,自动执行对应的函数(回调函数)
也就是每次改变都会调用该属性对应的函数
String responseText
服务器返回的数据
XmlDocument responseXML
服务器返回的数据
Number states
状态码,如202,404,500
String statesText
状态文本,如OK、NotFound
文件结构
Python代码
import tornado.ioloop
import tornado.web
import json class LoginHandler(tornado.web.RequestHandler):
def get(self):
self.render('login.html') def post(self):
dic = {"status": True, "message": ""}
usn = self.get_argument("username")
pwd = self.get_argument("password")
if usn == 'abc' and pwd == '':
pass
else:
dic["status"] = False
dic["message"] = "用户名或密码错误"
self.write(json.dumps(dic)) class JqueryLoginHandler(tornado.web.RequestHandler):
def get(self):
self.render('jquerylogin.html') def post(self):
dic = {"status": True, "message": "登陆成功"}
usn = self.get_argument("username")
pwd = self.get_argument("password")
if usn == 'abc' and pwd == '':
pass
else:
dic["status"] = False
dic["message"] = "用户名或密码错误"
self.write(json.dumps(dic)) settings = {
"template_path": "views", # 配置html文件路径
"static_path": "static", # 配置静态文件路径
} # 路由映射
application = tornado.web.Application([
(r"/login", LoginHandler),
(r"/jquerylogin", JqueryLoginHandler),
], **settings) # 启动
if __name__ == "__main__":
application.listen(8888)
tornado.ioloop.IOLoop.instance().start()
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现Ajax</title>
</head>
<body>
<input type="text" id="usn" name="username"/>
<input type="text" id="pwd" name="password"/>
<input type="checkbox" id="checked" name="auto" value="1" >7天免登陆
<input type="button" value="登陆" onclick="SubmitForm();"/>
<script>
xhr = null;
function SubmitForm(){
xhr = new XMLHttpRequest();
xhr.open("POST", "/login", true);
xhr.onreadystatechange = func;
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
xhr.send("username=" + document.getElementById("usn").value + ";password=" + document.getElementById("pwd").value);
}
function func(){
if(xhr.readyState == 4){
var data = xhr.responseText;
var ret_dic = JSON.parse(data);
<!--这里只是为了展示status属性的用法,所以加上了多余的判断-->
if(ret_dic.status){
alert(ret_dic.message);
}else{
alert(ret_dic.message);
}
}
}
</script>
</body>
</html>
jquerylogin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery实现Ajax</title>
</head>
<body>
<input type="text" id="usn" name="username"/>
<input type="text" id="pwd" name="password"/>
<input type="checkbox" id="checked" name="auto" value="1" >7天免登陆
<input type="button" value="登陆" onclick="SubmitForm();"/>
<script src="{{ static_url('js/jquery-3.2.1.min.js') }}"></script>
<script>
function SubmitForm(){
$.post('/jquerylogin', {'username':$('#usn').val(),'password':$('#pwd').val()}, function (callback){
var ret_dic = JSON.parse(callback);
<!--这里只是为了展示status属性的用法,所以加上了多余的判断-->
if(ret_dic.status){
alert(ret_dic.message);
}else{
alert(ret_dic.message);
}
})
} </script>
</body>
</html>
补充内容
setRequestHeader方法解析
通常在HTTP协议里,客户端像服务器取得某个网页的时候,必须发送一个HTTP协议的头文件,
告诉服务器客户端要下载什么信息以及相关的参数,如:
GET /bb.asp?www=1234 HTTP/1.1
Accept: */*
Accept-Language: zh-cn
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Host: www.e4j.cn:89
Connection: Keep-Alive
Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII
而 XMLHTTP 就是通过HTTP协议取得网站上的文件数据的,所以也要发送HTTP头给服务器。
但是 XMLHTTP 默认的情况下有些参数可能没有说明在HTTP头里,这是当我们需要修改或添加这些参数时就用到了setRequestHeader 方法
就比如如果上面这段HTTP头文件内容是 XMLHTTP 提交默认的情况,当使用 setRequestHeader 方法后就这样,如:
XMLObject.setRequestHeader ("CONTENT-TYPE", "application/x-www-form-urlencoded" )
XMLObject.setRequestHeader( "Connection", "close" )
这时HTTP头信息就应该是这样了:
GET /bb.asp?www=1234 HTTP/1.1
Accept: */*
Accept-Language: zh-cn
UA-CPU: x86
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
CONTENT-TYPE:application/x-www-form-urlencoded
Host: www.e4j.cn:89
Connection: close
Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII
setRequestHeader方法只是XMLHTTP为添加或修改HTTP头提供的一个接口方法.至于里面的值则是HTTP协议的含义,当然也可以发自己的东西进去,即使IIS不能识别你的信息也不会报错.
CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式是URL编码,即除了标准字符外,每字节以双字节16进制前加个“%”表示
JavaScript中的JSON和字典
客户端和服务端之间传输的只能是字符串。在python代码中,创建了一个字典用以保存登陆状态信息,要将该字典传输到服务端,就必须先通过json模块的dumps方法进行序列化处理,再交给服务端。
服务端接收后,通过XMLHttpRequest对象的reponseText获取该json文本,再通过JSON对象的parse方法解析为javascript的字典,然后才可以处理
javascript中的字典示例
在这里,似乎字典这一词语的用法不太准确,因为javascript不像python中有一种类型叫做字典,而是说可以构造一种有键值对关系的数组。字典在这里变成了一个概括特征的名词,而非实际存在于js的类型。
var dict = new Array(); //其类型是Array
dict["name"] = 'yeff';
dict["age"] = '23'; alert(dict["name"]); //可以通过类似python的形式取出键位值
alert(dict.name); //也可以用类似属性的形式取值 var array = ["q", "w", "e"] //数组,其key是0,1,2,类似python中的列表 var dict3 = {"name":"yeff", "age":"23"} //这种字典的类型就不是Array了,而是JSON对象
Tornado-Ajax的更多相关文章
- python之路 目录
目录 python python_基础总结1 python由来 字符编码 注释 pyc文件 python变量 导入模块 获取用户输入 流程控制if while python 基础2 编码转换 pych ...
- python 自动化之路 day 00 目录
目录 初识Python Python基本数据类型 Python基础之函数 Python基础之杂货铺 模块 面向对象 网络编程 HTML CSS JavaScript DOM jQuery Web框架本 ...
- linux运维/自动化开发__目录
服务器软件安装 nginx apache php mysql oracle tomcat memcached mongodb sqlserver 常用pc端工具安装使用 Xshell ...
- 小记初试tornado与ajax,一些注意点
一. 在 tornado模板中使用自定义方法 在tornado中可以使用两种方式,达到在模板中调用自定义方法的效果,第一种是使用UIMethod 和UIModule. 1.UIMethod使用方法示例 ...
- tornado框架之路三之ajax
一.ajax 1.传统的Web应用 一个简单操作需要重新加载全局数据 2.AJAX AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是 ...
- tornado之文件上传的几种形式form,伪ajax(iframe)
1直接form提交给后台处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 第二百七十二节,Tornado框架-iframe标签框架伪造ajax
Tornado框架-iframe标签框架伪造ajax html <!DOCTYPE html> <html> <head lang="en"> ...
- 使用Tornado实现Ajax请求
Ajax,指的是网页异步刷新,一般的实现均为js代码向server发POST请求,然后将收到的结果返回在页面上. 这里我编写一个简单的页面,ajax.html <html> <h ...
- tornado接收ajax的post请求报错WARNING:tornado.access:405 OPTIONS /add
后端报错信息 WARNING:tornado.access:405 OPTIONS /add (::1) 1.00m 前端报错信息 2xhr.js?ec6c:172 OPTIONS http://lo ...
- AJAX 大全
本章内容: 简介 伪 AJAX 原生 AJAX XmlHttpRequest 的属性.方法.跨浏览器支持 jQuery AJAX 常用方法 跨域 AJAX JsonP CORS 简单请求.复制请求.请 ...
随机推荐
- Entity Framework入门教程(9)---离线场景附加实体图集到上下文
附加离线实体图集到上下文 这节主要内容是通过不同的方法将离线实体附加到上下文中. 在离线场景中,保存一个实体要略微困难一些.当我们保存一个离线的实体图集或一个单独的离线实体时,我们需要做两件事.首先, ...
- sprin源码解析之属性编辑器propertyEditor
目录 异常信息 造成此异常的原因 bean 配置文件 调用代码 特别说明: 异常解决 注册springt自带的属性编辑器 CustomDateEditor 控制台输出 属性编辑器是何时并如何被注册到s ...
- requests中自定义adapter
# encoding:utf-8 import sslfrom requests import sessionsfrom requests import Requestfrom requests.ad ...
- PHP中ajax返回数据类型为JSON数据的处理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue.js 技术揭秘(学习) vue流程
new Vue() _init() mergeOptions $watch --> new Watch vm._render 生成VNode create diff patch vm._upda ...
- C# - 设计模式 - 策略模式
策略模式 问题场景 多个类型都有一些共同的属性和方法,可以称这些成员为行为,为了避免重复在多个类型中编码相同部分的行为,应考虑将这些行为定义在抽象类(超类)中,利用继承时多个类型可以共享这些行为.比如 ...
- java读写分离的实现
1. 背景 我们一般应用对数据库而言都是“读多写少”,也就说对数据库读取数据的压力比较大,有一个思路就是说采用数据库集群的方案, 其中一个是主库,负责写入数据,我们称之为:写库: 其它都是从库,负责 ...
- k64 datasheet学习笔记26--Oscillator (OSC)
1.前言 OSC模块是一个晶体振荡器. 该模块使用晶体或谐振器与外部连接,为MCU产生一个参考时钟. 主要为下图红色框住的部分 2.特性和模式 Supports 32 kHz crystals (Lo ...
- POST 请求中 multipart/form-data、 application/x-www-form-urlencoded 的区别
以 Postman 为工具来看一下这两个编码类型的数据格式,假设我们需要传输的数据为 { "name": "test", "age": 18 ...
- Python-Django 模型层-单表查询
单表操作 -增加,删,改:两种方式:queryset对象的方法,book对象的方法 -改:需要用save() -get()方法:查询的数据有且只有一条,如果多,少,都抛异常 单表查询 -<1&g ...