用用AJAX实现页面登陆以及注册用户名验证的简单实例实现页面登陆以及注册用户名验证的简单实例
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。其核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首
次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响
应，而不阻塞用户。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对
网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
试想如果在注册时，提交了注册信息，等了几秒后页面重载了，结果弹出一个提示框告诉你“用户名已被使用”，那将是很令人
恼火的一件事。所以在这里，使用AJAX实现异步请求，即可在不重载页面的情况下实现与数据库的通讯。
创建创建XMLHTTPRequest对象对象
使用javascript在html页面中创建XMLHTTPRequest对象，实现AJAX异步请求：
<span style="font-size:14px;"> var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true);
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
alert(xmlhttp.responseText);
}
else
{
alert("AJAX服务器返回错误！");
}
}
}
xmlhttp.send();
</span>
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’); //创建
XMLHTTP对象，考虑兼容性
xmlhttp.open(“POST”, “AJAXTest.ashx?” + “i=5&j=10”, true); //“准备”向服务器的GetDate1.ashx发出Post请求（GET可能会有
缓存问题）。这里还没有发出请求。
readyState == 4 表示服务器返回完成数据了。之前可能会经历2（请求已发送，正在处理中）、3（响应中已有部分数据可用
了，但是服务器还没有完成响应的生成）
注意：注意：
不要以为if (xmlhttp.readyState == 4) 在send之前执行就觉得不对， xmlhttp.send(); 这时才开始发送请求。这时才开始发送请
求后不等服务器返回数据，就继续向下执行，所以不会阻塞，界面就不卡了，这就是AJAX中“A”的含义“异步”。
AJAX的封装的封装
在实际项目开发中，会有多处用到AJAX异步请求，可是创建对象代码这么长，复制粘贴都嫌麻烦，而且还会影响代码的观赏
性，所以需要将AJAX进行封装。将其封装成js功能文件，并在网页中导入即可进行引用。
简单AJAX封装后代码：
<span style="font-family:Times New Roman;font-size:14px;"> function ajax(url,onsuccess,onfail)
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
xmlhttp.open("POST", url, true);
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4)
{
if (xmlhttp.status == 200)
{
onsuccess(xmlhttp.responseText);//成功时逻辑操作
}
评论0