Ajax 學習 基礎學習

2022-02-19 19:49:01 字數 2678 閱讀 5321

ajax技術的目的:實現頁面無重新整理資料動態更改

優點:

+ 不需要外掛程式支援

+ 提供web程式的功能

+ 優秀的使用者體驗

+ 減輕伺服器頻寬的負擔

缺點:

+ 破壞瀏覽器的前進與後退

+ 搜尋引擎seo的支援性不好

學習後編寫的乙個很基礎的ajax函式,幫助自己更好的掌握ajax

/*

* method => ajax請求所採用的方法,get或post

* url => 所要請求頁面的url

* paras=> 傳送時附加的引數

* callback => 完成請求或頁面資料準備完畢時執行的方法

呼叫方法

function

ajax1())

}

· **說明:

activexobject  //

利用activex外掛程式可以與微軟的其它元件進行交換,包括這裡我需要的微軟自帶的http請求方法。

ie5/6支援的http請求方法

//如果ajax請求是通過post方式,那麼為了方便後台通過鍵值對的形式獲取資料,可以指定資料的傳送以表單的形式。

open('get','index.php?a=1&b=2',true)  //

get方式,通過在url附加引數進行資料的傳輸。

//post方式的資料傳送

url = encodeuri(url+'?'+pars);     

//為了解決ie6/7在get方式下傳輸中文引數出現亂碼的情況,會在引數傳輸之前利用js進行url編碼。

echo urldecode($_get['a'])

//客戶端進行編碼,服務端進行解碼

· 重點講解:

1. readystate && status

readystate表示http請求的執行狀態,不論請求的資料是否找到,都會經歷以下的過程:

0 ----  請求未初始化

1 ----  與伺服器建立連線

2 ---- 請求已經接收

3 ---- 請求正在處理

status 則表示了http所請求資料的狀態[常見的反饋碼]:

200 ---- 資料請求完成,已經可以使用。

404 ---- 頁面未找到。

2. open()

功能:初始化請求的引數。

格式:open('請求資料的方式','所要請求的頁面url','是否非同步');

格式說明:

· 請求資料的方式:get | post

·  是否非同步:true(非同步) | false(同步)

* 如果存在setrequestheader()方法,一定要把open()方法放在它之前的一行。

3. send()

功能:傳送請求。

格式:send(paras)

**示例:

send(null) 

//在get方式下用這種方式,因為引數會附加在url後進行傳輸。

send('fname=神&lname=經病') //

在post方式,用這種方式傳輸引數,但要記得使用setrequestheader()方法

4. 同步與非同步

xmlhttpreq物件的open()方法第三個引數可以設定同步或非同步的方式。

true - 表示為非同步,它不會等待伺服器的執行完成。

false - 表示同步,它會等待伺服器執行完成,否則便會掛起程式,一直等待,一般不推薦是用同步的方式,不過對於一些小程式還是可以使用的。

5.  setrequestheader()

該方法可以設定請求的頭部資訊,常用以post方式向乙個動態網頁檔案提交資料時使用。這

6. 使用時間戳或隨機數來確保無快取的請求資料

//

時間戳open('get','index.php?t='+ new date()*1,true)//

隨機數open('get','index.php?m='+ math.random(),true)

AJAX基礎學習

1.load 方法 使用load 方法通過ajax請求載入伺服器中的資料,並把返回的資料放置到指定的元素中,它的呼叫格式為 load url,data callback 引數url為載入伺服器位址,可選項data引數為請求時傳送的資料,callback引數為資料請求成功後,執行的 函式。缺點 獲取的...

AJAX基礎學習1

1 dom 是document object 文件物件模型的縮寫。根據 規範,是一種與瀏覽器,平台,語言無關的介面,使得你可以訪問頁面其他的標準組建 文件 文件或 文件 物件 物件的屬性和方法 模型 是針對 的基於樹的 樹 節點 的層次 把乙個文件表示為一顆家譜樹 父,子,兄弟 定義了 的介面以及多...

ajax基礎學習筆記

今天學習了下ajax,簡單總結一下 1 建立xmlhttprequest物件 xmlhttp new xmlhttprequest 2 向伺服器傳送請求 get方法 xmlhttp.send post方法 xmlhttp.send id 1 xmlhttprequest物件的responsetext...