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 简单请求.复制请求.请 ...
随机推荐
- Sass学习第一天
Sass学习 网站学习地址: Sass中文网:https://www.sass.hk/docs/#t7-3 Airen的博客:https://www.w3cplus.com/preprocessor/ ...
- Python复习笔记(十一)TCP/IP协议
1. TCP/IP协议简介 帧头: mac地址, 网卡上的序列号 2. wireshark使用 分析一个数据是否发送, 是否是网络问题 ip.dst == 192.168.0.137 and udp ...
- SCI,EI,ISTP
SCI: Science Citation Index EI: The Engineering Index ISTP: Index to Scientific & Technic ...
- MySQL学习5 - 数据类型二.md
一 字符类型 二 枚举类型和集合类型 一 字符类型 #官网:https://dev.mysql.com/doc/refman/5.7/en/char.html #注意:char和varchar括号内的 ...
- poj100纪念
- Python学习笔记-Linux下安装Python
Linux系统CentOS 1.安装依赖组件 yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel s ...
- ospf的虚连接配置
作者:邓聪聪 配置OSPF虚连接 组网需求 在图1中,Area2没有与骨干区域直接相连.Area1被用作传输区域(Transit Area)来连接Area2和Area0.SwitchA.SwitchB ...
- TCP-IP详解笔记3
TCP-IP详解笔记3 地址解析协议 IP协议的设计目标是为跨越不同类型物理网络的分组交换提供互操作. 网络层软件使用的地址和底层网络硬件使用的地址之间进行转换. 对于TCP/IP网络,地址解析协议( ...
- 结构体重载运算符&srand&rand
先上代码,再按代码讲解 #include<stdio.h>#include<string.h>#include<stdlib.h>#include<time. ...
- thymeleaf的onclick标签传参异常
转自https://my.oschina.net/u/2312080/blog/2878183 异常 严重: Servlet.service() for servlet [DispatcherServ ...