怎么用原生JS实现类似jQuery的ajax

JavaScript011

怎么用原生JS实现类似jQuery的ajax,第1张

建议你这样试试看:

ajax函数:

function ajax(opt) {

opt = opt || {}

opt.method = opt.method.toUpperCase() || 'POST'

opt.url = opt.url || ''

opt.async = opt.async || true

opt.data = opt.data || null

opt.success = opt.success || function () { }

var xmlHttp = null

if (XMLHttpRequest) {

xmlHttp = new XMLHttpRequest()

}

else {

xmlHttp = new ActiveXObject('Microsoft.XMLHTTP')

} var params = []

for (var key in opt.data) {

params.push(key + '=' + opt.data[key])

}

var postData = params.join('&')

if (opt.method.toUpperCase() === 'POST') {

xmlHttp.open(opt.method, opt.url, opt.async)

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencodedcharset=utf-8')

xmlHttp.send(postData)

}

else if (opt.method.toUpperCase() === 'GET') {

xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async)

xmlHttp.send(null)

}

xmlHttp.onreadystatechange = function () {

if (xmlHttp.readyState == 4 &&xmlHttp.status == 200) {

opt.success(xmlHttp.responseText)

}

}

}

2.参数说明(清渭技术--www.qingwei.tech):

3.使用示例:

ajax({

method: 'POST',

url: 'post.php',

data: {

param1: 'value1',

param2: 'value2',

},

success: function (response) {

console.log(response)

}

})

PS:希望本文对你有所帮助~qingwei.tech

它的底层实现包括下面几个方面:1.jQuery底层在实现ajax功能时,调用了浏览器中的XMLHttpRequest对象,在最新的2.0版本后,由于不考虑IE浏览器的支持,直接使用该对象获取用户请求的数据,包括地址和参数等。2.它将对象打开请求地址时的相关参数封装在相关函数如ajax()的配置项中,一旦传入了必需选项,则直接调用相应的send()方法进行数据的请求。3.jQuery底层将对象请求后返回的数据结果,直接封装到相关函数的success方法中,所以,一旦异步请求成功,返回的数据对象直接注入到方法中,因此,可以调用success方法获取服务端返回的数据。我之前在黑马程序员的免费视频中看到过ajax和jQuery的相关视频,讲的都还挺不错的。