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 >

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