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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。