一、ajax介绍
Ajax 是一种用于创建快速动态网页的技术。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。[百度百科]
简单的讲，ajax就是一种不需要刷新就可以实现一些交互操作的技术，例如常见的登录，密码如果错误，会有红色字提示密码错误，这种就用的ajax技术，数据验证不需要刷新浏览器，直接就进行相应的检测，并返回相应信息
二、jQuery中实现
核心部分html 代码
<body>
账号：<input type="text" name="uid" id="uid" />
<br> 密码：
<input type="password" name="pass" id="pass" />
<button id="btn">确认</button>
</body>
不设置样式的结果，顺便复习一下，input是内联块状元素，就是这两个元素的特点兼而有之，它能像内联元素一样可以与其他元素放在同一行，又与块状元素一样可以设置元素宽、高等
jQuery实现ajax，首先要页面引入jQuery才可以
$(document).ready(function() {
$("button").click(function() {
var uid = $('#uid').val();
var pass = $('#pass').val();
//ajax post 至少三个参数 url,data,成功回调函数
$.post(
"./login_confirm", {
"uid": uid,
"pass": pass
},
function(result) {
console.log(result);
}
);
});
});
当鼠标点击的时候，则会实现相应的方法。
三、JavaScript实现ajax
ajax的实现主要基于XMLHttpRequest,在不重新加载页面的情况下更新网页，在页面已加载后从服务器请求数据，在页面已加载后从服务器接收数据，在后台向服务器发送数据，所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。所以对于<--![IF LT IE6]>，需要用到ActiveXObject，所以需要先判断。
var xhr;
if (window.XMLHttpRequest) {
//如果支持XMLHttpRequest
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
接下来主要实现post，和get两个方法
var ajax = {
//传入URL，以及执行成功的回调函数
get: function(url, fn) {
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
fn.call(this, xhr.responseText);
}
};
xhr.send();
},
post: function(url, data, fn) {
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//POST 需要设置内容类型
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
fn.call(this, xhr.responseText);
this将继承fn的相关方法，也就是fn作为回调。
}
}
//post的send方法可以传递相关数据
xhr.send(data);
}
}
post进行调用，get方法类似。
var btn = document.getElementById('btn')
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
var uid = document.getElementById('uid').innerHTML;
var pass = document.getElementById('pass').innerHTML;
var url = "./login_confirm";
data = {
"uid": uid,
"pass": pass
};
var formData = "";
//需要将数据变成post能认识的类型
data = (function(value) {
for (var key in value) {
formData += key + "=" + value[key] + "&";
}
return formData;
})(data);
//使用立即执行函数来进行 值的拼接过程
//进行调用
ajax.post(url, data, function(res) {
console.log(res);
});
}
至此，ajax的简易实现就基本完成了。