实现注册界面无刷新判断重名,由于要访问数据库,所以要达到无刷新,只能用Ajax技术。
其中最重要的就是xmlHttp对象。
XmlHttp是什么?
最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。
现在的绝对多数浏览器都增加了对XmlHttp的支持,IE中使用ActiveXObject方式创建XmlHttp对象,其他浏览器如:Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。
在操作页的前台代码中 <input ID="tbUserName" type="text" onblur ="tbUserName_onBlue(this.value)">
使用html文本框,即客户端控件 触发他的onblur事件调用js函数。
在js文件中定义该函数
- // JavaScript Document
- var xmlHttp;//全局XMLHttpResquest对象
- //针对不同浏览器,获取XMLHttpRequest对象
- function CreateXMLHttpRequest()
- {
- if(window.ActiveXObject)
- {
- xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- else
- {
- xmlHttp=new XMLHttpResquest();
- }
- }
- //离开tbUserName时调用的JS函数
- function tbUserName_onBlue(name)
- {
- //创建XMLHTTPRquest对象
- CreateXMLHttpRequest();
- //指定回调函数
- xmlHttp.onreadystatechange=HandleStateChange;
- //打开请求
- xmlHttp.open("GET","ForAjax.aspx?name=" + name,true);
- //发送请求
- xmlHttp.send(null);
- }
- //回调函数
- function HandleStateChange()
- {
- if(xmlHttp.readyState==4) //返回当前请求的状态,只读
- {
- if(xmlHttp.status==200) //返回当前请求的http状态码.只读
- {
- //responseText为接收服务器发过来的值
- if(xmlHttp.responseText=="wrong1")
- {
- document.getElementById("sp1").innerText ="用户名不能为空!";
- document.getElementById("img1").src="image/wrong.jpg";
- }
- else if(xmlHttp.responseText=="wrong2")
- {
- document.getElementById("sp1").innerText="用户名重名!";
- document.getElementById("img1").src="image/wrong.jpg";
- }
- else if(xmlHttp.responseText=="right")
- {
- document.getElementById("sp1").innerText="正确,可以注册!";
- document.getElementById("img1").src="image/right.jpg"
- }
- }
- }
- }
然后再创建一个web页面文件(我把他命名为ForAjax.aspx),在他的cs文件中通过Response.Write()返回值赋给js文件中的xmlHttp对象的responseText属性 (xmlHttp.responseText)。ForAjax.aspx不显示,只做某种操作以返回值达到某种需求。可以说是一个幕后英雄。
ForAjax.aspx.cs文件代码:
- using System;
- using System.Collections;
- using System.Configuration;
- using System.Data;
- using System.Linq;
- using System.Web;
- using System.Web.Security;
- using System.Web.UI;
- using System.Web.UI.HtmlControls;
- using System.Web.UI.WebControls;
- using System.Web.UI.WebControls.WebParts;
- using System.Xml.Linq;
- public partial class ForAjax : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- string name = Request.QueryString["name"].ToString(); //读出name的值
- string strQry = @"select * from UserList where UserName='" + name + "'";
- SqlHelper helper = new SqlHelper(@"Data Source=A102-35/SQLEXPRESS;DataBase=DB_Login;Integrated Security=true");
- if (name=="")
- {
- Response.Clear(); //清空缓冲区
- Response.Write("wrong1"); //写操作,返回值给xmlHttp.responseText
- Response.End(); //结束写入数据流
- }
- else if (helper.RunReader(strQry).Read())
- {
- Response.Clear();
- Response.Write("wrong2");
- Response.End();
- }
- else
- {
- Response.Clear();
- Response.Write("right");
- Response.End();
- }
- }
- }
XmlHttp对象参考:
属性:
onreadystatechange* | 指定当readyState属性改变时的事件处理句柄。只写 |
readyState | 返回当前请求的状态,只读. |
responseBody | 将回应信息正文以unsigned byte数组形式返回.只读 |
responseStream | 以Ado Stream对象的形式返回响应信息。只读 |
responseText | 将响应信息作为字符串返回.只读 |
responseXML | 将响应信息格式化为Xml Document对象并返回,只读 |
status | 返回当前请求的http状态码.只读 |
statusText | 返回当前请求的响应行状态,只读 |
* 表示此属性是W3C文档对象模型的扩展.
方法:
abort | 取消当前请求 |
getAllResponseHeaders | 获取响应的所有http头 |
getResponseHeader | 从响应信息中获取指定的http头 |
open | 创建一个新的http请求,并指定此请求的方法、URL以及验证信息(用户名/密码) |
send | 发送请求到http服务器并接收回应 |
setRequestHeader | 单独指定请求的某个http头 |
事件:无
-----------------------------------------------------------------------------------------------------------------------
readyState属性
变量,此属性只读,状态用长度为4的整型表示.定义如下:
0 (未初始化) | 对象已建立,但是尚未初始化(尚未调用open方法) |
1 (初始化) | 对象已建立,尚未调用send方法 |
2 (发送数据) | send方法已调用,但是当前的状态及http头未知 |
3 (数据传送中) | 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误, |
4 (完成) | 数据接收完毕,此时可以通过通过responseBody(为为解码的二进制数据)和responseText获取完整的回应数据 |
-----------------------------------------------------------------------------------------------------------------------
status属性
返回当前请求的http状态码
长整形标准http状态码,定义如下:
Number | Description |
---|---|
100 | Continue |
101 | Switching protocols |
200 | OK |
201 | Created |
202 | Accepted |
203 | Non-Authoritative Information |
204 | No Content |
205 | Reset Content |
206 | Partial Content |
300 | Multiple Choices |
301 | Moved Permanently |
302 | Found |
303 | See Other |
304 | Not Modified |
305 | Use Proxy |
307 | Temporary Redirect |
400 | Bad Request |
401 | Unauthorized |
402 | Payment Required |
403 | Forbidden |
404 | Not Found |
405 | Method Not Allowed |
406 | Not Acceptable |
407 | Proxy Authentication Required |
408 | Request Timeout |
409 | Conflict |
410 | Gone |
411 | Length Required |
412 | Precondition Failed |
413 | Request Entity Too Large |
414 | Request-URI Too Long |
415 | Unsupported Media Type |
416 | Requested Range Not Suitable |
417 | Expectation Failed |
500 | Internal Server Error |
501 | Not Implemented |
502 | Bad Gateway |
503 | Service Unavailable |
504 | Gateway Timeout |
505 | HTTP Version Not Supported |
备注
长整形,此属性只读,返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。
-----------------------------------------------------------------------------------------------------------------------
onreadystatechange属性
指定当readyState属性改变时的事件处理句柄
当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange函数,当数据接收完毕后(readystate == 4)此页面上的一个按钮将被激活
- var xmlhttp=null;
- function PostOrder(xmldoc)
- {
- var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.5.0");
- xmlhttp.Open("POST", "http://myserver/orders/processorder.asp", false);
- xmlhttp.onreadystatechange= HandleStateChange;
- xmlhttp.Send(xmldoc);
- myButton.disabled = true;
- }
- function HandleStateChange()
- {
- if (xmlhttp.readyState == 4)
- {
- myButton.disabled = false;
- alert("Result = " + xmlhttp.responseXML.xml);
- }