ajax原理的簡單實現

2021-08-30 12:38:20 字數 1129 閱讀 6895

ajax的主要作用就是不重新整理頁面更新頁面的內容,也就是非同步傳輸。用來顯示ajax響應的div。下面就是一段使用ajax的簡單示例。

function ajaxrequest() else if (window.activexobject) 

if(!req) return false;

req.onreadystatechange = callback;

req.open('get','ajax/ajaxtest.txt',true);

req.setrequestheader('accept-language','zh-cn');

req.send(null);

function callback()

break;

} }}

function addevent******(obj,evt,fn)else if(obj.attachevent)

}addevent******(document,'dblclick',ajaxrequest);

**的最後部分給document新增乙個雙擊的響應函式,當文件被雙擊的時候就呼叫ajaxrequest函式,也就是負責傳送ajax請求的函式。

ajaxrequest函式中,第一步就是建立乙個xmlhttprequest物件,**如下,由於ie和其它瀏覽器支援的方式不太一樣,所以會試圖使用使用兩個方法來建立這個物件。

if(!req) return false;第二步是設定xmlhttprequest物件的狀態變化響應函式。

req.onreadystatechange = callback;
下面是傳送ajax請求了。

req.open('get','ajax/ajaxtest.txt',true);

req.send(null);

最後就可以編寫狀態變化響應函式了:

function callback()

break;

} }

函式的作用就是將返回的字串新增到頁面開頭id為test的div內。雙擊這個文件就可以看到效果。

Ajax簡單原生使用原理

let xhr 由於存在相容問題,所以需要判斷是dom瀏覽器還是ie瀏覽器 第乙個引數 是get還是post請求,第二個引數,伺服器需要攔截的路由,第三個引數,ajax是否非同步,true為非同步,false為同步xhr.send null get請求 xhr.send options post請求...

原生Ajax的原理和實現

核心 xmlhttprequest物件 xhr xhr.timeout 1000 設定超時時間 ms xhr.ontimeout function xhr.setrequestheader header,value 設定http頭部資訊 get xhr.open get url,isasync xh...

AJAX非同步原理與實現

面試時問到了這個問題,說實話我還是不理解的,只是單單會使用。所以今天我看一下,自己了解下。看了網上前輩們寫的資料,我自己總結歸納ajax的原理和流程如下 這個是ajax核心的物件,當然不是所有瀏覽器建立這個物件的方法是一致的。我們開發過程中一般建議使用chrome瀏覽器,在chrome中,xmlht...