Ajax全称是,主要是利用JavaScript实现异步的数据传输,首先说异步,异步是当前操作进行的时候,用户可以进行别的工作,拿最典型的注册来说,用户在填完用户名之后,网站将用户名发回服务器进行判断当前用户名是否存在的时候,用户可以继续往下填写其他信息,在用户进行其他工作的时候,服务器就将判断结果发回到浏览器了,这样用户不用等,大大的提高了用户的体验。
Ajax传输数据有很多中方式XML是一中,其他比如直接传字符串,html页面,也可以传CVS(用符号分割数据,然后读取的时候根据符号将数据分隔开),或者是Json数据格式,Json有点像实体,用来封装数据,然后传输数据的时候传的是Json对象。
下面是ajax实现注册用户名时提示的一个实例,如果没在VS里实现过ajax的读者可以跟着我一步一步的往下做:
首先在vs里建立一个web页面,添加两个框(用户名、密码),添加一个按钮(注册);html代码页在文本框后面添加 <span>标签(这个页没有后台的C#代码),
register.css为样式文件,ulties.js封装了创建请求对象(ajax中用户传递客户端发出的请求)的方法,register.js封装了剩余的js代码
代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajaxDemon.aspx.cs" Inherits="WebDevelop.ajaxDemon" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>注册信息</title>
<link href="css/register.css" rel="stylesheet" type="text/css" />
<script src="js/ulties.js" type="text/javascript"></script>
<script src="js/register.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="register">
<p>
<asp:label runat="server" text="用户名 "></asp:label><asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><span id="remind"></span>
</p>
<p>
<asp:Label ID="Label1" runat="server" Text="真实姓名"></asp:Label><asp:TextBox ID="txtTeacherName" runat="server"></asp:TextBox>
</p>
<p>
<asp:Label ID="Label2" runat="server" Text="密 码 "></asp:Label><asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
</p>
<asp:Button ID="btnRegister" runat="server" Text="注册" />
</div>
</form>
</body>
</html>
接下来创建ulties.js文件:
function createRequest() {
try {
//创建XMLHttpRequest对象,适合非IE
request = new XMLHttpRequest();
} catch (tryMS) {
try {
//创建请求对象,适合高版本IE
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
//创建请求对象,适合低版本
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
return request;
}
register.js文件中的代码:
//页面加载时执行iniPage函数
window.onload = initPage;
function initPage() {
//将checkUserName函数绑定到txtUserName控件的onblur方法
document.getElementById("txtUserName").onblur = checkUserName;
}
function checkUserName() {
//获得注册的用户名
var userName = document.getElementById("txtUserName").value;
if (userName == "") {
return;
}
//创建请求对象
userNameRequest = createRequest();
if (userNameRequest == null) {
alert("未成功创建请求对象");
}
else {
//去掉用户名中可能包含的空格
var username = escape(userName);
//使用get方式传值时,需要将参数写入到url中
var url = "AjaxUserNameCheck.aspx?username=" + username;
//设置服务器响应时的回调函数
userNameRequest.onreadystatechange = showUserNameStatus;
//建立请求,Get表示使用get方法传递URL,true表示异步传输
userNameRequest.open("GET", url, true);
//发送请求:open方法中,使用get时send的参数为null,使用post时要传递的参数
userNameRequest.send(null);
}
}
//请求对象的回调函数,服务器有回应时调用
function showUserNameStatus() {
//服务器状态
if (userNameRequest.readyState == 4)
if (userNameRequest.status == 200) {
//向id为remind的标签中写入传回的内容
document.getElementById("remind").innerHTML = userNameRequest.responseText;
}
}
建立另一个web页,作为服务器端,在后台Page_Load事件中代码文件中写入如下代码:
//获取客户端传来的用户名
string username = Request["username"].ToString();
//判断用户名是否被占用,这里可以换成从数据库查询的结果
if (username=="xqf")
{
Response.Clear();
//回复客户端
Response.Write("该用户名以被占用");
Response.End();
}
else
{
Response.Clear();
Response.Write("该用户名尚未被占用");
Response.End();
}
现在整个应用就构件好了(没有付CSS文件的内容,样式读者可随便定义)。执行一下网页,结果如下: