Ajax的使用初識

2021-09-26 04:05:49 字數 2839 閱讀 2196

對於ajax,是在script標籤內進行使用的。

// xhr就是瀏覽器的作用

;// 開啟瀏覽器,輸入**或者後台處理檔案

// ?後面傳遞引數

// 最後的布林值決定是否非同步操作,推薦true,否則會在send部分出現停留問題。預設也是true,可以不填

xhr.

open

('get'

,'time.php?id=564'

,true);

// 傳送請求

// send裡面也可以傳遞引數,僅限於post方法時

xhr.

send()

;// 等待結果

// 出現變化後即進行處理

xhr.

onreadystatechange

=function()

ajax採用的機制是給事件傳遞的不同步驟劃分不同的等級的方式

case1:

//剛註冊

;case2:

//已經接收到了響應報文的報文頭

xhr.

open()

;case3:

// 此時如果獲取響應報文的話,可能會不完整,不適合在這裡處理響應體

case

4:

<

!doctype html>

"en"

>

"utf-8"

>

ajax傳送get請求並傳遞引數<

/title>

<

/head>

'list'

>

<

/ul>

// 獲取dom物件

var listelement = document.

getelementbyid

('list');

//傳送請求,獲取列表資料

;// 後面的是我們的處理檔案

// //?後面傳引數

// xhr.open('get', 'users.php?id=2');

// xhr.send(null);

// xhr.onreadystatechange = function ()

<

/script>

<

/body>

<

/html>

當然,除了get方法之外,post方法也可以

但是post方法需要新增一行**

post方法對於傳遞的參數量沒有限制,但是比get方法要慢

xhr.

setrequestheader

('content-type',)

;

例項如下
<

!doctype html>

"en"

>

"utf-8"

>

ajax傳送post請求<

/title>

#loading

#loading:

:after

<

/style>

<

/head>

"loading"

>

<

/div>

"1">

使用者名稱<

/td>

"text" id=

"username"

>

<

/td>

<

/tr>

密碼<

/td>

"password" id=

"password"

>

<

/td>

<

/tr>

<

/td>

"btn"

>登入<

/button>

<

/td>

<

/tr>

<

/table>

var btn = document.

getelementbyid

('btn');

var txtusername =document.

getelementbyid

('username');

var txtpassword = document.

getelementbyid

('password');

var loading = document.

getelementbyid

('loading');

btn.

onclick

=function()

&password=$`

);xhr.

readystatechange

=function()

}<

/script>

<

/body>

<

/html>

Ajax 使用jQuery 實現Ajax

get post 方式 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title document title 6head 7 script type text j ascript src jquery.js script 8...

Ajax的基本使用

後台 根據檢測室,獲取員工 responsebody public string selectpersoninfobylabid requestparam string labid,model model 或者 return json.tojsonstring list,serializerfeat...

AJAX 的使用步驟

step1 建立乙個 ajax 物件 step2 配置資訊,請求型別和請求位址 step3 傳送請求 xhr.send step4 拿到響應結果 xhr.onload function 第二步 第一種方式 設定請求內容型別 xhr.setrequestheader content type xhr....