AJAX即“AsynchronousJavascript And XML”(异步JavaScript和XML),是指一种创建交互式[网页]
应用的网页开发技术。
AJAX = 异步 [JavaScript]和[XML]([标准通用标记语言])的子集)。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。[1]
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
// 函数封装的是代码,采用面向对象的形式封装
(function () {
var a = 100;
// 暴露出ajax接口
ajax = window.ajax = {}
// 增加1个方法: get方法
/*
* 参数:
* obj 是1个对象,代表参数的集合,里面有很多参数,如下所示:
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
*/
ajax.get = function(obj) {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
url += "?"
url += translate(obj.data);
function translate(obj){
var str = ""
for(var i in obj){
str += i
str += "="
str += encodeURIComponent(obj[i])
str += "&"
}
str = str.substring(0,str.length-1)
return str
}
xhr.open("GET", url, obj.async);
xhr.send()
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
// 增加1个方法: post方法
/*
* 参数:
* obj 是1个对象,代表参数的集合,里面有很多参数,如下所示:
* url 请求的地址与参数
* data 发送的数据
* async 是否是同步, true / false
* fail 失败的处理回调函数
* success 成功的处理回调函数
*/
ajax.post = function(obj) {
if (obj.async == undefined) {
obj.async = true;
}
if (obj.data == undefined) {
obj.data = "";
}
var xhr = new XMLHttpRequest();
var url = obj.url;
xhr.open("POST", url, obj.async);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(obj.data)
if (obj.async == true) {
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
} else {
// 同步方式
if (xhr.status == 200) {
var str = xhr.responseText;
obj.success && obj.success(str);
} else {
obj.fail && obj.fail();
}
}
}
})();
网友评论