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 }





原文地址:https://www.cnblogs.com/Shang0109/p/2417877.html