• AJAX新手必须掌握的四大知识点


    (一)AJAX简介(页面局部刷新技术)

    1.没有ajax会怎么样?  普通的asp.net每次执行服务端方法的时候都要刷新当前页面,缺点:页面整体刷新会打断用户操作、速度慢、增加服务器的流量压力。比如在优酷网如果 没有用户评论一下就会打断用户看视频 Ajax(Asynchronous JavaScript And Xml, 异步js和xml)页面局部异步刷新技术,用ajax向服务器发送请求和获得服务器返回的并且更新到界面中, 不是整个页面刷新,而是在 Html页面中使用js创建XmlHttpRequest对象来向服务器发出请求以及获得返回的数据,就像js版的WebClient(WebClient wc=new WebClient;   string s=wc.DownLoadString("getString.asph");  $(”#txt“).val()=s;  )一样,在页面中由 XmlHttpRequest发出请求获得服务器返回数据,这样页面就不会刷新。XmlhttpRequest是ajax核心对象

    (二).IE版的(js/dom)

    不用Ajax框架【Updatepanel,jquery等ajaxku】,自己写ajax请求【开发一个ajax功能,需要客户端和服务端两块】

    以下代码可以放一个事件里:[如果传递的参数是中文,在js里可以用encodeURI(”这里是汉字“)转码]

     function XmlHttpRequest()   

    {                    

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

    if(!xmlhttp)//判断是否取到xmlhttp对象            

    {            

    alert("创建xmlhttp对象失败");            

    return false;            

    }     

    xmlhttp.open("get", "TimeShow.ashx?id=" + encodeURI("这里是传的中文参数") + "&t=" + new Date(), false);        

    //注意;使用post传递,不管页面传不传参数(或者参数一样不一样)都没有缓存,不采用缓存策略;而get采用缓存,页面地址必须不一样,每次参数值不能一样;        

    //如果想去掉缓存,必须在处理文件ashx中加 context.Response.CacheControl = "no-cache";        

    //[如果传递的参数是中文,在js里可以用encodeURI(”这里是汉字“)转码,]注意:&t=" + new Date()不可少,不能让访问页面的地址(传的参数不一样)一样        

    //打开对象,准备向服务器TimeShow.ashx页面发出请求,方式是post,注意加参数,否则会一直访问缓存中的内容,        

    //参数不同缓存就会不同,XmlHTTP默认是异步请求【不是一边访问一边从服务器取数据,而是可以随时(局部)向服务器发请求要数据,        

    //更新;服务器返回的也只是他请求的数据,不是整个网页的】(推荐),不是同步的,也就是open方法并不想webclient那样先从服务器        

    //DownloadString,拿到字符串后再返回给客户浏览器,是异步的,所以需要随时监听他的onreadystatechange事件(一旦状态正常,则可取回数据)

    xmlhttp.onreadystatechange = function () {//监听他的onreadystatechange事件                

    if (xmlhttp.readyState == 4)

    {                    

    if (xmlhttp.status == 200) {//响应的状态码,200表示成功                        

    document.getElementById("time").innerText = xmlhttp.responseText;//responseText表示服务器返回的文本

                       

    }                    

    else

    {

                           

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

    return;                    

    }                

    }

               

    };            

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

    }  

    (三).各种浏览器兼容的创建XmLHttp方法

    function createXmlHttp()

    {   

    var xmlhttp; //非IE浏览器的创建    

    if(window.XmlHttpRequest)   

    {      

    xmlhttp=new XmlHttpRequest();

       } //IE的创建   

    if(window.ActiveXObject())   

    {     

    try     

    {        

    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");      

    }     

    catch(e)     

    {          

    try              

    {             

    xmlhttp=new ActiveXObject("Microsoft2.XMLHTTP");              

    }        

    catch(ex)            

    {              

    alert("创建xmlhttp失败");            

      }      }    }       

    return xmlhttp; }

    (四).Jquery版的Ajax

    Jquery提供了简化ajax使用的方法。$.ajax()函数是jq中提供的ajax访问函数。$.post()是对$.ajax()的post方式提交ajax查询的封装;(推荐) $.get()对$.ajax()的get方式提交ajax查询的封装;注意:参数中可以有中文,应为jq帮我们自动进行了转码 说明:回调函数中data参数为服务器返回的数据,textStatus为服务器返回的状态码,textStatus为”success“表示成功

      function TimeShow() {            

    $.post("TimeShow.ashx", { "id": $.guid.toString(), "name": "我爱你" }, function (data, textStatus) {                

    if (textStatus == "success") {

                        $("#show").text(data);                

    }                

    else {

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

    }

                });                          

    }

  • 相关阅读:
    每日站立会议02
    每日站立会议01
    构建之法阅读笔记02
    学习进度条06
    js获取当前时间戳
    带三角凸的框
    js或者jq的tab切换
    处理浏览器兼容 各个浏览器的标识 hack
    规定CSS的属性仅在IE下生效 在非IE浏览器下不生效
    滚动到某个点 返回顶部字样出来 点击返回顶部
  • 原文地址:https://www.cnblogs.com/sybboy/p/2863219.html
Copyright © 2020-2023  润新知