AJAX初学者篇

AJAX纠结了本人许久阿,纠结过后,当功能实现的内一刻,是豁然开朗,感觉编程当遇到自己不会的东西时,就好像把自己关在一个小黑屋里,什么都看不见,只能一点点摸索,可能会走错路,可能会找不到方向,心里很烦躁很纠结,但是当自己摸到门,打开门,看到外面阳光明媚的时候,所有烦恼都烟消云散了。

我是这么理解AJAX的,可能理解的只是表面的一些概念,要深入熟练应用还需要多多的练习呢~

AJAX不是什么编程语言,是需要和其他语言结合应用的一种技术,它解决了其他很多语言解决不了的问题,

代表性的    1. 页面无刷新的动态数据交换  2.局部刷新页面  3.界面的美观(增强用户体验)

我做的主要是验证用户名部分,给大家看下代码,有不足的地方希望给些建议。

用户名:
<input type=”text”  name=”username” id=”username” onblur=”user_name()”/>
<span id=”user_name” style=”color:red;font-size:12px;”></span>

 

function user_name()    //判断用户名
{
var user = document.getElementById(“username”);  //获取用户名id
var usermessage = document.getElementById(“user_name”);  //获取span的id

var user_match = /^[a-zA-Z0-9_] $/;  //验证格式只能是字母数字下划线组成

if(user.value.length==0)
{
usermessage.innerHTML=”* 账号不能为空”;

user.style.border=”2px solid red”;

return false;
}else
{

if (user.value.length < 6 || user.value.length > 20 )
{
usermessage.innerHTML=”* 用户名长度不少于 6 字节不超过 20 字节!”;
user.style.border=”2px solid red”;
return false;

}
if (!user.value.match(user_match))
{
usermessage.innerHTML=”* 用户名只能由字母数字下划线组成”;
user.style.border=”2px solid red”;
return false;
}
showHint(user.value);     //当前3项都符合条件时,执行的函数
if(usermessage.innerHTML!=”√”)
{
return false;
}
usermessage.innerHTML=”√”;
user.style.border=”1px solid #cccccc”;
return true;
}
}

 

var xmlHttp

function showHint(str)
{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)
{
alert (“您的浏览器不支持AJAX!”);
return;
}

var url=”ajax.php”;     //定义回传数据的服务器的 url(文件名)
url=url “?user_name=” str;      //使用文本框的内容向 url 添加参数(user_name)
xmlHttp.onreadystatechange=stateChanged;     //创建一个 XMLHTTP 对象,并告知此对象当某个改变被触发时执行名为 stateChanged 的函数
xmlHttp.open(“GET”,url,false);  //向服务器发送一个 HTTP 请求
xmlHttp.send(null);//  如果输入域为空,此函数仅仅会清空 user_name 占位符的内容
}

function GetXmlHttpObject()    /*上面可调用名为 GetXmlHttpObject() 的函数。

此函数的作用是解决为不同浏览器创建不同的 XMLHTTP 对象的问题。*/
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0 , Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}

return xmlHttp;
}

function stateChanged()   //每当 XMLHTTP 对象的状态发生改变时,stateChanged() 函数就会执行。当状态变更为 4(“完成”)时,user_name 占位符的内容就被响应文本来填充。
{
if (xmlHttp.readyState == 4)
{
if(xmlHttp.responseText == “false”)
{

document.getElementById(“user_name”).innerHTML=”* 用户名已存在”;
document.getElementById(“username”).style.border=”2px solid red”;
return false;

}
else
{    document.getElementById(“user_name”).innerHTML=”√”;
document.getElementById(“username”).style.border=”1px solid #cccccc”;
return true;

}
}
}