原生js實現常用的HTTP請求(GET、POST)

####　原生js實現常用的HTTP請求(GET、POST)

// 常用工具函數
var tools = {


	/* ajax請求get
     * @param url     string   請求的路徑
     * @param query   object   請求的參數query
     * @param succCb  function 請求成功之後的回調
     * @param failCb  function 請求失敗的回調
     * @param isJson  boolean  true： 解析json  false：文本請求  默認值true
     */
    ajaxGet: function (url, query, succCb, failCb, isJson) {
        // 拼接url加query
        if (query) {
            var parms = tools.formatParams(query);
            url += '?' + parms;
            // console.log('-------------',url);
        }

        // 1、創建對象
        var ajax = new XMLHttpRequest();
        // 2、建立連接
        // true:請求爲異步  false:同步
        ajax.open("GET", url, true);
        // ajax.setRequestHeader("Origin",STATIC_PATH); 

        // ajax.setRequestHeader("Access-Control-Allow-Origin","*");   
        // // 響應類型    
        // ajax.setRequestHeader('Access-Control-Allow-Methods', '*');    
        // // 響應頭設置    
        // ajax.setRequestHeader('Access-Control-Allow-Headers', 'x-requested-with,content-type');  
        // ajax.withCredentials = true;
        // 3、發送請求
        ajax.send(null);

        // 4、監聽狀態的改變
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4) {
                if (ajax.status === 200) {
                    // 用戶傳了回調才執行
                    // isJson默認值爲true，要解析json
                    if (isJson === undefined) {
                        isJson = true;
                    }
                    var res = isJson ? JSON.parse(ajax.responseText == "" ? '{}' : ajax.responseText) : ajax.responseText;
                    succCb && succCb(res);
                } else {
                    // 請求失敗
                    failCb && failCb();
                }

            }
        }


    },
    
    
    	/* ajax請求post
     * @param url     string   請求的路徑
     * @param data   object   請求的參數query  
     * @param succCb  function 請求成功之後的回調
     * @param failCb  function 請求失敗的回調
     * @param isJson  boolean  true： 解析json  false：文本請求  默認值true
     */
    ajaxPost: function (url, data, succCb, failCb, isJson) {
    
        var formData = new FormData();
        for (var i in data) {
            formData.append(i, data[i]);
        }
        //得到xhr對象
        var xhr = null;
        if (XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");

        }

        xhr.open("post", url, true);
		// 設置請求頭  需在open後send前
		// 這裏的CSRF需自己取後端獲取，下面給出獲取代碼
        xhr.setRequestHeader("X-CSRFToken", CSRF);

        xhr.send(formData);

        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    // 判斷isJson是否傳進來了
                    isJson = isJson === undefined ? true : isJson;
                    succCb && succCb(isJson ? JSON.parse(xhr.responseText) : xhr.responseText);
                }
            }
        }

    },

}



// 調用
// 接口地址
let url = ""
// 傳輸數據 爲object
let data = {}

tools.ajaxGet(url, data, function(res){
	console.log('返回的數據:',res)
	// ....
})

CSRF獲取的代碼

• 這裏以Django爲例

from django.template.context_processors import csrf

def get_csrf(request):
    # 生成 csrf 數據，發送給前端
    x = csrf(request)
    csrf_token = x['csrf_token']
    # 這裏的csrf_token 是一個對象 需要強轉一下
    print('csrf_token:',csrf_token)
    return AccessReturn({'code': 0, 'msg': 'success', 'data': str(csrf_token)})
 

# 允許跨域
def AccessReturn(result_dict):
    response = HttpResponse(json.dumps(result_dict))
    response["Access-Control-Allow-Origin"] = " * "
    response["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"
    response["Access-Control-Max-Age"] = "1000"
    response["Access-Control-Allow-Headers"] = '*'
    return response

CORS (Corss-Orign Resource Sharing) 跨域

Name	Required	Comments
Access-Control-Allow-Origin	必填	允許請求的域，比如：localhost或者；* 所有都允許
Access-Control-Allow-Methods	必填	允許請求的方法，比如：get、post、put、delete，多個用逗號分割；*允許所有
Access-Control-Allow-Headers	可選	預檢請求後，告知發送請求需要有的頭部
Access-Control-Expose-Headers	可選	自定義字段；CORS請求時，xmlhttprequest默認只能拿到6個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必須在Access-Control-Expose-Headers裏面指定
Access-Control-Max-Age	可選	本次預檢的有效期，單位：秒；在有效期內不需要發出另一條預檢
Access-Control-Allow-Credentials	可選	表示是否允許發送cookie，默認false；比如put或delete，如果content-type爲 application/json等的有特殊要求，需要設置爲true