ajax 基本及在.net中的使用

BugsBunnywyj

于 2019-08-10 00:11:56 发布

阅读量570

点赞数 1

分类专栏：前后端文章标签： ajax .net

本文链接：https://blog.csdn.net/qq_40859985/article/details/98736369

版权

前后端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

基本特性

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

//对应浏览器不同有新旧方法
var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);
 xmlhttp.send();

在这里插入图片描述

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

POST 请求

xmlhttp.open(“POST”,"/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

在这里插入图片描述

url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址：

xmlhttp.open(“GET”,“ajax_test.html”,true);

该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

异步 - True 或 False？

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

xmlhttp.open(“GET”,“ajax_test.html”,true);

对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

Async=true

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

实例

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState4 && xmlhttp.status200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,"/try/ajax/ajax_info.txt",true);
xmlhttp.send();

Async = false

如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
xmlhttp.open(“GET”,“test1.txt”,false);

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

实例

xmlhttp.open(“GET”,"/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性描述

responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

实例

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

实例

请求 cd_catalog.xml 文件，并解析响应：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName(“ARTIST”);
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + “
”;
}
document.getElementById(“myDiv”).innerHTML=txt;

JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

lamp AJAX应用程序与浏览器和平台无关的！

传统web模型中，对于每一次的用户行为，将生成一次HTTP请求
而在ajax应用开发模型中，将变成对ajax引擎的一次JavaScript调用。在ajax应用开发模型中可以通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低网络流量，

局部刷新，异步处理，服务端的处理不会打断用户的操作，
提供跨浏览器的兼容性支持。

服务器端构架

服务器端控件，扩展控件，远程webservice桥
web程序的客户端代理。

客户端构架

应用程序接口。api函数基础类库，封装的xmlhttpRequeset对象，xml引擎和ajax客户端控件。

ScriptManager

1, ScriptManager(脚本控制器)是asp.net ajax存在的基础.
2, 一个页面只允许有一个ScriptManager,并且放在其他ajax控件的前面.
3,ScriptManager掌管着客户端Ajax页的多有脚本,并在页面中注册Ajax类库,用来实现页面的局部更新和对Web服务的调用.
scriptManager控件负责管理page页面中的所有ajax服务器控件，，是ajax的核心，有scriptManager控件才能够让page局部更新起作用，所用的JavaScript才会自动管理。
scriptManager控件的声明。scriptmanger控件必须放置在依赖于asp.net ajax控件或脚本的前面，否则页面将发生脚本错误
scriptManager控件一般放置在web窗体页的form元素之后
EnablePartialRendering: (默认局部渲染)比较重要,用来表示此页面是否允许局部刷新(默认为true)
AllowCustomErrorsRedirect :当发生错误时候,是否导航到web.config中定义的错误页面,如果设置为false,则使用AsyncPostBackErrorMessage和OnAsyncPostBackError提示错误.
AsyncPostBackErrorMessage: 异步调用发生错误时的提示信息.
OnAsyncPostBackError: 异步调用发生错误时的事件 e, AsyncPostBackTimeOut: 异步调用的有效时间默认为 90秒
AuthenticationService: 用来表示提供验证服务的路径.
ProfileService 表示提供个性化服务的路径
Scripts 对脚本的调用,可以恰套多个ScriptReference摸板对多个脚本文件的调用
Service 对服务的调用也可以恰套多个ServiceReference摸板以实现多个服务的引用

添加 ScriptManager 控件

直接将 ScriptManager 控件从工具箱中拖到页面的元素中即可得到如下的元素引用，这样，在它所有的页面就可以使用 ASP.NET AJAx 了。

<asp:ScriptManager ID=“ScriptManager1” runat=“server”></asp:ScriptManager>

scriptManager 属性

在这里插入图片描述

使用

在这里插入图片描述

引入service

在这里插入图片描述 ### service实例

其中应用了[system.web.script.service.scriptservice]属性，该属性是asp.net ajax能够从客户端访问到定义的webservice所必须的属性

在后端程序中使用类名.方法名的格式调用

updatePanel局部更新

将asp.net的控件拖放到updatePanel中即可使其拥有ajax异步功能
UpdatePanel的结构

