.net编程--JQuery与Ajax应用(网络编程)

最新推荐文章于 2022-01-02 12:43:38 发布

溪午X

最新推荐文章于 2022-01-02 12:43:38 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/qq_37855507/article/details/87901281

版权

一、AJAX

Ajax 全称为“Asynchronous JavaScript and XML”(异步 JavaScript和XML)，他并不是指一种单一的技术，而是有机的利用一系列交互式网页应用相关技术所形成的结合体。他的出现，揭示了无刷新更新页面的新时代。

AJAX就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与响应。实现网络编程。

在这里插入图片描述

1. 实例javaScript异步请求：

HTML页面以及JavaScript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <table>
        <tr>
            <td> 用户名： </td>
            <td> <input type="text" id="userName"/>        </td>
        </tr>
        <tr>
            <td>  密码： </td>
            <td><input type="text" id="psd"/></td>
        </tr>
        <tr>
            <td>
                <input type="button" id="btn" value="登录按钮"/>
            </td>
        </tr>
    </table>
    <input type="text" id="content" />
</body>
<script type="text/javascript">
    window.onload = function () {
        var btn = document.getElementById('btn');
        btn.onclick = function () {
            //发送异步请求
            var xhr;
            //创建XMLHTTPREQUEST对象
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            } else {
                xhr=new ActiveXObject("Microsoft.XMLHTTP")
            }

            var name = document.getElementById("userName");
            var psd = document.getElementById("psd");
            var strUrl = "ajaxLogin.ashx?name="+userName.value+"&psd="+psd.value;
            
            xhr.open("Get", strUrl, true);
            xhr.send();

            //监听状态改变事件
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 & xhr.status == 200) {
                    if(xhr.response=="ok"){
                        document.getElementById('content').value="登录成功";
                    } else {
                        alert(xhr.responseText);
                    }
                }
            };
        };
    }

</script>
</html>

一般处理程序：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace 异步
{
    /// <summary>
    /// ajaxLogin 的摘要说明
    /// </summary>
    public class ajaxLogin : IHttpHandler
    {
       
        public void ProcessRequest(HttpContext context)
        {
            string name = context.Request.Params["name"];
            string psd = context.Request.Params["psd"];
            context.Response.ContentType = "text/plain";
            if(name==psd)
            {
                context.Response.Write("ok");
            }
            else
            {
                context.Response.Write("no");
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

2.JQuery异步请求：

JQuery异步请求有四种不同的方式，分别如下所示：

1. HTML页面及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="JQuery/jquery.min.js"></script>
    <script type="text/javascript">
        //document文档加载完毕之后执行
        $(function () {
            $('#btnGetTime').click(function () {
                //json数据  json:{key:value,key2:value2,key3:[2,3,4,{sss:33}]}

                //1.使用get方法：
                //参数解释：
                //第一个参数："ajaxServer.ashx"   get请求的后台的地址
                //第二个参数："id=23&name=123"    给后台传递的参数
                //第三个参数： function (data){}  后台返回数据的回调函数  data为后台返回的数据。
                $.get("ajaxServer.ashx", "id=23&name=123", function (data) {
                    alert(data);
                });

                //2.使用post方法：
                $.post("ajaxServer.ashx", "id=23&name=123", function (data) {
                    alert(data);
                });

                //3. 要求后台返回的数据必须随时json格式
                $.getJSON("ajaxServer.ashx", {id:123,name:"sssss"}, function (data) {
                        alert(data.Date);
                });

                //4.JQuery 异步最综合的方法：
                $.ajax({
                    url: "ajaxServer.ashx",
                    type: "POST",
                    data: "id=23&name=123",
                    cache:false,//强迫当前请求必须去后台拿数据，不能用客户端缓存。
                    success: function (data) {
                        alert(data.Date);
                    },
                    dataType:"json",
                });
            });
        });
    </script>
</head>
<body>
    <input type="button" value="获取后台的时间" id="btnGetTime"/>
</body>
</html>

2. 服务器端一般处理程序：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace 异步
{
    /// <summary>
    /// ajaxServer 的摘要说明
    /// </summary>
    public class ajaxServer : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //json格式的数据。
            context.Response.Write("{\"Date\":\""+DateTime.Now.ToString()+"\"}");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

溪午X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
.net编程--JQuery与Ajax应用(网络编程)

Ajax 全称为“Asynchronous JavaScript and XML”(异步 JavaScript和XML)，他并不是指一种单一的技术，而是有机的利用一系列交互式网页应用相关技术所形成的结合体。他的出现，揭示了无刷新更新页面的新时代。1. XMLHttpRequest 对象 Ajax的核心是XMLHttpRequest 对象，他是Ajax实现的关键——发送异步请求、接收...
复制链接

扫一扫