Ajax学习（二）—— 一个简单的Ajax实例，学习ajax实例_H5之家

Ajax学习（二）—— 一个简单的Ajax实例，学习ajax实例

通过上篇博客认识Ajax之后，我们通过一个简单的实例来消化消化理论知识，一睹Ajax的庐山真面目。

1.实例功能：

当用户输入用户名，文本框失去焦点后，通过异步调用来判断该用户名是否已经存在。若存在，则在上图中红框处显示提示。当用户名可用时，提交按钮变为可用状态。

2.设计Html页面：

<span style="font-family:SimSun;font-size:18px;"><strong><span style="font-family:SimSun;font-size:18px;"><strong><body> <form name="myForm"> 用户名：<input type="text" name=" myName" onblur="checkName()" /> <span id="myDiv"> </span><br /> 密　码：<input type="text" name="myPwd"/><br /> <input type="button" value=" 提交" name="submitButton" disabled /> </form> </body></strong></span></strong></span>在“用户名”文本框后添加了一个span标签，该标签划分一个区域，用于显示用户名的验证信息。还要添加一个事件，当失去焦点时触发“checkName（）”。

3.javascript代码部分：

//定义用户存储XMLHttpRequest对象的变量 var xmlHttp = null; //创建XMLHttpRequest对象 function creatXMLHTTP() { //判断浏览器是否支持ActiveX控件，针对IE6及之前版本 if (window.ActiveXObject) { //将所有可能出现的ActiveXObject版本都放在一个数组中 var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP']; //通过循环创建XMLHttpRequest对象 for (var i=0;i<arrXmlHttpTypes.length;i++) { try { //创建XMLHttpRequest对象 xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]); //如果创建XMLHttpRequest对象成功，则跳出循环 break; } catch(ex) { } } } //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器 else if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } //响应XMLHttpRequest对象状态变化的函数 function httpStateChange() { if (xmlHttp.readyState==4)//异步调用完毕 { if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功，在本机上调试 { //获得服务器返回的数据 var userNames = xmlHttp.responseText; var arrUserName = userNames.split(";");//把获取到的一个字符串分割成字符串数组。 //定义一个变量，用于判断用户名是否已经存在 var bFlag = false; for(i=0;i<arrUserName.length;i++) { if (arrUserName[i]==myForm.myName.value) { bFlag = true;//用户名存在 break; } } //查找用于显示提示信息的节点 var node = document.getElementById("myDiv"); //更新数据 if (bFlag) { node.firstChild.nodeValue = "用户名已存在"; myForm.submitButton.disabled = true;//提交按钮不可用 } else { node.firstChild.nodeValue = "用户名不存在，可以使用"; myForm.submitButton.disabled = false;//提交按钮可用 } } } } //校验用户名是否有效 function checkName() { //创建XMLHttpRequest对象，调用前面定义好的函数 creatXMLHTTP(); if (xmlHttp!=null) { //创建响应XMLHttpRequest对象状态变化的函数 xmlHttp.onreadystatechange = httpStateChange; //创建http请求 xmlHttp.open("get","userName.txt", true); //发送http请求 xmlHttp.send(null); } else { alert("您的浏览器不支持XMLHTTP"); } }

注意：需要建一个userName.txt存储已存在的用户名，各个用户名之间用分号隔开。

通过这个小例子，我们从理论阶段向代码实现迈了一步。从代码中很容易发现XMLHttpRequest是Ajax的核心对象。也正是因为各大浏览器对XMLHttpRequest对象的广泛支持，使得Ajax成为一项热门技术。IE浏览器将XMLHttpRequest实现为一个ActiveX对象，其他三大浏览器（Firefox，Opera，Netscape）将其实现为一个本地javascript对象，所以在创建XMLHttpRequest对象时要经历一番周旋。虽然创建方式不同，但XMLHttpRequest对象拥有的方法和属性大致相同。下篇博客我们来一起揭开XMLHttpRequest对象的神秘面纱，深入解读上面的代码，敬请期待！

懂AJAX的帮我看看,一个最简单的例子

不是吧？
AJAX是javascript，怎么是JAVA呢？
AJAX是客户端的，不是服务器端的。
你的没有效果可能是因为你的路径不对。

你连这么基本的东西都不清楚，怎么学习AJAX啊？
先补习一下基础吧。

一个简单的Ajax例子？

/*****************JS************************/

var xmlHttp = false; //定义一个变量用来存放XMLHttpRequest对象
//检测用户名是否唯一的请求
function createXmlHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}

if(!xmlHttp && typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
}
/*=====================动态改变页面信息开始===================================*/
//动态改变页面
function dynamicUpdate()
{
createXmlHttpRequest();

var URL = "../ServerPage.aspx?task=reset";

xmlHttp.open("GET",URL,true);

xmlHttp.onreadystatechange = dynamicUpdateInfo;

xmlHttp.send(null);
}

//动态改变页面回调函数
function dynamicUpdateInfo()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
setTimeout("pollServer()",5000);
}
}
}

/********************后台************************/

protected void Page_Load(object sender, EventArgs e)
{
string task = Request.QueryString["task"].ToString();
//处理
}...余下全文>>