脚本宝典收集整理的这篇文章主要介绍了如何实现Ajax?它的原理是什么?,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Ajax全称 Async JavaScript and XML,也就是异步的 JavaScript 和 XML,是一种创建交互式网页应用的网页开发技术。可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页。
简单来说,就是通过 XmlHttpRequest 对象向服务器发送异步请求,从服务器获得数据,然后使用 Javascript 来操作 DOM 从而更新页面。流程图如下所示:
实现 Ajax 异步交互需要服务器逻辑进行配合,需要完成一下步骤:
综合一下就是:
const xhr = new XMLHttpRequest();
xhr.open(method,url,[async][, user][, password])
参数详解:
xhr.send([body])
绑定 onreadstatechange 事件;
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT(未打开) | open() 方法还未被调用 |
1 | OPENED(未发送) | send() 方法还未被调用 |
2 | HEADERS_RECEIVED(已获取响应头) | send() 方法已经被调用,响应头和响应状态已经返回 |
3 | LOADING(正在下载响应体) | 响应体下载中,responseText 中已经获取了部分数据 |
4 | DONE(请求完成) | 整个请求过程完毕 |
了解过后来封装一个简单的ajax请求:
// 封装一个 ajax 请求
function ajax(options) {
// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest()
// 初始化参数的内容
options = options || {}
options.type = (options.type || 'GET').toUpperCase()
options.dataType = options.dataType || 'json'
const params = options.data
// 发送请求
if (options.type === 'GET') {
xhr.open('GET', options.url + '?' + params, true)
xhr.send(null)
} else if (options.type === 'POST') {
xhr.open('POST', options.url, true)
xhr.send(params)
}
// 接收请求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
let status = xhr.status
if (status >= 200 && status < 300) {
options.success && options.success(xhr.responseText, xhr.responseXML)
} else {
options.fail && options.fail(status)
}
}
}
}
使用方法:
ajax({
type: 'GET',
dataType: 'json',
data: {},
url: 'https://',
// 请求成功后的回调
success: function(text, xml) {
console.log(text);
},
// 请求失败后的回调
fail: function(status) {
console.log(status);
}
});
这里是万物之恋,我们下次再见了!
以上是脚本宝典为你收集整理的如何实现Ajax?它的原理是什么?全部内容,希望文章能够帮你解决如何实现Ajax?它的原理是什么?所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。