后台代码:

  1. class AjaxHanlder(tornado.web.RequestHandler):
  2. def get(self):
  3. print(self.get_argument('type',None))
  4. if self.get_argument('type',None):
  5. self.write("get ok")
  6. else:
  7. self.render('ajax_test.html')
  8.  
  9. def post(self, *args, **kwargs):
  10. self.write("post ok")

前端ajax:

为了兼容各个浏览器都有ajax方法

  1. function GetXhr(){
  2. var xhr=null;
  3. if(XMLHttpRequest){
  4. xhr=new XMLHttpRequest();
  5. }else{
  6. xhr=new ActiveXObject("Microsoft.XMLHTTP");
  7. }
  8. return xhr;
  9. }

其中get请求一般都把数据放到url中,而不是send()中

  1. 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()中传递,并且需要设置请求头

  1. 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");
    }

使用案例:

  1. <body>
  2. <form method="post" action="login">
  3. 用户名:<input id="user" type="text" name="username">
  4. 密码:<input id="pwd" type="password" name="password">
  5. <input type="checkbox" id="auto" name="auto" value="1"/>七天免登录
  6. <input type="button" onclick="SubmitForm();" value="登录">
  7. <span class="err"></span>
  8. </form>
  9. </body>
  10. </html>
  11. <script>
  12. var xhr=null;
  13.  
  14. function SubmitForm(){
  15. var username=document.getElementById("user").value;
  16. var pwd=document.getElementById('pwd').value;
  17. var chkEle=document.getElementById('auto');
  18. var chk=null;
  19. if(chkEle.checked==true)
  20. chk=1;
  21. else
  22. chk=0;
  23.  
  24. xhr=new XMLHttpRequest();
  25. /*参数 发送方式 发送地址 是否异步*/
  26. //xhr.open('GET',"/login",true);
  27. xhr.open("POST","/login",true);
  28. //当readystate值改变时会自动去触发对应函数,先对这个值进行判断,在决定对应的函数
  29. //0.未初始化,尚未调用open
  30. //1.启动,调用了open未调用send
  31. //2.发送,调用了send,未收到响应
  32. //3.接收,已经接收到了部分响应消息
  33. //4.完成,已经接收到所有的数据
  34.  
  35. xhr.onreadystatechange =func;
  36. //setRequestHeader(String header,String value)设置请求头
  37. //getAllResponseHeaders()获取所有响应头
  38. //getResponseHeader(String header)获取响应头中指定的header的值
  39. //void abort()终止请求
  40.  
  41. //post发送数据需要设置请求头
  42. xhr.setRequestHeader('content-type','application/x-www-form-urlencoded; charset-UTF-8')
  43. //用于发送数据
  44. xhr.send('username='+username+';password='+pwd+';auto='+chk);
  45.  
  46. //String responseText 服务器返回的数据字符串类型
  47.  
  48. //XmlDocument responseXML 服务器返回的数据(xml对象)
  49.  
  50. //Number states 状态码
  51.  
  52. //String statesText 状态码对应文本
  53. }
  54.  
  55. function func(){
  56. if(xhr.readyState == 4){
  57. console.log(xhr.responseText);
  58. var data=xhr.responseText;
  59. var ret_dict = JSON.parse(data);
  60. if(ret_dict.status){
  61. //登录成功
  62. }else{
  63. //登录失败
  64. var ele=document.getElementsByClassName('err')[0];
  65. ele.innerHTML="<h1 style=\"color:red;\">"+ret_dict.message+"</h1>"
  66. }
  67. }
  68. }
  69. </script>

open(请求方式, URL, 是否异步)

send(请求体)

onreadystatechange,指定监听函数,它会在xmlHttp对象的状态发生变化时被调用

readyState,当前xmlHttp对象的状态,其中4状态表示服务器响应结束

status:服务器响应的状态码,只有服务器响应结束时才有这个东东,200表示响应成功;

responseText:获取服务器的响应体

代码实例:

  1. <div>
  2. <table border="">
  3. <thead>
  4. <tr>
  5. <th>ID</th>
  6. <th>姓名</th>
  7. <th>年龄</th>
  8. <th>性别</th>
  9. <th>班级</th>
  10. <th>编辑</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr><td></td>
  15. <td>李四</td>
  16. <td></td>
  17. <td></td>
  18. <td>C++工程师</td>
  19. <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=4">编辑</a></td>
  20. </tr>
  21. <tr><td></td>
  22. <td>fas</td>
  23. <td></td>
  24. <td></td>
  25. <td>Python工程师</td>
  26. <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=5">编辑</a></td>
  27. </tr>
  28. </tbody>
  29. </table>
  30. </div>
  31. </body>
  1. <script>
    var xhr=null
    var thr=null
    function GetXhr(){
    if(XMLHttpRequest){
    var Xh = new XMLHttpRequest();
    }else{
    Xh = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return Xh
    }
  2.  
  3. 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()
    }
    }
    }
  4.  
  5. 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

