zoukankan      html  css  js  c++  java
  • 1.AJAX简介

    • 没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器时间。每次都要刷新页面的坏处:页面刷新打断用户操作、速度慢、增加服务器的流量压力。如果没有AJAX,像在优酷网站看视频的过程中如果点击了评论等功能,页面就会刷新,视频就会被打断。
    • AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种进行页面局部异步刷新的技术,用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新,而是在HTML页面中使用JavaScript创建XMLHTTPRequest对象来向服务器发出请求以及获得返回的数据,就像JavaScript版的WebClient一样,在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据,这样页面就不会刷新了。XMLHTTPRequest是AJAX的核心对象。
    • 开发一个AJAX功能需要开发服务端和客户端两块程序。例如,我们开发一个显示服务端的时间为例:首先开发一个一般程序程序GetDate1.ashx,输出当前时间。在HTML页面中放一个按钮,在按钮的onclick中创建XMLHTTP向GetDate1.ashx发送请求,获得返回的数据并显示到界面上。如面试常考:不使用UpdatePanel,JQuery等AJAX库编写一个AJAX程序。
    • 也可以在xmlhttp.open向服务器传递参数:xmlhttp.open("POST","GetDate1.ashx?id=1",false),如果传递给服务器的请求里有中文,则需要使用JavaScript函数encodeURI来进行URL编码。
    • POST方式下一般不会有缓存,Get则有,如果页面地址不变的话,则会直接从缓存读取。

    示例1:取得服务端时间

       1. 开发服务端,建立一般处理程序

         

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    
    namespace AJAX1
    {
        /// <summary>
        /// AJAXGetTime 的摘要说明
        /// </summary>
        public class AJAXGetTime : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
               
                context.Response.ContentType = "text/plain";
                //以下的这些都是清除缓存用的,因为用get的方法时,如果有缓存,则回应是从缓存中读取的。
                context.Response.Buffer = true;
                context.Response.Expires = 0;
                context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
                context.Response.AddHeader("pragma", "no-cache");
                context.Response.AddHeader("cache-control", "private");
                context.Response.CacheControl = "no-cache";
                string id = context.Request["id"];
               
                context.Response.Write(DateTime.Now.ToString()+"-->"+id);
            }
    
             
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }
    }

       2.开发客户端,建立普通 的html页面,用JavaScript创建XMLHTTPRequest,此示例是IE的xmlhttp的,如果用到其它内核的浏览器则要创建其它浏览器的xmlhttprequest.

      

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
         <meta HTTP-EQUIV="pragma" CONTENT="no-cache" />
         <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate" />
         <meta HTTP-EQUIV="expires" CONTENT="0" />
        <script type="text/javascript">
            function gettime() {
                var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//创建xmlhttp对象,相当于创建webclient
                if (!xmlhttp) {
                    alert("创建xmlhttp对象异常.");
                    return;
                }
    
                xmlhttp.open("GET", "AJAXGetTime.ashx?id="+encodeURI("国家名称"), false); //准备向服务器AJAXGetTime.ashx发出post请求
                //XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不像webclient的downloadString那样把服务器返回的数据拿到才返回,是异步的。因此需要监听onreadystatechange事件
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4) {//4表示数据已返回了
                        if (xmlhttp.status == 200) { //返回成功
                            document.getElementById("Text1").value = xmlhttp.responseText; //responseText属性为服务器返回的文本.
                        }
                        else {
                            alert("AJAX服务器返回错误."); //此时才开始发送请求
                            return;
                        }
    
                    }
                }
                xmlhttp.send();
           }
        </script>
        <style type="text/css">
            #Text1 {
                width: 449px;
            }
        </style>
    </head>
    <body>
    
        <p>
            <input id="Text1" type="text" /><input id="Button1" type="button" 
                value="GetServerTime" onclick="gettime();" /></p>
    
    </body>
    </html>
  • 相关阅读:
    golang html/template template.ParseFiles(filenames) 相对路径问题
    深入理解jvm jdk1,7(19)
    深入理解jvm jdk1,7(18)
    深入理解jvm jdk1,7(17)
    深入理解jvm jdk1,7(16)
    深入理解jvm jdk1,7(15)
    深入理解jvm jdk1,7(14)
    hugo 制作个人博客总结
    后台管理系统总结
    pageHelper(分页插件的使用)
  • 原文地址:https://www.cnblogs.com/yagzh2000/p/3173022.html
Copyright © 2011-2022 走看看