已经工作了一段时间了,但是现在越来越感觉到自己的知识实在太少了,太不够用了,书到用时方恨少啊!!
工作一直比较紧凑,但是鄙人打算集中精神学习下AJAX技术,虽然以前在用AJAX的擦边技术,但是都是使用.NET的控件,或者是第三方开发的控件,根本没有深入的去理解过里面的内容,突然发现,这时很可怕的一件事。我的同事跟我的震撼很大,这种东西还是自己写出来的才爽快。
好了,不废话了,开始吧。
到底为什么使用AJAX就不用在废话了,基本上随便一GOOGLE就都知道了。
我现在还处于一个底层上,我的感觉就是使用XMLHttpRequest对象进行异步数据的读取,使用Javascript进行绑定和处理数据。个人的感觉是,在客户的UI层和服务器端之间插入了一个AJAX层,其中原本需要直接和服务器端沟通的工作由AJAX层帮助我们做了,这些操作都是在用户感觉不到的基础上做出来的。额...那两个著名的图呢,让我来找一找。
old:
new:
这4张图一目了然了。(上面的都是个人的感觉,可能有不正确的地方,以后学习的多了会改正)
下面来看我的第一次代码:
HTML文件,ajaxTest.html
Code
1<html>
2<head>
3<script language="JavaScript" type="text/javascript" >
4 var http_request=false;
5 function send_request(url)
6 {
7
8 //初始化、指定处理函数、发送请求的函数
9 http_request=false;
10 //开始初始化XMLHttpRequest对象
11 if(window.XMLHttpRequest)
12 {
13
14 //火狐等浏览器
15 http_request=new XMLHttpRequest();
16 if(http_request.overrideMimeType)
17 {//设置MIME类别
18 http_request.overrideMimeType('text/xml');
19 }
20 }
21 else if(window.ActiveXObject)
22 {
23
24 //IE浏览器
25 try
26 {
27 http_request=new ActiveXObject("Msxml2.XMLHTTP");
28 }
29 catch (e)
30 {
31 try
32 {
33 http_request=new ActiveXObject("Microsoft.XMLHTTP");
34 }
35 catch (e)
36 {}
37 }
38 }
39 if(!http_request)
40 {
41 //异常,创建对象实例失败
42 window.alert("不能创建XMLHttpRequest对象实例.");
43 return false;
44 }
45 http_request.onreadystatechange=processRequest;
46 http_request.open("GET",url,true);
47 http_request.send(null);
48
49 }
50 //处理返回信息的函数
51 function processRequest()
52 {
53 if(http_request.readyState==4)
54 {
55 //判断对象状态
56 if(http_request.status==200)
57 {
58 //信息已经成功返回,开始处理信息
59 alert(http_request.responseText);
60
61 }
62 else
63 {
64 //页面不正常
65 alert("您所请求的页面有异常.");
66 }
67 }
68 }
69 //用户检查
70 function userCheck()
71 {
72 var f=document.form1;
73 var username=f.username.value;
74 if(username=="")
75 {
76 window.alert("用户名不能为空");
77 f.username.focus();
78 return false;
79 }
80 else
81 {
82
83 send_request('Default.aspx?username='+username);
84
85 }
86 }
87
88
89
90
91
92</script>
93</head>
94
95<body>
96 <form name="form1" action="" method="post">
97 用户名:<input type="text" name="username" value=""/>
98 <input type="button" name="check" value="唯一性检查" onclick="userCheck()"/>
99 <input type="submit" name="submit" value="提交"/>
100 </form>
101
102</body>
103</html>
1<html>
2<head>
3<script language="JavaScript" type="text/javascript" >
4 var http_request=false;
5 function send_request(url)
6 {
7
8 //初始化、指定处理函数、发送请求的函数
9 http_request=false;
10 //开始初始化XMLHttpRequest对象
11 if(window.XMLHttpRequest)
12 {
13
14 //火狐等浏览器
15 http_request=new XMLHttpRequest();
16 if(http_request.overrideMimeType)
17 {//设置MIME类别
18 http_request.overrideMimeType('text/xml');
19 }
20 }
21 else if(window.ActiveXObject)
22 {
23
24 //IE浏览器
25 try
26 {
27 http_request=new ActiveXObject("Msxml2.XMLHTTP");
28 }
29 catch (e)
30 {
31 try
32 {
33 http_request=new ActiveXObject("Microsoft.XMLHTTP");
34 }
35 catch (e)
36 {}
37 }
38 }
39 if(!http_request)
40 {
41 //异常,创建对象实例失败
42 window.alert("不能创建XMLHttpRequest对象实例.");
43 return false;
44 }
45 http_request.onreadystatechange=processRequest;
46 http_request.open("GET",url,true);
47 http_request.send(null);
48
49 }
50 //处理返回信息的函数
51 function processRequest()
52 {
53 if(http_request.readyState==4)
54 {
55 //判断对象状态
56 if(http_request.status==200)
57 {
58 //信息已经成功返回,开始处理信息
59 alert(http_request.responseText);
60
61 }
62 else
63 {
64 //页面不正常
65 alert("您所请求的页面有异常.");
66 }
67 }
68 }
69 //用户检查
70 function userCheck()
71 {
72 var f=document.form1;
73 var username=f.username.value;
74 if(username=="")
75 {
76 window.alert("用户名不能为空");
77 f.username.focus();
78 return false;
79 }
80 else
81 {
82
83 send_request('Default.aspx?username='+username);
84
85 }
86 }
87
88
89
90
91
92</script>
93</head>
94
95<body>
96 <form name="form1" action="" method="post">
97 用户名:<input type="text" name="username" value=""/>
98 <input type="button" name="check" value="唯一性检查" onclick="userCheck()"/>
99 <input type="submit" name="submit" value="提交"/>
100 </form>
101
102</body>
103</html>
asp.net文件,Default.aspx.cs 设计页面没有添加任何控件。
Code
1using System;
2using System.Collections;
3using System.Configuration;
4using System.Data;
5using System.Linq;
6using System.Web;
7using System.Web.Security;
8using System.Web.UI;
9using System.Web.UI.HtmlControls;
10using System.Web.UI.WebControls;
11using System.Web.UI.WebControls.WebParts;
12using System.Xml.Linq;
13
14public partial class _Default : System.Web.UI.Page
15{
16 protected void Page_Load(object sender, EventArgs e)
17 {
18 //string username = Request.QueryString["username"];
19 string username = Request.Params["username"];
20 if (username == "admin")
21 {
22 Response.Write("用户名已经被注册。");
23
24 }
25 else
26 {
27 Response.Write("没事");
28 }
29
30 }
31}
32
1using System;
2using System.Collections;
3using System.Configuration;
4using System.Data;
5using System.Linq;
6using System.Web;
7using System.Web.Security;
8using System.Web.UI;
9using System.Web.UI.HtmlControls;
10using System.Web.UI.WebControls;
11using System.Web.UI.WebControls.WebParts;
12using System.Xml.Linq;
13
14public partial class _Default : System.Web.UI.Page
15{
16 protected void Page_Load(object sender, EventArgs e)
17 {
18 //string username = Request.QueryString["username"];
19 string username = Request.Params["username"];
20 if (username == "admin")
21 {
22 Response.Write("用户名已经被注册。");
23
24 }
25 else
26 {
27 Response.Write("没事");
28 }
29
30 }
31}
32