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

< !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+ " " + " " +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 >