<asp:ScriptManager ID="ScriptManager1" runat="server" > 
</asp:ScriptManager> 
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" RenderMode="Block"> 
<ContentTemplate> 
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger /> 
<asp:PostBackTrigger /> 
</Triggers> 
</asp:UpdatePanel>

在这里插入图片描述

updatePanel外的控件触发局部更新

triggers属性包含的AsyncPostBackTrigger触发器可以引发updatePanel控件的局部更新，在触发器中指定控件名称。该控件的某个服务端时间就可以使之外的控件触发局部更新
在这里插入图片描述

弹出对话框

在这里插入图片描述

timer定时控制器

ajax framework 构建了一个ajax timer服务器控件，设置时间间隔触发事件
Interval属性用于设置时间间隔

tick事件指定触发的事件

实例聊天室

//全局应用程序类
global.asax
void application_start(object  sender,EventArgs e)
{
//在应用程序启动时运行的代码
Application["UserName"]="111”；
Application["Mag"]=string.Empty;//留言信息
Application["Count"]=0;//人数
//Application变量的作用域为应用程序的运行区间
}
void Session_Start(object sender, EventArgs e)
    {
        // 在新会话启动时运行的代码
        Application.Lock();
        Application["Count"] = int.Parse(Application["Count"].ToString()) + 1;
        Application.UnLock();
    }

    void Session_End(object sender, EventArgs e)
    {
        // 在会话结束时运行的代码。 
        // 注意: 只有在 Web.config 文件中的 sessionstate 模式设置为
        // InProc 时，才会引发 Session_End 事件。如果会话模式设置为 StateServer
        // 或 SQLServer，则不引发该事件。
        Application.Lock();
        Application["Count"] = int.Parse(Application["Count"].ToString()) - 1;
        //离开公告
        Application.Set("Msg", Application["Msg"].ToString() + "<br/><sapn style='color:#666666;font-size=12px'>♠" + Session["UserName"].ToString() + "离开了聊天室♠</span>");
        string[] arr = Application["UserName"].ToString().Split(new char[] { '/' });//分裂字符串
        Application["UserName"] = string.Empty;
        Application["UserName"] = arr[0].ToString();
        //遍历数组arr，移除当前用户
        for(int i=0;i<arr.Length;i++)
        {
            if(arr[i].ToString()!=Session["UserName"].ToString())
            {
                //保存实时在线用户
                Application.Set("UserName", Application["UserName"] + "/" + arr[i].ToString());

            }
        }
        Application.UnLock();

    }



//chat.aspx



protected void Button1_Click(object sender, EventArgs e)
    {
        string a =Application["Msg"]+ "<br/><span style='color:#666666;font-size=12px'>【<span style='font-weight:bold'>"+Session["UserName"];
        //发送用户、聊天对象、发送时间内容
        Application.Set("Msg",a
            + "</span>】 在[" 
            + DateTime.Now.ToString() 
            + "]对【<span style='font-weight:bold'>"
            + tb_user.Text.ToString() + "</span>】说：</span><br/><span style='text-indent:20px'>"
            + tb_msg.Text.ToString() + "</span>");

    }
    protected void ltnBind()
    {
        string[] arr = Application["UserName"].ToString().Split(new char[] { '/' });
        Ltb_use.Items.Clear();
        foreach(string s in arr)
        {
            ListItem li = new ListItem(s, s);//在线人列表
            Ltb_use.Items.Add(li);
        }
    }
    protected void Timer1_Tick(object sender, EventArgs e)
    {
        ltnBind();

    }

    //content.aspx


     protected void Timer1_Tick(object sender, EventArgs e)
    {
        try
        {
            //获取聊天信息
            lb_Msg.Text = Application["Msg"].ToString();
            //统计在线人数
            lb_count.Text = "聊天室在线人数：  " + Application["count"].ToString() + "人";

        }
        catch(Exception ex)
        {
            throw new Exception(ex.Message, ex);

        }
    }

BugsBunnywyj

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax 基本及在.net中的使用

文章目录基本特性XMLHttpRequest 对象 (异步的与服务器交换数据)GET 还是 POST？GET 请求POST 请求url - 服务器上的文件异步 - True 或 False？Async=trueAsync = false服务器响应responseText 属性responseXML 属性服务器端构架客户端构架ScriptManagerscriptManager 属性基本特性AJ...
复制链接

扫一扫