1.AJAX简介

时间 2019-11-20

标签 1.ajax ajax 简介栏目 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：取得服务端时间javascript

1. 开发服务端，创建通常处理程序css

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.html

<!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>