Ajax发送数据

浏览数：29 / 时间：2015年06月09日

1.Get请求

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script>
            //页面加载完毕后 创建对象
            window.onload = function () {
                document.getElementById("btnGet").onclick = function () {
                    //1.创建异步对象（类似小浏览器）
                    var xhr = new XMLHttpRequest();
                    //2.设置参数，第三参数表示是否异步发送
                    //Get请求，请求参数是紧跟url后面
                    xhr.open("Get", "Handler.ashx?Name=Kim&&Age=18", true);
                    //get请求会有缓存，让get不从浏览器读缓存
                    xhr.setRequestHeader("If-Modified-Since", "0");
                    //3.设置回调函数
                    xhr.onreadystatechange = function () {
                        //当完全接收响应报文后 并且 状态码为200
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            //获取响应报文
                            var res = xhr.responseText;
                            alert(res);
                        }
                    };
                    //4.发送异步请求
                    //Get请求没有请求体，则为null
                    xhr.send(null);
                };
            }
        </script>
    </head>
    <body>
        <input type="button" id="btnGet" value="Get请求方式"/>
    </body>
</html>

2.Post请求

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script>
            //页面加载完毕后 创建对象
            window.onload = function () {
                //绑定点击事件
                document.getElementById("btnPost").onclick = function () {
                    //1.创建异步对象（类似一个小浏览器）
                    var xhr = new XMLHttpRequest();
                    //2.设置参数，第三个参数表示是否异步发送
                    xhr.open("Post", "Handler.ashx", true);
                    //设置请求报文体的编码格式，表单得到默认编码
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    //3.设置回调函数
                    xhr.onreadystatechange = function () {
                        //当完全接收响应报文 并且 响应状态码为200
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            //获取香型报文
                            var res = xhr.responseText;
                            alert(res);
                        }
                    };
                    //直接拼接字符串key=value&&key=value
                    xhr.send("Name=Kim&&Age=18");
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="btnPost" value="Post请求"/>
    </body>
</html>