zoukankan      html  css  js  c++  java
  • AJAX笔记

    1. AJAX简介

    没有AJAX会怎样?普通的asp.net每次执行服务器端的方法时侯都需要刷新当前页面,比如要显示服务器端的时间。

    每次都要刷新页面的坏处:页面刷新打断用户操作,速度慢,增加服务器的流量压力。如果没有AJAX,在youku看视频的过程中如果点击了“顶”,踩,翻页,页面就会刷新,视频会被打断。

      AJAX(asynchronous JavaScript and XML 一步Javascript和XML)是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获取服务器返回的数据并且更新到界面中,不是整个页面刷新,而是在HTML页面中使用Javascript创建XMLHTTPRequest对象来发送请求以及获得返回的数据,就行Javascript版本的WebClient一样,在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据,这样页面就不会刷新了。XMLHTTPRequest是AJAX的核心对象。

    //下面就是通过Javascript代码发送一个异步请求,取得返回信息更新到原来页面中的核心代码

    <script type="text/javascript">

            function btnClick(){

              var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//创建xmlhttp对象,相当于WebClient。

              if(!xmlhttp) {

              alert("创建xmlhttp对象异常");

              return false;

              }

              xmlhttp.open("POST","GetData1.ashx?ts="+new Date(),false);//准备向服务器的GetData1.ashx发出post请求。

              //xmlhttp默认(也推荐)不是同步请求的,也就是Open方法并不像WebClient的DownloadString那样把服务器返回的额数据拿到才返回,是异步的,因此需要监听onreadystatechange事件。

              xmlhttp.onreadystatechange=function(){

              if(xmlhttp.readystate==4){

                      if(xmlhttp.status==200){ //如果状态码为200则是成功。

                      document.getElementById("txtTime").value=xmlhttp.responseText;//responseText属性为服务器返回的文本。

                     }

                     else{

                      alert("AJAX服务器返回错误!");

                     }

                }

              }

              xmlhttp.send();//这时才开始发送请求。

            }

    </script>

    <body>

    <input type="text" id="txtTime" />

    <input type="button" id="btn" value="button" onclick="btnClick()" />

    </body>

    Javascript:中对中文进行url编码用encodeURI(“中国”);

    JQuery AJAX

    new ActiveXObject(“Micriosoft.XMLHTTP”);是ie中创建XMLHTTPRequest对象的方法,非ie浏览器中创建方法是new XMLHTTPRequest()。为了兼容不同的浏览器需要编写很多代码。

    JQuery中封装的AJAX操作方法$.post(),$.get()等;$.post(“GetData1.ashx”,function(data,textStatus){});

    回调函数中data参数为服务器返回的数据,textStatus为服务器返回状态码,textStatus为“success”表示成功。

    $.post()是对$.ajax()的post方法提交AJAX查询的封装。还有$.get();

    Jquery版本的AJAX操作:

      function btnClick2(){

    //$.post("GetData1.ashx",{"ts":new Date()},function(data,textStatus){

    $.post("GetData1.ashx?ts="+new Date(),function(data,textStatus)

    { if(textStatus=="success"){

                $("#txtTime").val(data);

              }

           else{

                alert("AJAX服务器返回错误!");

            }

      });

    在JQuery封装的post,get方法中,请求的页面中如果需要传参数,我们可以直接拼凑,也可以post(),get()方法的重载,第二个参数为QueryString的字典形式: {"ts":new Date()},

    通过AJAX加载评论列表。

    //一般处理程序页面:

    StringBuilder sb1 = new StringBuilder();

    var comments = new CommentTableAdapter().GetData();

    foreach (var comment in comments)

    {

    sb1.Append(comment.name).Append("|").Append(comment.Comment).Append("$");

      }

      context.Response.Write(sb1.ToString().Trim('$'));

    //Html页面:

    $(function (){

    $.post("GetComment.ashx",function(data,status){

    if(status!="success"){

    alert("加载评论失败!");

    return;

    }

    else{

    var comments=data.split("$");

    for(var i=0;i<comments.length;i++){

    var data=comments[i];

    var content=data.split("|");

    var li=$("<li>"+content[0]+"  "+content[1]+"</li>");

    $("#ulComment").append(li);

    }

    }

    });

    });

    Json

    AJAX传递复杂数据,如果自己进行格式定义的话会经历组装,解析的过程,比较麻烦,因此,AJAX中有一个事实上的数据传输标准json。

    Json将复杂对象序列化为一个字符串,在浏览器端再将字符串反序列化为Javascript可以读取的对象,看一下json的格式,json几乎被所有语言支持。

    C#中将.net对象序列化为Json字符串的方法:

    JavaScriptSerializer().Serialize(p) ;JavascriptSerializer在System.Web.Extensions.dll中,是.Net3.x中新增加的类,如果在.Net2.0中则需要用第三方的组件。

    JavaScriptSerializer jss = new JavaScriptSerializer();

    string json=jss.Serialize(new Person(){Name="杨凤辉",Age=22 });

    //将一个.net对象序列化为一个json字符串。

    Jquery AJAX得到的data是json格式数据,用$.parseJSON(data)方法将json格式数据解析为Javascript对象。

    $(function(){

        $.post("JsonTest1.ashx",function(data,status){

         //alert(data);

          var person=$.parseJSON(data);

           alert(person.Name);//可打印出名字

    })

    AJAX的最后一个x,是XML的缩写,但是用xml表示一个类的对象,需要很长的内容,增加了流量,所以现在都是转用json来转送复杂内容。简单的内容就用string。 Xml已经失去了意义了。

    微软asp.net提供的 AJAX控件updatapanel,放入scriptmanager,将要实现AJAX效果的控件放到updtapanel控件内即可。

    该效果很傻瓜化:虽然页面没有刷新,但是页面内的所有viewstate,cs代码里面的每一个函数都会被触发,流量非常大。方便的开发,是要付出流量的代价的。所以内置的AJAX控件只是适用于对流量要求不高的项目,如公司内部使用的系统。

    用Timer实现定时AJAX效果,原理:设置一个setInterval定时器,定时想服务器发送AJAX请求。

    Global.asax

    程序,session,Request等启动,关闭时,触发响应的事件,可以用来做一些网站功能。如:启动,关闭日志!

    protected void Application_Start(object sender, EventArgs e)

    {

    File.AppendAllText("b:/log.txt",DateTime.Now.ToString()+"----Application_Start");

    }

    用户在线人数统计:

    屏蔽对应ip地址的请求

    protected void Application_BeginRequest(object sender, EventArgs e)

    {

      if (HttpContext.Current.Request.UserHostAddress == "127.0.0.1")

        { //用屏蔽本机ip来做测试

         HttpContext.Current.Response.Write("该ip已被屏蔽!");

         HttpContext.Current.Response.End();

    }

    if (HttpContext.Current.Request.Url.AbsolutePath.EndsWith("jpg")&&HttpContext.Current.Request.Url.Host!="localhost")

    { //用屏蔽本机ip来做测试               HttpContext.Current.Response.WriteFile(Server.MapPath("~/img/jzdd.jpg"));//返回一个禁止盗链图片

    HttpContext.Current.Response.End();

    }

    }

    Asp.net异常处理,错误页和Application_Error()在这个方法里面,将异常记录下来!

    protected void Application_Error(object sender, EventArgs e)//处理未抓获的错误信息。异常!

    {

       Exception ee= HttpContext.Current.Server.GetLastError();

       File.AppendAllText("b:/errorLog.txt", ee.Message + "--" + ee.StackTrace);

    }

    URL重写

    为什么要url重写?

    1. 有利于被搜索引擎检索到(SEO),带参数的RUL权重较低;
    2. 地址栏看起来更正规,推广uid,看看如鹏网的URL重写!

    伪静态:看起来像普通的页面,而非动态生成的页面。

     原理:在Global.aspx的Application_Beginrequest()中兑取Request.url得到请求的url(View-3.aspx),然后用HttpContext.Current.RewritePath(RewirteUrl)重写。

    (View.aspx?id=3格式)http://www.cnblogs.com/hd/archive/2005/06/20/177633.html

    也可以使用微软的URLReWrite,只要修改配置文件就可以进行url重写。照着文档自学配置。见备注!

    作者:GY小小鸟
             
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    P3688 [ZJOI2017] 树状数组 【二维线段树】
    CF516D Drazil and Morning Exercise【并查集,结论】
    Luogu5540 最小乘积生成树
    CDW数学小笔记
    ZROI 金华集训 线性代数选讲
    多项式乘法(代码)
    我的vimrc
    P4562 [JXOI2018]游戏
    [POJ3585]Accumulation Degree
    [CH5302]金字塔
  • 原文地址:https://www.cnblogs.com/YangFengHui/p/2025710.html
Copyright © 2011-2022 走看看