前端經典面試題 Ajax篇

2021-08-04 17:01:57 字數 2404 閱讀 9028

//onreadystatechange事件放在open()前,確保跨瀏覽器相容性

xhr.onreadystatechange = function()else}}

//啟動乙個請求以備傳送

xhr.open('get/post','example.php',true);

//設定請求頭

xhr.setrequestheader(...);

//傳送資料

xhr.send(null);

}get:一般用於資訊獲取,查詢字串引數追加在url末尾,對所傳送資訊的數量也有限制,一般在2000個字元

//向現有url末尾追加查詢字串

function

addurlparam

(url,name,value)

post:一般用於向伺服器傳送應該被儲存的資料,對所傳送的資料沒有數量和格式的限制

注:伺服器對post請求和提交web表單的請求不會一視同仁。

使用xhr來模仿表單提交

//xmlhttprequest 1級寫法

... xhr.open('post','postexample.php',true);

var form = document.getelementbyid('user-info');

xhr.send(serialize(form)); //serialize見頁末

//xmlhttprequest 2級寫法

... xhr.open('post','postexample.php',true);

var form = document.getelementbyid('user-info');

xhr.send(new formdata(form));

與get請求相比,post請求消耗的資源會更多一些,從效能角度,以傳送相同的資料比較,get的請求速度最多可達到post的兩倍。

get方式需要使用request.querystring來取得變數的值,而post方式通過request.form來獲取變數的值。

然而,在以下情況中,請使用 post 請求:

- 無法使用快取檔案(更新伺服器上的檔案或資料庫)

- 向伺服器傳送大量資料(post 沒有資料量限制)

- 傳送包含未知字元的使用者輸入時,post 比 get 更穩定也更可靠。

超時設定timeout及其事件

重寫xhr響應的mime型別 overridemimetype()

load可以替代readystatechange

progress 在接收響應期間不斷地觸發,會接收到乙個event物件,它有三個屬性:lengthcomputable(進度資訊是否可用,布林值)、position(已接收的位元組數)、totalsize(預期接收的總位元組數)。

例項:進度指示器

...

xhr.onprogress = function(event)

}...

//表單序列化  (了解)

function

serialize

(form)else

parts.push(encodeuricomponent(field.name)+"="+

encodeuricomponent(optvalue));

} }

} break;

case

undefined://預設處理

case

"file"://預設處理

case

"submit"://預設處理

case

"reset"://預設處理

case

"button"://不處理

break;

case

"radio"://預設處理

case

"checkbox":

if(!field.checked)

default://預設處理,要求必須有name屬性

if(field.name.length)

} }

return parts.join("&");

}

前端面試題 css篇

盒模型 盒模型由 margin border padding content 四個屬性組成 w3c的標準盒模型 width content,不包含 border padding ie盒模型 width border padding content 相互轉換 二者之間可以通過css3的 box siz...

前端面試題(Vue篇)

一 vue元件的scoped的作用 在style中加scoped屬性,表示它的樣式作用於當下模組,很好的實現樣式私有化的目的 但是在很多時候我們都要對公共樣式進行調整 但是寫在scoped屬性下無作用 解決方法 1 混合型使用 2 深度作用選擇器 如果想在scoped中影響到子元件的樣式可以使用 二...

經典面試題

1.以下三條輸出語句分別輸出什麼?char str1 abc char str2 abc const char str3 abc const char str4 abc const char str5 abc const char str6 abc cout boolalpha str1 str2 ...