讓面試中的Ajax、跨域和前端算法見鬼去吧

前言： 小白秋招準備第三彈...此次主要總結和複習了ajax請求以及跨域的一些問題。由於實習後，直接用Jquery或axios發送請求，原生的方法都有點生疏了，再次複習。另外，還總結了一些面試常見的算法問題，關於算法我會堅持練習並記錄下較好的點並不斷在github更新。 一塊兒找工做的、喜歡的小夥伴歡迎Star

GitHub 地址傳送門

Ajax && Jsonp跨域

Ajax

經過Jquery或者axios發送Ajax請求

//jquery
$.get('//discovery.vip.com',{
    'click':3,
    'name':'job'
},(data) => {
    console.log(data);
})

// $.get() 與 $.post()基本一致，第一個參數url，第二個參數是數據(可選)
// 第三個參數是回調函數

//axios 與juqery很類似，只不過它是支持Promise的一種方法
axios.get('//discovery.vip.com').then((data)=>{
    console.log(data);
}).catch(error) {
    console.log(error);
}

//可選請求
axios.get('//discovery.vip.com',{
    params:{
        id:12345
    }
}).then((data)=>{
    console.log(data);
}).catch(err => {
    console.log(err);
})

複製代碼

原生Ajax方法

原生Ajax是創建在XMLHttpRequest請求上，這個現代瀏覽器支持，不支持的話，得使用ActiveX對象 new一個對象

if(window.XMLHttpRequest) {
    var Req = new XMLHttpRequest();
}else {
    var Req = new ActiveX('Microsoft.XMLHTTP');
}
複製代碼

對象創建好以後，即便發送請求了open()和send() 其中open規定格式，send()正式發送

//get方法
//get方法，send不須要加內容，open的第三個參數表示是否異步，默認爲true
Req.open('get','//discovery.vip.com',true);
Req.onreadystatechange = function() {
    if(Req.readyState === 4 && Req.status === 200) {
        document.getElementById('root').innerHtml = Req.responseText;
    }
}
Req.send();

//post
Req.open('post','//discovery.vip.com',true);
Req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
Req.onreadystatechange = function() {
    if(Req.readyState === 4 && Req.status === 200) {
        document.getElementById('root').innerHtml = Req.responseText;
    }
}
Req.send("fname=Henry&lname=Ford");
複製代碼

注意這裏post的方法設置了請求頭，這裏對請求頭簡單說一下

1. Content-type,application/x-www-form-urlencoded 的方式

這種方式最多見的方式，原生form表單的提交方式。 提交的時候，將會以key1=value&key2=value&key3=value的方式進行編碼

2. multipart/form-data

這個看起來也是比較熟悉的，由於的確也很常見呀~ 當要使用文件上傳組件時，必須讓form的entyped的值等於這個

3. application/json格式

這個就是json的格式，用來告訴服務器消息主體是序列化後的JSON字符串

跨域

跨域最簡單、乾淨的方式，應該是W3C規定的CROS跨域了。 這個在使用fidder進行抓包調試的時候，使用filter來處理跨域的問題，算是很方便了。

方法就是在返回數據上加個頭 set Response header

Access-Control-Allow-Origin,* 這個表示容許任意域名跨域

Access-Control-Allow-Origin,192.168.1.110:8080容許指定域名跨域

固然這個不是重點，下面主要說一下Jsop的跨域

Jsonp

Jsonp跨域也是須要後端服務器配合的，原來就是雖然Ajax請求不容許跨域，可是<script>、<img>等是能夠跨域的

//jquery封裝的跨域

$.ajax({
    url:'//discovery.vip.com',
    method: 'GET',
    dataType: 'jsonp',
    success: function (data) {
        var result = JSON.stringify(data);
        $('#test').val(result);
    }

})

複製代碼

注意：JSONP的一個限制，就是隻能使用get請求，由於<script src>就支持get請求呀。

好了，以上的方法會返回一個隨機的函數名，Jquery內部處理獲得。若是想要本身規定，也是能夠的

$.ajax({
    url:'//discovery.vip.com',
    method:'GET',
    dataType:'jsonp',
    jsonpCallback:'showData',
    success:function(data) {
        console.log('success')
    }
})

function showData(data) {
    var result = JSON.stringify(data);
    $("#test").val(result);
}
複製代碼

這裏就能夠看的更清楚一些了，其實返回的數據是showData({...})。 由於咱們設置了函數，因此就直接執行函數。

就是由於這樣的道理，咱們徹底能夠本身作一個script標籤，動態添加src來請求數據，實現本身的jsonp。

