介绍
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：请求头的valuegetResponseHeader(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，500String statesText ???状态文本，如OK、NotFound
文件结构
Python代码
import tornado.ioloopimport tornado.webimport jsonclass 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 == ‘123‘: ???????????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 == ‘123‘: ???????????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(); ?//其类型是Arraydict["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
原文地址：http://www.cnblogs.com/yifeixu/p/7966646.html