后台代码：

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="">

        <thead>

            <tr>

                <th>ID</th>

                <th>姓名</th>

                <th>年龄</th>

                <th>性别</th>

                <th>班级</th>

                <th>编辑</th>

            </tr>

        </thead>

        <tbody>

                <tr><td></td>

                    <td>李四</td>

                    <td></td>

                    <td>男</td>

                    <td>C++工程师</td>

                    <td><a onclick="XhrPostRequest(this);">删除</a>|<a href="/edit_student.html?nid=4">编辑</a></td>

                </tr>

                <tr><td></td>

                    <td>fas</td>

                    <td></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

>这里

原生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. HTML 引入Css样式

  2. 安装phpredis扩展

    本文是根据菜鸟教程中的内容而写的,因为按照教程中做法来操作,中间遇到一些问题,我在centos6.5和ubuntu16.4中都遇到了,所以写在这里.强烈建议你先看完这篇博客,然后再操作,能省不少事. ...

  3. Mesos的用途

    http://mesos.apache.org/ https://mesosphere.com/why-mesos/ http://www.cnblogs.com/ee900222/p/docker_ ...

  4. Gradle下载类库源码

    https://blog.csdn.net/xiaoxing598/article/details/68958383 备选:https://www.cnblogs.com/yoyotl/p/62917 ...

  5. 转载： 一、linux cpu、内存、IO、网络的测试工具

    来源地址: http://blog.csdn.net/wenwenxiong/article/details/77197997 记录一下 以后好找.. 一.linux cpu.内存.IO.网络的测试工 ...

  6. 转《Angular4项目部署到服务器上刷新404解决办法》

    刚遇到Angular4项目npm run build 后部署到服务器可以访问,但是刷新页面会出现404的错误!转载一大神的操作 解决angular2页面刷新后报404错误办法: 配置app.modul ...

  7. HTML5 & how to download SVG in js

    HTML5 & how to download SVG in js how to download SVG in js http://dinbror.dk/blog/how-to-downlo ...

  8. MySQL中条件放在where后面与放在on后面的区别

    假设有两种表:test_on_position表和address表,address表存放地址,test_on_position存放会员及其常用的地址,数据如下: address表: test_on_p ...

  9. Code First 重复外键（简单方法）

    之前有说过  Code First 重复外键   的一种解决方案.   http://blog.csdn.net/hanjun0612/article/details/50478134 虽然可以解决问 ...

  10. 聪聪和可可 HYSBZ - 1415（概率 + spfa + 记忆化dp）

    Input 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行,每 ...