算法

統計數字

問題描述

計算數字k在0到n中的出現的次數，k多是0~9的一個值

例如n=12，k=1，在 [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]，咱們發現1出現了5次 (1, 10, 11, 12)

解析： 最簡單的方法就是遍歷了，固然高級方法這裏不探討。那麼簡單的遍歷又有什麼問題呢？ 那就是遇到了好比111這樣的數字。

咱們可使用indexOf來判斷是否出現過，可是出現了多少次該怎麼判斷？

說一個思路，使用split方法，具體實現以下

const digitCounts = function (k, n) {
    let num = 0;
    for(let i = 0; i<=n;i++){
        if(String(i).indexOf(k) !== -1) {
            num += (String(i).split(k).length-1)
        }
    }
    return num
}
複製代碼

題目地址(lintcode)

快速排序和二分查找

通常的排序，使用Array.sort()能夠很方便的解決，因此對於前端來講，主要掌握快排和二分查找是基礎和必要的。其餘的能夠有興趣再研究好了

快排

只用遞歸實現，基本思路：

1. 拿出一個數字；
2. 逐一和剩下數字比較，比這個數字小的放左邊，大的放右邊
3. 對左邊和右邊再使用一樣的比較方法
4. 直到比較結束

代碼實現以下：

function quickSort(arr) {
    if(arr.length <= 1) {
        return arr;
    }
    let left = [];
    let right = [];
    let cur = arr.splice(0,1);
    for(let i = 0; i<arr.length; i++) {
        if(arr[i] < cur) {
            left.push(arr[i])
        } else {
            right.push(arr[i])
        }
    }
    return quickSort(left).concat(cur,quickSort(right));
}

複製代碼

二分查找

原理很簡單了，就是找中間數，複雜度(log(N))，前提是必須在有序數列中查找

1. 在一個範圍內，將target與中間值比較
2. 若是大了，在大的範圍進行查找；若是小了，在小的範圍查找；
3. 重複上面的方法

用兩種方法，一種是循環，一種是遞歸來實現

//循環實現
function binarySearch(arr,target) {
    let low = 0;
    let high = arr.length - 1;
    while(low <= high) {
        let mid = parseInt((high+low)/2);
        if(target === arr[mid]) {
            return `找到了${target},位置在${mid}`
        } else if (target > Math.floor(high/2)) {
            low = mid+1;
        } else {
            high = mid-1;
        }
    }
    return false;
}
複製代碼

這裏須要注意low high的取值和變化

1. 中間值的取法`parseInt((high+low)/2)
2. 當在另外一個區間的時候，不能用low = mid或high=mid，由於這樣邊界值就會進入死循環。

//遞歸的方法
function binarySearch(arr,target,low,high) {
    let mid = parseInt((low+high)/2);
    if(arr[mid] === target) {
        return `找到了${target},位置在${mid}`
    } else if(target > arr[mid]) {
        return binarySearch(arr,target,mid+1,high)
    } else {
        return binarySearch(arr,target,low,high-1)
    }
    return -1
}
複製代碼

二分查找真題，尋找二維數組內的值

在一個二維數組中，每一行都按照從左到右遞增，每一列都從上到下遞增的順序排序，完成一個函數，輸入這個二維數組和一個整數，判斷數組中是否含有該整數

思路是同樣的，只不過從一維變成了二維，咱們遍歷思路能夠這樣子：

1. 選取第一行的最後一個進行判斷(這個是第一行中最大的)
2. 若是目標大於該值，行數加1，遍歷第二行(由於每列都是遞增的)
3. 若是目標小於該值，則在這一行中進行查找
4. 循環以上步驟

function findTarget(arr,target) {
    let i = 0; 
    let j = arr[i].length -1;
    while(i < arr.length && j>=0) { //i是隻增不減的，j是隻減不增的，就是從矩陣右上角向下查找的過程
        if(target < arr[i][j]) {
            j--;
        } else if (target > arr[i][j]) {
            i++;
        } else {
            return `找到了，位置在${i},${j}`
        }
    }
    return `(${i},${j})`
}

arr=[
[1,2,3,4],
[5,9,10,11],
[13,20,21,23]]  //測試
複製代碼

後記

嗯..今天先到這裏吧

算法算是比較頭疼的，由於非科班出身，對於前端算法的深度過深對於實際效率而言並不高(爲了之後深刻發展固然要好好研究，但是若是爲了近期秋招、面試，彷佛不如適可而止，花更多時間在應該的地方上)

因此後期會積累常見、常考的算法題目，一一記錄，共同成長... 明天再更