后台代码：
class AjaxHanlder(tornado.web.RequestHandler): def get(self): print(self.get_argument('type',None)) if self.get_argument('type',None): self.write("get ok") else: self.render('ajax_test.html') def post(self, *args, **kwargs): self.write("post ok")
前端ajax:
为了兼容各个浏览器都有ajax方法
function GetXhr(){ var xhr=null; if(XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHTTP"); } return xhr; }
其中get请求一般都把数据放到url中，而不是send()中
function XhrGetRequest(){
var xhr=GetXhr();
//定义回调函数
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;
}
}
//指定连接方式和地址---文件方式
xhr.open('get',"/ajax?type=1&kk=2",true);
//发出请求
xhr.send(null);
}
只有post请求时，需要将数据放到send()中传递，并且需要设置请求头
function XhrPostRequest(){
var xhr=GetXhr();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
document.getElementsByClassName('reponse')[0].innerHTML=xhr.responseText;
}
}
xhr.open('post','/ajax',true);
//post需要设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");
//发送请求
xhr.send("type=1&kk=2");
}
使用案例：
<body>
<form method="post" action="login">
用户名：<input id="user" type="text" name="username"> 密码：<input id="pwd" type="password" name="password"> <input type="checkbox" id="auto" name="auto" value="1"/>七天免登录 <input type="button" onclick="SubmitForm();" value="登录"> <span class="err"></span> </form> </body> </html> <script> var xhr=null; function SubmitForm(){ var username=document.getElementById("user").value; var pwd=document.getElementById('pwd').value; var chkEle=document.getElementById('auto'); var chk=null; if(chkEle.checked==true) chk=1; else chk=0; xhr=new XMLHttpRequest(); /*参数 发送方式 发送地址 是否异步*/ //xhr.open('GET',"/login",true); xhr.open("POST","/login",true); //当readystate值改变时会自动去触发对应函数，先对这个值进行判断，在决定对应的函数 //0.未初始化，尚未调用open //1.启动，调用了open未调用send //2.发送，调用了send,未收到响应 //3.接收，已经接收到了部分响应消息 //4.完成，已经接收到所有的数据 xhr.onreadystatechange =func; //setRequestHeader(String header,String value)设置请求头 //getAllResponseHeaders()获取所有响应头 //getResponseHeader(String header)获取响应头中指定的header的值 //void abort()终止请求 //post发送数据需要设置请求头 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset-UTF-8') //用于发送数据 xhr.send('username='+username+';password='+pwd+';auto='+chk); //String responseText 服务器返回的数据字符串类型 //XmlDocument responseXML 服务器返回的数据（xml对象） //Number states 状态码 //String statesText 状态码对应文本 } function func(){ if(xhr.readyState == 4){ console.log(xhr.responseText); var data=xhr.responseText; var ret_dict = JSON.parse(data); if(ret_dict.status){ //登录成功 }else{ //登录失败 var ele=document.getElementsByClassName('err')[0]; ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>" } } } </script>
open(请求方式, URL, 是否异步)
send(请求体)
onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用
readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束
status：服务器响应的状态码，只有服务器响应结束时才有这个东东，200表示响应成功；
responseText：获取服务器的响应体
代码实例：
<div>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
<th>编辑</th>
</tr>
</thead>
<tbody>
<tr><td>4</td>
<td>李四</td>
<td>16</td>
<td>男</td>
<td>C++工程师</td>
<td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=4">编辑</a></td>
</tr>
<tr><td>5</td>
<td>fas</td>
<td>15</td>
<td>男</td>
<td>Python工程师</td>
<td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=5">编辑</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var xhr=null
var thr=null
function GetXhr(){
if(XMLHttpRequest){
var Xh = new XMLHttpRequest();
}else{
Xh = new ActiveXObject('Microsoft.XMLHTTP');
}
return Xh
}
function call_func(){
if(xhr.readyState == 4){
var data=xhr.responseText;
var ret_dict = JSON.parse(data);
if(ret_dict.status){
//登录成功
alert("删除成功")
thr.parentElement.parentElement.remove()
}
}
}
function XhrPostRequest(ths){
thr=ths
xhr=GetXhr();
xhr.onreadystatechange = call_func;
var id=thr.parentElement.parentElement.childNodes[0].textContent;
xhr.open('get','/del_student.html?nid='+id);
xhr.send();
}
</script>
关于更多信息，以及jquery中ajax使用可以参考
更多请看：原生ajax中get和post请求
更多请看：http://www.cnblogs.com/yuanchenqi/articles/5997456.html
>这里