>这里

原生ajax中get和post请求的更多相关文章

  1. Django框架 之 基于Ajax中csrf跨站请求伪造

    Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({     data: {csrfmiddlewaretoken: ...

  2. ajax中Post和Get请求方式的区别?

    ajax中Post和Get请求方式的区别: 1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示. 2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的 ...

  3. AJax中post与get请求注意事项

    在使用ajax提交表单时,一定要区分提交按钮的形式和数据表头的设置,实例如下: GET请求: HTML代码: <!doctype html> <html lang="en& ...

  4. ajax中的setRequestHeader设置请求头

    1.问题引发点: 前不久发现一个问题: 前端并没有设置请求头信息里面的Accept-Encoding:gzip...但是在请求头中可以明显的看到Accept-Encoding:gzip, deflat ...

  5. 资料汇总--Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)【转】

    开发环境:Tomcat9.0 在使用Ajax实现Restful的时候,有时候会出现无法Put.Delete请求参数无法传递到程序中的尴尬情况,此时我们可以有两种解决方案:1.使用地址重写的方法传递参数 ...

  6. Ajax中Put和Delete请求传递参数无效的解决方法(Restful风格)

    本文装载自:http://blog.csdn.net/u012737182/article/details/52831008    感谢原文作者分享 开发环境:Tomcat9.0 在使用Ajax实现R ...

  7. 原生Ajax发送get、post请求每一步

    说明 发送Ajax的请求的核心对象是XMLHttpRequest,因此我们需要了解该对象的相关属性和方法 方法(图一) 属性(图二) 第一步:创建 XMLHttpRequest对象,下面都简写为 xh ...

  8. 原生ajax中readyState中的含义以及HTTP协议状态码的含义

    xmlhttp.readyState的值及解释: 0:请求未初始化(还没有调用 open()). 1:请求已经建立,但是还没有发送(还没有调用 send()). 2:请求已发送,正在处理中(通常现在可 ...

  9. ajax中加上AntiForgeryToken防止CSRF攻击

    经常看到在项目中ajax post数据到服务器不加防伪标记,造成CSRF攻击 在Asp.net Mvc里加入防伪标记很简单在表单中加入Html.AntiForgeryToken()即可. Html.A ...

随机推荐

  1. GitHub18

    兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编程新手.热爱编程.对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编 ...

  2. Spring.Net快速入门:控制翻转、依赖注入、面向切面编程

    Spring.Net主要功能: 1.IoC:控制翻转(Inversion of Control)  理解成抽象工厂翻转控制:就是创建对象的权利由开发人员自己控制New,转到了由容器来控制. 2.DI: ...

  3. fetch 代替 XMLHttpRequest (json-server 模拟后台接口)

    一.fetch 是 XMLHttpRequest 的替代方案.说白了就是除了 ajax 获取后台数据之外也可以用fetch 来获取. 二.fetch 的支持性还不是很好.挂载于BOM中可以通过浏览器直 ...

  4. [转帖]浪潮openstack的逆袭

    扬长补短 浪潮云平台的逆袭 http://blog.itpub.net/11310314/viewspace-2564083/ 浪潮并不是最早加入OpenStack的国内厂商,却实现同比303.1%的 ...

  5. Fantacy团队周二站立会议

    词频分析模型 1.这次站会是周二开的,但是由于我个人的疏忽,哎,不说了. 2.会议时间:2016年3月29日12:03~12:30. 持续时长:27分钟 会议参加成员:组长:杨若鹏 http://ww ...

  6. hive分区表

    分区表创建 row format delimited fields terminated by ',';指明以逗号作为分隔符 依靠插入表创建分区表  从表sample_table选择 满足分区条件的 ...

  7. 关于miniconda的安装,配置以及包批量安装和使用

    由于时间很晚了.就不写废话了. conda官方文档地址:http://conda.pydata.org/docs/ 一切其实都可以从miniconda的文档找到,这里只纪录自己操作的时候遇到的值得一说 ...

  8. 关于MySQL中添加数据的两种方法

    下面介绍两种执行SQL命令的方法,并作出相应地总结,第一种介绍一种常规用法,下面进行做简要地分析,首先我们需要执行打开数据库操作首先创建一个MySqlConnection对象,在其构造函数中传入一个连 ...

  9. ES next & Async Await

    ES next & Async Await https://jestjs.io/docs/en/asynchronous#async-await ES7 new async () => ...

  10. C# PictureBox控件畫圖

    PictureBox的正方向: BitMap初始化: Bitmap bt = new Bitmap(Width,Height);      Graphics gdi = Graphics.FromIm ...