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 简单请求.复制请求.请 ...
随机推荐
- Centos7安装vsftpd (FTP服务器)
Centos7安装vsftpd (FTP服务器) 原文链接:https://www.jianshu.com/p/9abad055fff6 TyiMan 关注 2016.02.06 21:19* 字数 ...
- 液晶流在齐次 Besov 空间中的正则性准则
在 [Zhang, Zujin. Regularity criteria for the three dimensional Ericksen–Leslie system in homogeneous ...
- [物理学与PDEs]第1章第8节 静电场和静磁场 8.3 静磁场
1. 静磁场: 由稳定电流形成的磁场. 2. 此时, Maxwell 方程组为 $$\beex \bea \Div{\bf D}&=\rho_f,\\ \rot {\bf E}&={\ ...
- springMVC入门思路整理
- Python3 字符串与hex之间的相互转换
在字符串转换上,python2和python3是不同的,在查看一些python2的脚本时候,总是遇到字符串与hex之间之间的转换出现问题,记录一下解决方法. 1. 在Python2.7.x上,hex字 ...
- Selective Search for Object Recognition(理解)
0 - 背景 在目标检测任务中,我们希望输入一副图像,输出目标所在的位置以及目标的类别.最常用的算法是滑动窗口方法,但滑动窗口其实相当于穷举图像中的所有子图像,其效率低且精度也受限.该论文提出一种新的 ...
- css基础二
1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...
- 将代码上传版本库gitee
首先在电脑中安装git,配置好环境变量. 在后台输入命令上传 上传账号的用户名git config --global user.name "" 上传账号的邮箱git config ...
- Windows 快捷键总结
一.日常用法 1.Win + R 运行命令窗,cmd等必备,令人进入注册表,也需要通过运行命令窗,如注册表示运行 Regedit 命令,组策略使用 gpedit.msc 命令等. 2.Win + E ...
- Qt 图像缩放显示
1. QImage Image; Image.load(":/images/f1.png"); QPixmap pixmap = QPixmap::fromImage(Image) ...