前面几天是学习了如何在服务器上取得静态的数据。ajax技术最终体现在与服务器的动态数据实现人机交互中,即客户端传递带有参数的请求,服务器接收后,分析所传递来的请求,并作出相应的响应,发送对应数据至客户端,客户端接收请求返回的数据,从而实现了数据的双向传递。
一.$.get()请求数据
通过调用全局函数$.get()实现了XML文档的加载。除了数据外还可以实现数据的请求。
(1)功能描述
创建一个服务器页面UserInfo.apsx,该页面的功能是获取客户端发送请求,并分析传来的参数值,返回对应的结果。另外,在客户端HTML页面的文本框中,输入传递的参数值,单击“请求数据”按钮后,显示服务器返回的数据结果。
(2)实现代码
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#Button1").click(function() { //按钮单击事件
//打开文件,并通过回调函数返回服务器响应后的数据
$.get("UserInfo.aspx",
{ name: encodeURI( $ ("#txtName") . val() ) },
function(data){
$("#divTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>
另外再新建一个服务端文件UserInfo.aspx,该文件内容代码如下:
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = System.Web.HttpUtility.UrlDecode(Request["name"] ); //解码姓名字符
string strHTML = "<div class='clsShow'>" ; //初始化保存内容变量
if (strName == "tgr")
{
strHTML += "姓名:tgr <br>";
strHTML += "性别:男 <br>";
strHTML += "邮箱:tao_guo_rong@163.com <hr>";
}
else if (strName == "ljz")
{
strHTML += "姓名:ljz <br>";
strHTML += "性别:女 <br>";
strHTML += "邮箱:xiaoli@163.com <hr>";
}
strHTML += "</div>" ;
Response.Write(strHTML);
%>
代码解析:
客户端向服务器传递参数时,使用的格式是{key0 : value0 , key1 : value1 , ......} , "key0" 为参数名称,“value0”为参数的值。如果参数的值是中文格式,必需通过使用encodeURI()进行转码,当然,在客户端接收时,使用decodeURI()进行解码即可。