一、Ajax开源库有很多选择,大家可以根据需求自己选择
-
jQuery:jQuery是一个广泛应用的JavaScript库,它提供了简洁而强大的API来处理Ajax请求。通过
$.ajax()
方法或其简化的$.get()
和$.post()
方法,可以轻松地发送异步请求和处理服务器响应。 -
Axios:Axios是一个基于Promise的现代化HTTP客户端,用于浏览器和Node.js。它提供了简洁的API来处理Ajax请求,支持并发请求、请求拦截、请求取消等功能,使用起来非常方便。
-
Fetch API:Fetch API是一种现代的原生JavaScript API,用于发起网络请求。它提供了更直接的方式来发送Ajax请求,并且支持Promise,可以更方便地处理异步操作。
-
Superagent:Superagent是一个流行的HTTP请求库,适用于浏览器和Node.js环境。它提供了链式调用的API,支持各种HTTP方法、文件上传、Cookie管理等功能。
-
Axios、Fetch API和Superagent都是适用于浏览器和Node.js的通用HTTP请求库,支持跨平台使用。
这只是一小部分常用的Ajax开源库,根据具体需求和项目的特点,你还可以根据功能、性能、维护活跃度等因素选择其他合适的库来处理Ajax请求。甚至自己封装适用自己的Ajax。
二、以下是一个简单的Ajax进行数据请求的方法。
-
创建 XMLHttpRequest 对象:在JavaScript中,使用
new XMLHttpRequest()
来创建一个XMLHttpRequest对象。 -
设置请求的参数:使用
open()
方法设置HTTP请求的方法(GET或POST)和URL。例如,xhr.open('GET', 'http://example.com/data', true)
表示使用GET方法发送请求到"http://example.com/data",第三个参数为true表示使用异步请求。 -
设置响应处理函数:使用
onreadystatechange
属性指定一个回调函数来处理服务器响应。可以通过判断readyState
和status
属性来确定请求的状态和是否成功。当readyState
为4且status
为200时表示请求成功,可以处理服务器返回的数据。xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 处理服务器返回的数据 // ... } };
- 发送请求:使用
send()
方法发送请求。对于GET请求,可以将参数附加在URL上,例如,xhr.send(null)
;对于POST请求,可以将参数作为send()
方法的参数发送,例如,xhr.send(data)
。
//完整的示例代码如下:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 处理服务器返回的数据
// ...
}
};
xhr.send(null);
注意:由于跨域安全策略限制,Ajax请求只能向同源(即协议、域名和端口都相同)的服务器发送请求。如果需要向不同域的服务器发送Ajax请求,可以使用JSONP、CORS或使用代理服务器等方法解决跨域问题。
那么,如果上面的库你不会使用,甚至说不知道它的原始逻辑,那么,我来教你封装一个简单的Ajax吧,后面再根据自己的需求
底层逻辑
//1.创建对象
let xhq = new XMLHttpRequest()
//2.初始话http请求参数
xhq.open(methode, url, true)
//3.发送请求
xhq.send({
username:'wzx'
})
//4.监听请求状态,执行对应的回调函数
xhq.onreadystatechange = function () {
if ( xhq.readystate == 4 && xhq.status == 200 ) {
// success 回调
success(xhq.responseText)
} else if (xhq.readyState == 4 && xhq.status !== 200) {
// error 回调
error()
}
}
//-----------完整实现-----------
function sendAjax(obj) {
function splicStr(data) {// get方式传入时,将内容进行data内容进行拼接
var str = ''
for (var i in data) {
str = i + '=' + data[i]
}
return str
}
原生Ajax实现
// 原生ajax实现 步骤分析
// 一、声明XMLHttpRequest, 为了兼容IE5、6需要使用ActiveXObject()
let xhq = new XMLHttpRequest() // 创建对象
// 二、初始化HTTP请求参数, 只初始化并不会发送
if (obj.method.toUpperCase() === 'GET') { // get方法
xhq.open(obj.method, obj.url + '?' + splicStr(obj.data), typeof obj.async === 'boolean'? obj.async : true) // 路径拼接
xhq.send()// 三、发送此次请求
}
else if (obj.method.toUpperCase() === 'POST') { // post方法
xhq.open(obj.method, obj.url, typeof obj.async === 'boolean'? obj.async : true)
xhq.setRequestHeader("content-type","application/x-www-form-urlencoded") // 以表单提交
xhq.send(obj.data)// 三、发送此次请求
}
//四、监听发送
xhq.onreadystatechange = function () {
if ( xhq.readyState == 4 && xhq.status == 200 ) {
// success 回调
success(xhq.responseText)
} else if (xhq.readyState == 4 && xhq.status !== 200) {
// error 回调
error()
}
}
}
//使用
sendAjax({
url: 'your url',
method: 'post',
async: true,
data: {
username: 'xiong',
pwd: '123'
},
success: function (data) {
console.log(data)
},
error: function () {
console.log('发生了错误')
}
})
再次注意:由于跨域安全策略限制,Ajax请求只能向同源(即协议、域名和端口都相同)的服务器发送请求。如果需要向不同域的服务器发送Ajax请求,可以使用JSONP、CORS或使用代理服务器等方法解决跨域问题。
标签:obj,请求,data,xhq,xhr,Ajax,数据 From: https://www.cnblogs.com/ml-blog/p/Ajax.html