原生JavaScript ajax總結 - post get 傳參及文件上傳

一、原生js創建ajax

分一下幾步：

1.創建XMLHttpRequest對象

var xhr = new XMLHttpRequest();

 

2.設置請求成功后的操作

xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { obj.success('登錄成功'); } } };

 

3.使用open方法打開請求

xhr.open('POST', 'service/login', true); // 三個參數分別是：1.請求方式 2.請求路徑 3.是否發起異步請求

 

4.發起請求

xhr.send('name=jack&age=22'); 

完整的步驟如下：

       var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { alert('登錄成功'); } } }; xhr.open('POST', 'service/login', true);

　　xhr.send(JSON.stringify({name: 'jack', age: 22}));

 

Post Get傳參區別

Post

傳參需要放在send()方法中，如果傳的是的json格式，需要用JSON.stringify()來包裹起來

 

xhr.send(JSON.stringify({name: 'jack', age: 22}));

 

如果向后台傳遞json格式的參數，需要這樣設置請求頭：

xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({name: 'jack', age: 22}));

如果傳遞formdata格式的參數，這樣設置：

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('name=jack&age=22');

 

Get

傳參需要拼接在open方法中的請求地址后面：

open('GET', 'url?name=jack&age=22', true);

 

完整代碼：

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { alert('登錄成功'); } } }; xhr.open('GET', 'url？name=jack&age=22', true); 　 xhr.send();

 

 

二、Post Get 請求方式的簡單封裝

Post請求方式封裝：

 

function postAjax(obj) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { obj.success('登錄成功'); } } }; xhr.open('POST', obj.url, true);
　　　// 如果后台接收的是json格式數據，需要這樣設置請求頭 　　xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify(obj.data)); } postAjax({ url: 'http://172.17.60.20:380/services/1.0.0/login/login', data: {userName: 'tim', userPass: 123456}, success: function() { alert('登錄成功'); } });

 

執行代碼后發送參數的格式如下：

 

 

如果后台接收的是form data格式的傳參，需要這樣設置請求頭 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

 

function postAjax(obj) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { obj.success('登錄成功'); } } }; xhr.open('POST', obj.url, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(obj.data); } postAjax({ url: 'http://172.17.60.20:380/services/1.0.0/login/login', data: 'userName=tim&userPass=123456', success: function() { alert('登錄成功'); } });

 

執行代碼后，參數格式如下：

 

Get請求封裝

 

function getAjax(obj) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { obj.success('登錄成功'); } } }; xhr.open('GET', obj.url+obj.data, true); xhr.send(); // 參數已放在url中，此處不傳任何參數
 } getAjax({ url: 'http://172.17.60.20:380/services/1.0.0/login/login？', data: 'userName=tim&userPass=123456', success: function() { alert('登錄成功'); } });

 

 

三、上傳文件

Html: <input type="file" name="" id="file"> Js: var file = document.getElementById('file'); file.onchange = function(e) { var files = e.target.files[0]; var formData = new FormData(); formData.append('file', files); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { console.log(222); } } }; xhr.open('POST', 'url' , true); xhr.send(formData); // 將formData直接傳入，不需加JSON.stringify()
 }