前端面試集合貼（三）

來自專欄猿的頭腦風暴

【JS Prototype】

定義和用法

object.prototype.name=value

實例

function employee(name,job,born){this.name=name;this.job=job;this.born=born;}var bill=new employee("Bill Gates","Engineer",1985);employee.prototype.salary=null;bill.salary=20000;document.write(bill.salary);

輸出：

文章來源：JavaScript prototype 屬性

【如何創建原生Ajax對象】

XMLHttpRequest 對象

　　XMLHttpRequest對象是ajax的基礎,XMLHttpRequest 用於在後台與伺服器交換數據。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。目前所有瀏覽器都支持XMLHttpRequest

方 法描 述abort()停止當前請求 getAllResponseHeaders()把HTTP請求的所有響應首部作為鍵/值對返回getResponseHeader("header")返回指定首部的串值open("method","URL",[asyncFlag],["userName"],["password"]) 建立對伺服器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否非同步，用戶名，密碼send(content)向伺服器發送請求setRequestHeader("header", "value")把指定首部設置為所提供的值。在設置任何首部之前必須先調用open()。設置header並和請求一起發送 (post方法一定要 )

五步使用法:

　　1.創建XMLHTTPRequest對象

　　2.使用open方法設置和伺服器的交互信息

　　3.設置發送的數據，開始和伺服器端交互

　　4.註冊事件

　　5.更新界面

下面給大家列出get請求和post請求的例子

get請求:

//步驟一:創建非同步對象var ajax = new XMLHttpRequest();//步驟二:設置請求的url參數,參數一是請求的類型,參數二是請求的url,可以帶參數,動態的傳遞參數starName到服務端ajax.open(get,getStar.php?starName=+name);//步驟三:發送請求ajax.send();//步驟四:註冊事件 onreadystatechange 狀態改變就會調用ajax.onreadystatechange = function () { if (ajax.readyState==4 &&ajax.status==200) { //步驟五 如果能夠進到這個判斷 說明 數據 完美的回來了,並且請求的頁面是存在的　　　　console.log(ajax.responseText);//輸入相應的內容 　　}}

post請求:

//創建非同步對象 var xhr = new XMLHttpRequest();//設置請求的類型及url//post請求一定要添加請求頭才行不然會報錯xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.open(post, 02.post.php );//發送請求xhr.send(name=fox&age=18);xhr.onreadystatechange = function () { // 這步為判斷伺服器是否正確響應 if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } };//為了方便使用,我們可以把他封裝進方法裡面,要用的時候,直接調用就好了function ajax_method(url,data,method,success) { // 非同步對象 var ajax = new XMLHttpRequest(); // get 跟post 需要分別寫不同的代碼 if (method==get) { // get請求 if (data) { // 如果有值 url+=?; url+=data; }else{ } // 設置 方法 以及 url ajax.open(method,url); // send即可 ajax.send(); }else{ // post請求 // post請求 url 是不需要改變 ajax.open(method,url); // 需要設置請求報文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 判斷data send發送數據 if (data) { // 如果有值 從send發送 ajax.send(data); }else{ // 木有值 直接發送即可 ajax.send(); } } // 註冊事件 ajax.onreadystatechange = function () { // 在事件中 獲取數據 並修改界面顯示 if (ajax.readyState==4&&ajax.status==200) { // console.log(ajax.responseText); // 將 數據 讓 外面可以使用 // return ajax.responseText; // 當 onreadystatechange 調用時 說明 數據回來了 // ajax.responseText; // 如果說 外面可以傳入一個 function 作為參數 success success(ajax.responseText); } }}

文章來源：原生js的ajax請求 - Cynthia-milk - 博客園