Ajax基礎原理及使用教程（來自動力節點）詳情 - ajax,後端,java,前端,ajax跨域牛仔碼農博客

首先，我們來回顧下ajax是什麼?

Ajax = 異步 JavaScript 和XML。

Ajax是一種用於創建快速動態網頁的技術。

通過在後台與服務器進行少量數據交換，Ajax可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁(不使用 Ajax)如果需要更新內容，必須重載整個網頁面

前面談到ajax是什麼，其主要也就是異步提交，大家是否知道同步和異步提交的區別嗎?

同步提交：當用户發送請求時，當前頁面不可以使用，服務器響應頁面到客户端，響應完成，用户才可以使用頁面。
異步提交：當用户發送請求時，當前頁面還可以繼續使用，當異步請求的數據響應給頁面，頁面把數據顯示出來。

Ajax工作原理

客户端發送請求，請求交給xhr，xhr把請求提交給服務，服務器進行業務處理，服務器響應數據交給xhr對象，xhr對象接收數據，由javascript把數據寫到頁面上，如下圖所示：
1640152813(1).jpg

Ajax請求的五個步驟：

//第一步，創建XMLHttpRequest對象
var xmlHttp = new XMLHttpRequest();
function CommentAll() {
//第二步，註冊回調函數
xmlHttp.onreadystatechange =callback1;
//{
    //    if (xmlHttp.readyState == 4)
    //        if (xmlHttp.status == 200) {
    //            var responseText = xmlHttp.responseText;
    //        }
    //}
//第三步，配置請求信息，open(),get
     //get請求下參數加在url後，.ashx?methodName = GetAllComment&str1=str1&str2=str2
      xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
    //post請求下需要配置請求頭信息
    //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //第四步，發送請求,post請求下，要傳遞的參數放這
    xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
}
//第五步，創建回調函數
function callback1() {
    if (xmlHttp.readyState == 4)
        if (xmlHttp.status == 200) {
            //取得返回的數據
            var data = xmlHttp.responseText;
            //json字符串轉為json格式
            data = eval(data);
            $.each(data,
                function(i, v) {
                    alert(v);
                });       
        }
}
//後台方法
 public  void GetAllComment(HttpContext context)
        {
            //Params可以取得get與post方式傳遞過來的值。
            string methodName = context.Request.Params["methodName"];
            //QueryString只能取得get方式傳遞過來的值。
            string str1 = context.Request.Form["str1"];
            //取得httpRequest傳來的值，包括get與post方式
            string str2 = context.Request["str2"];
            List comments = new List();
            comments.Add(methodName);
            comments.Add(str1);
            comments.Add(str2);
            //ajax接受的是json類型，需要把返回的數據轉給json格式
            string commentsJson = new JavaScriptSerializer().Serialize(comments);
            context.Response.Write(commentsJson);
        }

建立xmlHttpRequest對象
設置回調函數
使用open方法與服務器建立鏈接
向服務器發送數據
在回調函數中針對不同的響應狀態進行處理

AJAX是有很多用處的，接下來給大家介紹AJAX需要掌握的幾個功能點：

1、創建原生Ajax對象

XMLHttpRequest 是 AJAX 的基礎，所有現代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內建 XMLHttpRequest 對象。那麼我們下面來創建一個ajax對象

const instance = new XMLHttpRequest();

這樣我們就創建了一個用於進行ajax交互的對象。

當然我們這兒提及一下老版本的ie5、ie6的javascript對象都是使用ActiveX來實現的標準，所以沒有XMLHttpRequest對象。他們創建一個對象使用這種方式

const instance = new ActiveXObject("Microsoft.XMLHTTP");

其實我們瞭解一下就行了，這塊在你的代碼也不用加上了，現在所有的網站應該都放棄了對低版本ie的支持，這個已經退出了歷史舞台，瞭解一下情況即可。

2、Ajax發送請求

首先來看一下XMLHttpRequest如何發送一個請求到服務器

const instance = new XMLHttpRequest();
 
instance.open(method,url,async);
 
instance.send();

這裏用到了兩個方法，第一個open方法其實是配置ajax必要的信息，第二個send才是真正的發起請求到服務器。

3、Ajax通過readyState狀態的變化接收服務器響應

當請求被髮送到服務器時，我們需要執行一些基於響應的任務，每當 readyState 改變時，就會觸發 onreadystatechange 事件，readyState 屬性存有 XMLHttpRequest 的狀態信息。

4、進級苦惱之跨域請求

跨域是所有前端都必須去面對的一個棘手的問題，當你去請求其他服務器的資源時，瀏覽器安全限制會阻止該請求。你的請求不會到底服務器，被瀏覽器阻止了，這也是遵循了同源策略。

那麼如何去解決這個跨域呢，通用的有幾種方法，但是核心都是需要服務器去配合處理跨域，前端自己無法處理跨域。

第一個採用JsonP方法，這個方法其實也是需要後台去配合處理，由後台來進行請求，然後將數據拼裝在一個json對象返回到前台，然後前台通過callback函數來進行操作。這個也比較繁瑣。
第二種就是服務端去放一個跨域文件crossdomain.xml放置到服務器端，然後寫上可以跨域的ip地址。
第三種配置反向代理服務器，通過代理服務器我們也其實是代理服務器去請求外圍，然後轉發到我們的服務器上。這樣也可以防止跨域。

以上就是AJAX的知識總結，最後也推薦大家觀看ajax的視頻去學習，對於新手更易理解吸收，動力節點的Ajax學習教程，通過對ajax的傳統使用方式，結合json操作的方式，結合跨域等高級技術的方式，對ajax做一個全面的講解。

Ajax資料下載：http://www.bjpowernode.com/?s...