Ajax基础应用入门02（结合javascript）
本次的应用程序和入门01的效果大致相同，不同的是，执行结果并非以label的形式显示出来，而是直接在div中显示。
1、可以在01项目的基础知识添加一个web窗体 “webForm2”；
2、在前台<form></form>中插入以下代码:
1 <asp:ScriptManager ID="ScriptManager1" runat="server">
2 </asp:ScriptManager>
3 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
4 <ContentTemplate>
5 <div>
6 学生ID:<input type="text" name="studentid"/><input type="button" value="查找" name="look" onclick="find();"/>
7 学生姓名：<div id="studentId2"></div>
8 </div>
9 </ContentTemplate>
10 </asp:UpdatePanel>
11 <iframe src="http://www.baidu.com" width="1000" height="400"></iframe>
(当然，部分控件也可以从工具箱中拖入，点击“查询”按钮要实现查询功能 所以在这里我们添加一个find()触发事件)
3、在<head></head>中添加Javascript代码：
View Code
1 <script language="javascript" type="text/javascript">
2 var req = null;
3 function createRequest()
4 {
5 var request;
6 try {
7 request = new XMLHttpRequest();//创建和后台交互的请求（XMLHttpRequest是ajax的核心）。用于页面局部刷新（浏览器的内部对象，每个浏览器都有）；
8 }
9 catch (trymicrosoft) //假如是微软的浏览器，且不支持旧的版本，就使用下边的Msxml2.XMLHTTP版本；
10 {
11 try {
12 request = new ActiveXObject("Msxml2.XMLHTTP");
13 }
14 catch (othermicrosoft)//如果不是微软的浏览器，则调用Microsoft.XMLHTTP的浏览方式；
15 {
16 try {
17 request = new ActiveXObject("Microsoft.XMLHTTP");
18 }
19 catch (failed) //若以上都创建失败则返回空；
20 {
21 request = null;
22 }
23 }
24
25 }
26 return request;
27 }
28 function find() {
29 req = createRequest();//创建ajax的请求对象；
30 req.onreadystatechange = GetResultOnSucceed; //指定状态改变后要执行的方法；
31 req.open("GET", "WebForm2.aspx?id=" + document.forms[0].studentid.value); //指定ajax的请求地址；(?表示参数 id是参数的名称，document.form1.studentid.value表示参数的值)
32 req.send("");//发送请求；
33 }
34 function GetResultOnSucceed()
35 {
36 if(req.readyState==4) {
37 if(req.status==200){
38 alert(req.responseText);
39 var s=req.responseText;//获取请求（或处理）结果；
40 document.getElementById("studentId2").innerHTML=s;//将结果显示在div里；
41 }
42 }
43 }
44
45 </script>
4、本次后台代码写入页面事件中：
View Code
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 if (Request.QueryString["id"] != null)
4 {
5
6 string sid = Request.QueryString["id"].ToString();//指定获取find()方法中的id；
7 using (SqlConnection conn = new SqlConnection())
8 {
9 String conStr = @"Data Source=.\SQLEXPRESS;Initial Catalog=CRM;Persist Security Info=True;User ID=sa;Password=sa";
10 //Persist Security Info=True表示采用集成安全机制，若为False，则表明不采用集成安全机制。 [i'niʃəl] ['kætəlɔɡ] ；
11 conn.ConnectionString = conStr;//获取用于打开SQLServer数据库的字符串；
12 try
13 {
14 conn.Open();//打开数据连接；
15 }
16 catch
17 {
18 return;
19 }
20 SqlCommand cmd = new SqlCommand();//SqlCommand 表示对数据库执行的一个语句；
21 cmd.Connection = conn;//获取或者设置SqlCommand的此实例的SqlConnection；
22 string sql = string.Format("select name from customer where ID='{0}' ", sid);//Format将字符串转换为指定对象的字符串表现形式；
23 cmd.CommandText = sql;//CommandText 获取或设置对数据源执行的SQL语句、表名或存储过程；
24 SqlDataReader dr = cmd.ExecuteReader();//SqlDataReader提供一种从SQLServer数据库中读取行的只进流的方式；
25 //(DataReader只在内存中读取一条数据,占用的内存比较小)
26 string result = "";
27 if (dr.Read())
28 {
29 result = dr[0].ToString();
30
31 }
32 else
33 {
34 result = "该学生不存在！";
35 }
36 dr.Close();//关闭SqldataReader；
37 Response.Write(result);
38 Response.End();
39 }
40 }
41 else
42 {
43 return;
44 }
45 }
