AJAX
一、简介
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
- 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
二、XMLHttpRequest 对象
定义及作用:用于在后台与服务器交换数据
- 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
- XMLHttpRequest 对象的属性和方法用于请求、响应、回调等,下面会详细介绍。
创建 XMLHttpRequest 对象
- 所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建
XMLHttpRequest
对象。var xhr = new XMLHttpRequest();
- 老版本的 Internet Explorer (IE5 和 IE6)使用
ActiveX
对象:var xhr = new ActiveXObject("Microsoft.XMLHTTP");
三、向服务器发送请求
需要使用 XMLHttpRequest 对象的 open() 和 send() 方法:
-
open(method,url,async)
:规定请求的类型、URL 以及是否异步处理请求。method
:请求的类型;GET 或 POST。
url
:文件在服务器上的位置 。
async:true
(异步)或 false(同步)。 -
send()
:将请求发送到服务器。GET 请求不需要带参数;
POST 请求需要带上参数 data(请求的数据)。
GET 还是 POST
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
四、服务器响应
获得来自服务器的响应,需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性:
responseText
:返回字符串形式的响应。如果来自服务器的响应并非 XML,请使用 responseText 属性。
document.getElementById("myDiv").innerHTML = xhr.responseText;
responseXML
:获得 XML 形式的响应数据。如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
xmlDoc = xhr.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
txt = txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML = txt;
五、回调
当服务器响应时,需要执行相关任务。这个时候需要使用 XMLHttpRequest 对象的 onreadystatechange 事件。
onreadystatechange
:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState
:XMLHttpRequest 请求的状态。
- 0:请求未初始化
- 1:服务器连接已建立
- 2:请求已接收
- 3:请求处理中
- 4:请求已完成,且响应已就绪
status
:响应的状态
- 200:响应成功
- 404:未找到页面
- 500:服务器内部错误
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText)
}
else {
alert('网络请求失败!')
}
}
}
六、封装 ajax
/**
* @description ajax请求
* @param {Object} param 请求相关数据
*/
function ajax(param) {
// 初始化数据
var method = param.method || 'GET'
var url = param.url || ''
var data = param.data || {}
var async = param.async || true
var success = param.success
var error = param.error
var complete = param.complete
// 1.获取对象
var xhr = null
try {
xhr = new XMLHttpRequest()
}
catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP') // 兼容 IE5、IE6
}
// 2.设置请求信息 ---> 请求方式、路径、数据、是否异步
if (data && method === 'GET') {
url += '?' + _util.object.serialize(data) // 序列化对象,参照 https://blog.csdn.net/guang_s/article/details/87364440
}
xhr.open(method, url, async)
// 3.发送请求
if (method === 'GET') {
xhr.send()
}
else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(data)
}
// 4.设置回调函数
xhr.onreadystatechange = function() {
// 5.判断请求是否成功
if (xhr.readyState === 4) {
// 6.判断响应是否成功
if (xhr.status === 200) {
typeof success === 'function' && success(xhr.responseText) // 响应的内容 xml.responseText
}
else {
typeof error === 'function' ? error(xhr.status) : alert('网络请求失败!')
}
typeof complete === 'function' && complete()
}
}
}