原生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()
 }