原生ajax get传参,原生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 = newXMLHttpRequest();

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 = newXMLHttpRequest();

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请求方式封装：

functionpostAjax(obj) {var xhr = newXMLHttpRequest();

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');

functionpostAjax(obj) {var xhr = newXMLHttpRequest();

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 = newXMLHttpRequest();

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:Js:var file = document.getElementById('file');

file.οnchange=function(e) {var files = e.target.files[0];var formData = newFormData();

formData.append('file', files);var xhr = newXMLHttpRequest();

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()

}