怎么用原生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

建议用jquery写ajax,用原生js写ajax难度有点大。

jQuery - AJAX get() 和 post() 方法。没使用缓存技术的话可以直接用post代替get。

Query $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。与$.get()方法的区别是$.post()可以发送参数到服务器,服务器进行处理后再放回数据

语法:$.post(URL,data,callback)

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

注意:

实例:

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

},

function(data,status){

alert("Data: " + data + "\nStatus: " + status)

})

})

程序员书库w3c   问您解答。

XMLHttpRequest这个对象的属性有:

onreadystatechange 每次状态改变所触发事件的事件处理程序;

responseText 从服务器进程返回数据的字符串形式;

responseXML 从服务器进程返回的DOM兼容的文档数据对象;

status 从服务器返回的数字代码,常见的200(客户端请求成功,已就绪)和404(请求资源不存在)

statusText 伴随状态码的字符串信息 (eg:200 OK)

readyState 对象状态值

0(未初始化状态)对象已建立或已被abort()方法重置,尚未调用open方法。

1(初始化状态)open()方法已经调用,但是send()方法为调用。请求还没有被发送。

2(发送数据)send()方法法以调用,HTTP请求已发送到Web服务器。未接收到响应。