js 原生实现 jquery ajax 主要依靠 XMLHttpRequest 对象,该对象使用如下
1、介绍
创建 XMLHttpRequest 对象的语法:
xmlhttp = new XMLHttpRequest()
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
2、get 请求方式实现
function get(option) {
//拼接请求参数
var param = ''
if (option.data != {} && option.data != null) {
var keys = Object.keys(option.data)
for (var k of keys) {
param = param + k + '=' + option.data[k] + '&'
}
param = '?' + param.substring(0,param.length-1)
}
//创建对象
var xhr = new XMLHttpRequest()
xhr.open('get', option.url + param, option.async)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
//将返回的字符串状成json对象
var res = JSON.parse(xhr.responseText)
option.success(res)
}
}
xhr.send()
}
使用方式
get({
url: 'http://localhost:8089/p/fgetFileList',
async: true,
data: {
name: '独孤求败'
},
success:function(res){
console.log(JSON.stringify(res))
}
})
3、post 请求方式实现
function post(option){
//拼接参数
var param = ''
if (option.data != {} && option.data != null) {
var keys = Object.keys(option.data)
for (var k of keys) {
param = param + k + '=' + option.data[k] + '&'
}
param = param.substring(0,param.length-1)
}
var xhr = new XMLHttpRequest()
xhr.open('post', option.url, option.async)
//post请求设置请求头content-type
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var res = JSON.parse(xhr.responseText)
option.success(res)
}
}
xhr.send(param)
}
使用方式
post({
url: 'http://localhost:8089/p/file/',
async: true,
data: {
name: '独孤求败'
},
success:function(res){
console.log(JSON.stringify(res))
}
})
4、总结
看过我上边的封装,其实就是将请求相关设置以 option 的形式设置到函数中,get请求在url后拼接参数;post请求在send中发送参数