首先声明我是asp.net的初学者，有好多技术问题都不会，希望以后看到博客的技术大牛们，看到不对的和不好的，都能够提出；
1、首先用visual studio 2012新建一个asp.net网站，添加一个js文件夹，添加javascript文件名命AJAx.js，再添加一个Login.aspx网页，如图结构：
2、Default.aspx很简单
<head runat="server"> <title></title> <script language="javascrip" type="text/javascript" src="js/AJAx.js"></script> </head> <body> <form id="form1" runat="server"> <div> 用户名：<asp:TextBox ID="UserName" runat="server"></asp:TextBox> <br /> 密 码：<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox> <br /> <input id="Button1" type="button" value="登录" onclick="toLogin()" /> <input id="Reset1" type="reset" value="重置" /></div> </form> </body>3、主要代码在这里AJAx.js function Ajax() { var m_xmlReq = false; //判断是否IE浏览器并创建异步对象 //判断的原因是,各种浏览器对JavaScript的支持不一样..所以XmlHttpRequest对象的产生方式也不一样.比如IE.他支持的是ActiveX的方式. //["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];这些是他ActiveX的版本. //而有些浏览器.象FireFox,浏览器本身有对XmlHttpRequest的支持.浏览器有内置对象.所以用"xmlHttp = new XMLHttpRequest(); "就可以了 if (window.ActiveXObject) { try { m_xmlReq = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { m_xmlReq = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) { } } } else if (window.XMLHttpRequest) { m_xmlReq = new XMLHttpRequest(); } this.send = function (Url, send_data, CallBack) { if (!m_xmlReq) { return; } method = "POST"; m_xmlReq.open(method, Url, true); //加载服务器 if (method == 'POST') { m_xmlReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); } m_xmlReq.onreadystatechange = function () { //关联异步调用方法 if (m_xmlReq.readyState == 4) { //判断异步调用完成 if (m_xmlReq.status == 200) { //判断是否调用成功 CallBack(true, m_xmlReq.responseText); } else { CallBack(false); } } } m_xmlReq.send(send_data.toString()); //发送带参数的请求 } } //创建ajax对象 var AjaxObject = new Ajax(); function toLogin() { var username = document.getElementById("UserName").value; var pwd = document.getElementById("Password").value; AjaxObject.send("Login.aspx", "username=" + username + "&pwd=" + pwd, function (succeed, responseUrl) { //绑定回调函数 if (succeed) { var arr = responseUrl.split("|"); if (arr[0] == 'true') { document.location.href = arr[1]; //设置登录成功后跳转的URL //document.location 与document.URL有什么区别？ // // // } else { alert("用户名或者密码错误"); } } } ); }
（一）创建XMLHttpRequest对象：
m_xmlReq = new ActiveXObject('Msxml2.XMLHTTP');
m_xmlReq = new XMLHttpRequest();
（二）初始化对象
1、调用open()方法为同服务器间通信的对象做准备并初始化，通过send()方法发出实际请求。open()方法包括三个参数：请求类型（POST\GET\...）、URL以及键值对参数、可选参数（true异步/fasle同步，默认true）。
2、GET和POST，post需要发送额外的数据：setRequestHander("Content-type", "application/x-www-form-urlencodes")；
3、最后通过send()方法把请求发到服务器。
(1)XMLHttpRequest对象的open()方法，比如我们有了要连接的URL，还有像传递的参数都可以跟在url的后面，然后就可以配置请求了。这时用open()方法来完成。open()方法有五个参数：
request-type：发送请求的类型。典型的值是GET 或POST，但也可以发送HEAD 请求。
url：要连接的URL。
asynch：如果希望使用异步连接则为true，否则为false。该参数是可选的，默认为true。
username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
password：如果需要身份验证，则可以在此指定口令。 该可选参数没有默认值
通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为“true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。
下面是open()方法的一个使用示例：
var url = "lookup.php?name='haha'";
request.open("GET", url, true);
(2) GET和POST，post需要发送额外的数据：setRequestHander("Content-type", "application/x-www-form-urlencodes")；
(3)最后是send
eg: (1) ajaxObject.open("GET","URL",true) ;
ajaxObject.send(null) ;
(2) ajaxObject.open("POST","URL",true);
ajaxObject.setRequestHander("Content-type", "application/x-www-form-urlencodes");
ajaxObject.send();
（三）监控服务器响应状态
监听XMLHttpRequest对象的onreadystatechange()事件，在触发时调用函数
eg：ajaxObject.onreadystatechange = function() {
if( ajaxObject.readyState == 4) {
if(ajaxObject.status == 才200) {
//执行成功，处理结果
}else if (ajaxObject.status == 404){
//404错误
}
}
相关文章
精彩导读
热门资讯
关注我们
