Ajax-(get/post/jQuery方式请求)

< !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 src ="jq/jquery-1.12.2.min.js" ></ script>
    < script>
        //01.创建一个ajax对象
        window . onload= function (){
            btnGetAjax ();
            btnPostAjax ();
            btnjQuery ();
        }

        function btnGetAjax() {
            document . getElementById ("btnGet" ). onclick = function () {
                //01.创建异步对象（新式浏览器）
                var xhr = new XMLHttpRequest ();
                //02.设置异步对象的请求参数
                         //请求方式  请求路径  是否异步
                //    xhr.open("get", "/AjaxTest01.ashx?i="+Math.random(), true);

                xhr . open( "get" , "/AjaxTest01.ashx" , true );
                //02.1如果不想浏览器对get产生缓存，如下设置
                xhr . setRequestHeader ("If-Modified-Since" , 0 );
                //03.设置异步对象的onreadystatechange事件（回调函数）
                //此事件在异步对象的readyState属性值发生改变时触发
                xhr . onreadystatechange = function () {
                    //当readyState为4时，说明本次请求的响应报文 已经全部接收完毕
                    if (xhr . readyState== 4 )
                    {
                        var allTest = xhr .getAllResponseHeaders ();
                        var con = xhr .responseText ;
                      //  var content = xhr.getResponseHeader();
                        alert ( allTest+ "\r\n" + "\r\n" +con );
                    }
                }
                //04.向服务器发送请求
                xhr . send();

                //05.取消本次请求
                xhr . abort();
                /*
                xhr.readyState
                0 new XmlHttpRequest
                1 open设置好参数
                2 向服务器发送请求
                3 开始接收响应报文
                4 响应报文接收完毕
                */
            }
        }


        function btnPostAjax()
        {
            document . getElementById ("btnPost" ). onclick = function () {
                var xhr = new XMLHttpRequest ();
                xhr . open( "post" , "/AjaxTest01.ashx" , true );
                xhr . setRequestHeader ("Content-Type" , "application/x-www-form-urlencoded" );
                xhr . onreadystatechange = function () {
                    if ( xhr .readyState == 4 ) {
                        var content = xhr .responseText ;
                        alert ( content);
                    }
                }
                //post传参
                xhr . send( "name:miaoying" );
            }
        }



        function btnjQuery() {

            $ . ajaxSetup({
                cache : false
            });
            //要发送的数据 可以使用键值对字符串 也可以使用对象的方式
            $ ( "#btnjQuery" ).click ( function () {

                //$.post("/AjaxTest01.ashx", {name:"miaoying"}, function (e) {
                //    alert(e);
                //})

                //$.get("/AjaxTest01.ashx", { name: "miaoying" }, function (e) {
                //    alert(e);
                //})

                //详细的Ajax请求方法，当有大量的参数 需要设置时 可以使用此方法
                $ . ajax( "/AjaxTest01.ashx" , {
                    method : "get" ,
                    data : "name=miaoying" ,
                    success : function (txt ) {
                        alert ( txt);
                    }
                });
            });
        }

    </ script>
</ head >
< body >
    < input id ="btnGet" value= "Get确定" type= "button" />
    < input id ="btnPost" value= "Post确定" type= "button" />
    < input id ="btnjQuery" value= "jQuery确定" type= "button" />
    < img src ="pic/1.gif" />
</ body >
</ html >