初识Ajax技术2
2013-05-31 10:19
429 查看
实现注册界面无刷新判断重名,由于要访问数据库,所以要达到无刷新,只能用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] view
plaincopyprint?
// 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文件代码:
[c-sharp] view
plaincopyprint?
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 | 返回当前请求的响应行状态,只读 |
方法:
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)此页面上的一个按钮将被激活
[javascript] view
plaincopyprint?
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);
}
相关文章推荐
- 初识AJAX技术
- ASP.NET 2.0当中的Call back技术与ASP.NET AJAX
- 在 PHP 中结合 Ajax 技术进行图片上传
- 基于AJAX.NET技术的DataGrid控件开发
- Ajax(asp.net)技术实现异步刷新和控件功能示例流程
- Ajax技术原理解析
- 【AJAX】——初识
- Java+Jquery实现的ajax技术对3级联动下拉框的实现
- AJAX编写用户注册实例及技术小结
- Ajax 技术入门简介
- Ajax技术相关文档(1)
- 初识虚拟化技术
- ajax无刷新技术
- 使用xmlHttpRequest实现Ajax技术
- Ajax技术的未来和发展展望
- 系列文章--AJAX技术系列总结
- AJAX技术框架及开发工具 转
- 运用ajax技术的树型菜单
- ASP.NET 2.0当中的Call back技术与ASP.NET AJAX
- Ajax 技术