ASP_Ajax

JQAjax.html:

 <title></title>
    <script src="../js/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#btnJQGetDate").click(function() {


                //JSON:[3,4,6,{id:3,uname:34,data:[1,4,5]},45]


                //发送异步请求
                //第一个参数:URL地址,第二个参数是数据,可以是urlencode格式也可以是json格式数据
                //最后一个参数是请求成功之后的事件响应方法。接受一个参数,参数就是后天返回的响应内容
                //$.get("GetDate.ashx","id=3&n=dddd", function(data) {
                //    alert(data);
                //});
                


                //$.post("GetDate.ashx", "id=3&n=dddd", function (data) {
                //    alert(data);
                //});


                //data:返回数据的格式是json的。
                $.getJSON("GetDate4Json.ashx", "id=3&n=dddd", function(data) {
                    alert(data.id);
                    alert(data.n);
                });


            });
        });
    </script>
</head>
    <body>
        <input type="button" id="btnJQGetDate" value="JQGetDate"/>


    </body>



GetDate.ashx.cs:

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //Thread.Sleep(2000);






            context.Response.Write(DateTime.Now.ToString());
           
        }


GetDate4Json.ashx.cs:

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/json";
            //context.Response.Write("{key:22,Time:'2013-9-17 16:45:41'}");
            int id = int.Parse(context.Request["id"] ?? "0")+1;
            string n = context.Request["n"] + "eeeeeee";
            
            //自己拼接json必须都是双引号。
            //StringBuilder sb =new StringBuilder();
            //sb.Append("{");
            //sb.AppendFormat("\"id\":{0},\"n\":\"{1}\"", id, n);
            //sb.Append("}");
            //context.Response.Write(sb.ToString());


            
            System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer=new JavaScriptSerializer();
            //这个方法。可以把一个对象直接转成json格式字符串。
            string strJson= javaScriptSerializer.Serialize(new {id=id,n=n});


            //var obj = new {Name = "shit", Age = 18, UName = "红太阳!"};
            context.Response.Write(strJson);


        }


XmlRequestDemo.html:

 <script src="../../js/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(function () {
            
            //我们自己封装的异步方法
            $("#btnMyAjax").click(function() {
                myAjax("get", "GetDate.ashx", "u=ssss&id=3", function(data) {
                    alert(data);
                });
            });


            $("#btnGetDate").unbind("click");
            $("#btnGetDate").bind("click", function () {
                //悄悄发送一个请求道后台,获取当前的后台的时间


                //创建异步请求对象
                var xhr;
                if (XMLHttpRequest) {
                    xhr = new XMLHttpRequest();//ie7+,chrome/ff/opera.....
                } else {
                    //兼容ie5,ie6
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }


                //--------------------Get请求的方式--------------------
                //设置当前请求的地址设置当前的请求方法。
                //get请求在url地址后面添加参数
                //xhr.open("Get", "GetDate.ashx?id=2");
                //真正的发送请求
                //xhr.send();
                //----------------------------------------------------
                


                //--------------------Post请求的方式--------------------
                xhr.open("Post", "GetDate.ashx");
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send("id=3&snamd=sss");
                //----------------------------------------------------------




                //监控当前xhr对象的 状态。
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        alert(xhr.responseText);
                    }
                };


            });
        });




        function myAjax(method, url, param, success) {
            //document.getElementById("ss");
            //window.on


            var xhr;
            if (XMLHttpRequest) {
                xhr = new XMLHttpRequest();//ie7+,chrome/ff/opera.....
            } else {
                //兼容ie5,ie6
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }


            if (method.toLowerCase() == "get") {
                url = url + "?" + param;
            }
            
            xhr.open(method, url, true);
            
            if (method.toLowerCase() == "post") {
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhr.send(param);
            } else {
                xhr.send();
            }


            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    success(xhr.responseText);
                }
            };
        }
    </script>
</head>
<body>
    <input type="button" id="btnGetDate" value="获取时间" />
    <hr />
    <input type="button" id="btnMyAjax" value="MyAjax获取时间" />
</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值