介绍

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的更多相关文章

  1. python之路 目录

    目录 python python_基础总结1 python由来 字符编码 注释 pyc文件 python变量 导入模块 获取用户输入 流程控制if while python 基础2 编码转换 pych ...

  2. python 自动化之路 day 00 目录

    目录 初识Python Python基本数据类型 Python基础之函数 Python基础之杂货铺 模块 面向对象 网络编程 HTML CSS JavaScript DOM jQuery Web框架本 ...

  3. linux运维/自动化开发__目录

    服务器软件安装 nginx apache php mysql oracle tomcat memcached mongodb sqlserver 常用pc端工具安装使用 Xshell         ...

  4. 小记初试tornado与ajax，一些注意点

    一. 在 tornado模板中使用自定义方法 在tornado中可以使用两种方式,达到在模板中调用自定义方法的效果,第一种是使用UIMethod 和UIModule. 1.UIMethod使用方法示例 ...

  5. tornado框架之路三之ajax

    一.ajax 1.传统的Web应用 一个简单操作需要重新加载全局数据 2.AJAX AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是 ...

  6. tornado之文件上传的几种形式form,伪ajax(iframe)

    1直接form提交给后台处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. 第二百七十二节，Tornado框架-iframe标签框架伪造ajax

    Tornado框架-iframe标签框架伪造ajax html <!DOCTYPE html> <html> <head lang="en"> ...

  8. 使用Tornado实现Ajax请求

    Ajax,指的是网页异步刷新,一般的实现均为js代码向server发POST请求,然后将收到的结果返回在页面上.   这里我编写一个简单的页面,ajax.html <html> <h ...

  9. 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 ...

  10. AJAX 大全

    本章内容: 简介 伪 AJAX 原生 AJAX XmlHttpRequest 的属性.方法.跨浏览器支持 jQuery AJAX 常用方法 跨域 AJAX JsonP CORS 简单请求.复制请求.请 ...

随机推荐

  1. windows上编译zlib-1.2.8

    MSVC编译 使用VS(x86)命令行工具进入到zlib根目录,执行 nmake -f win32/Makefile.msc ,在根目录下生成:zlib.lib(静态库)  zdll.lib(动态库的 ...

  2. luogu 3084 单调队列+dp

    注意处理出两个数组: r[i] 能覆盖i点的区间的左端点最小值(覆盖左侧最远处) l[i] i不能覆盖的区间的左端点左端点最大值 在该区间内寻找用来更新f[i] 答案的 j 即 l[i]<= j ...

  3. python 实现简单卷积网络框架

    第一步定义卷积核类: class Filter(object): # 滤波器类 对卷积核进行初始化 def __init__(self,width,height,depth): # initializ ...

  4. PHP中的常用数组操作方法

    一.数组操作的基本函数 数组的键名和值array_values($arr);  获得数组的值array_keys($arr);  获得数组的键名array_flip($arr);  数组中的值与键名互 ...

  5. win10下maven的安装与配置

    下载apache-maven-3.5.3-bin.zip并解压: 环境配置: 系统环境:添加=>MAVEN_HOME 值为apache-maven-3.5.3的路径(D:\xxx\apache- ...

  6. pythonのsimple_tag

    当我们需要在页面种直接调用py文件中的某些方法时,我们就要用到simple_tag.具体步骤如下: 1.在某个app下创建templatetags文件夹,切记该名称是不可以改变的. 2.在该文件夹下创 ...

  7. unicode & utf-8

    简单来说: Unicode 是「字符集」 UTF-8 是「编码规则」 其中: 字符集:为每一个「字符」分配一个唯一的 ID(学名为码位 / 码点 / Code Point) 编码规则:将「码位」转换为 ...

  8. 【原创】大数据基础之Flink（1）简介、安装、使用

    Flink 1.7 官方:https://flink.apache.org/ 一 简介 Apache Flink is an open source platform for distributed ...

  9. [转载]解决在win10中webstrom无法使用命令行(Terminal)

    转载地址:https://qiaolevip.iteye.com/blog/2217688 原因:计算机从win7更新到win10,webstorm9命令框无法输入,以为是webstorm问题和win ...

  10. Windows Internals 笔记——进程的权限

    1.大多数用户都用一个管理员账户来登录Windows,在Vista之前,这样的登录会创建一个安全令牌.每当有代码试图使用一个受保护的安全资源时,操作系统就会出示这个令牌.从包括Windows资源管理器 ...