Ajax发送数据

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>

3.封装一个ajaxHelper.js方法

var jsHelper = {
    //1.0 浏览器兼容的方式创建异步对象
    makeXHR: function() {
        //声明异步对象变量
        var xmlHttp = false;
        //声明 扩展 名
        var xmlHttpObj = ["MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", "MSXML.XMLHttp"];
        //判断浏览器是否支持 XMLHttpRequest，如果支持，则是新式浏览器，可以直接创建
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        //否则，只能循环 遍历 老式浏览器 异步对象名，一一尝试创建，直到创建成功为止
        else if (window.ActiveXObject) {
            for (i = 0; i < xmlHttpObj.length; i++) {
                xmlHttp = new ActiveXObject(xmlHttpObj[i]);
                if (xmlHttp) {
                    break;
                }
            }
        }
        //判断 异步对象 是否创建 成功，如果 成功，则返回异步对象，否则返回false
        return xmlHttp ? xmlHttp : false;
    },
    //2.0发送Ajax请求
    doAjax: function(method, url, data, isAyn, callback) {
        method = method.toLowerCase();
        //2.1创建异步对象
        var xhr = this.makeXHR();
        //2.2设置请求参数
        xhr.open(method, url + (method == "get" ? "?" + data : ""), isAyn);
        //2.3根据请求的不同方式，在请求头中添加不同的属性
        if (method == "get") {
            xhr.setRequestHeader("If-Modified-Since", 0);
        } else {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }
        //2.4设置回调函数
        xhr.onreadystatechange = function () {
            //如果接收完毕服务器返回的响应报文
            if (xhr.readyState == 4) {
                //判断状态码是否正常
                if (xhr.status == 200) {
                    //调用回调函数
                    //异步对象调用回调函数，返回的结果保存到xhr对象中
                    callback(xhr);
                }
            }
        };
        //2.5发送请求（如果是post，则传参数，否则为null）
        xhr.send(method != "get" ? data : null);
    },
    //3.0发送Post请求
    doPost: function(url, data, isAyn, callback) {
        this.doAjax("post", url, data, isAyn, callback);
    },
    //4.0发送Get 请求
    doGet: function(url, data, isAyn, callback) {
        this.doAjax("get", url, data, isAyn, callback);
    }
};

调用代码

<!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 type="text/javascript" src="ajaxHelper.js"></script>
    <script>
        window.onload=function() {
            document.getElementById("btnGet").onclick = function () {
                jsHelper.doGet("getHandler.ashx","Name=Kim",true,function (resObj){
                var res = resObj.responseText;
                    alert(res);
                });
            };
            document.getElementById("btnPost").onclick=function() {
                jsHelper.doPost("postHandler.ashx", "Age=18", true, function(resObj) {
                    var res = resObj.responseText;
                    alert(res);
                });
            }
        }
    </script>
</head>
<body>
    <input type="button" value="Get请求" id="btnGet"/>
    <input type="button" value="Post请求" id="btnPost"/>
</body>
</html>

4.Ajax去缓存

1.在ajax发送请求前加上anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0”)
2.在ajax发送请求前加上anyAjaxObj.SetRequestHeader(“Cache-Control”,”no-cache”)
3.在URL后面加上一个随机数：“fresh=”+ Math.random()
4.在URL后面加上事件搓：“nowtime=”+ new Date().getTime()
5.如果是使用jQuery，直接这样就可以了$.ajaxSetup({cache:false})，全局设置
【这样页面的所有ajax都会执行这条语句就不会保存缓存记录】
posted @ 2015-03-25 22:58  Kimisme  阅读(380)  评论(0)  编辑  收藏  举报