ajax
一、ajax概念
1、通常页面中发生提交事件时会把所有页面全部提交,结果让整个页面重新刷新一次,这样会浪费很多时间和资源。服务器段控件会发生提交事件,但客户端控件不会发生提交事件,所以客户端控件基础上加ajax的技术,解决了部分提交的问题。ajax是为了把客户端控件和服务器连接起来而发展出来的一种技术解决方案。
2、ajax实例
A、建立有客户端控件的页面
B、在项目中建立ajax目录,目录中添加[一般处理程序,后缀是.ashx],ashx文件是专门的后台页面,而aspx文件是包含前台页面和后台页面的综合文件。
C、建立js文件夹和对应的的js处理文件
1)首先指定ajax的后台页面
$.post("/ajax/LoginAjax.ashx?cmd=login", { "username": username, "pwd": pwd }, function (data) {
var data = eval('(' + data + ')'); //吧json转成js数组
if (data.Success) {
alert(data.Infor);
}
else {
alert(data.Infor);
}
});
** ajax书写格式:后台页面URL+json格式的参数+返回的数据的方式书写。
如:$.post("/ajax/LoginAjax.ashx?cmd=login", { "username": username, "pwd": pwd }, function (data) {});
** json格式:key等于value的格式,key必须用双引号括起来,key与value之间用冒号分割,每个参数对之间用逗号分割。
如:{ "username": username, "pwd": pwd }
** post传参
get传参是用?号在URL上传递的,传递的信息量不大,且是开放的,没有安全性。
而post传参是后台程序完成的,传递的信息量大,且是保密性较好,用在需要安全性的场合。
D、在后台页面的ProcessRequest中写出post对应的处理程序。
如:string usernsme = context.Request.Form["usernsme"].ToString(); //接收客户端传过来的参数
string pwd= context.Request.Form["pwd"].ToString(); //请求信息保存Request
string strSql = "select UserId from UserInfor where UserName=@UserName and Pwd=@Pwd";
SqlParameter[] para = new SqlParameter[] { new SqlParameter("@UserName", SqlDbType.NVarChar, 50),
new SqlParameter("@Pwd", SqlDbType.NVarChar, 50) };
para[0].Value = username;
para[1].Value = pwd;
if (SqlHelper.Exists(strSql, para)) //判断sql语句里面的结果是否存在
{
context.Response.Write("登录成功"); //经过处理吧结果传递给客户端,相应信息保存Response
}
else
{
context.Response.Write("用户名或密码错误");
}
E、通常ajax返回的是多个数据,返回的格式仍是json格式的数据。
1)先定义字典
Dictionary<string, object> dt = new Dictionary<string, object>();
2)再实例化json格式转换器
JavaScriptSerializer jss = new JavaScriptSerializer();
3)往字典里添加需要传递的参数
dt.Add("Success", true);
dt.Add("Infor", sb.ToString());
4)把字典中的内容转换成json格式数据传个客户端
context.Response.Write(jss.Serialize(dt));
F、客户端取用ajax返回的json格式数据
var dt = eval('(' + data + ')'); //吧json格式(字符串)转成json格式控件
if (dt.Success) { //转成json格式控件后可以用控件属性的方式提取其中的每个参数
alert(dt.Infor); //dt就是转换后的json控件,具有Success和Infor的属性。
}
else {
alert(dt.Infor);
}
3、实例:输入框输入部分字符时出现相应的下拉框提示。
A、建立html,页面上放入一个输入框和显示内容用的一个div,这个div一开始是隐藏的。
B、在js中判断键盘事件keyup,获取当前输入框输入的内容,并用post方式传递给后台页面。
C、后台页面根据post穿过来的值搜索数据库(like方式模糊搜索),并以字符串拼凑方式获得html(ul li方式)的结果。
D、最终结果以json格式传递给客户端。
E、把服务器端传回的json格式字符串转换为控件,并显示相关信息。
4、js中cookie的操作方法
A、创建html页面
B、引入cookie插件
C、写js代码完成cookie的操作
$.cookie('the_cookie'); // 读取 cookie
$.cookie('the_cookie', 'the_value'); // 存储 cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); // 存储一个带7天期限的 cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除 cookie:expires设置为-1表示不保存cookie
注意:$.cookie('the_cookie', 'the_value', { expires: 7 ,path:'/'});
没有path:'/'参数时cookie只能在当前目录成绩才能访问到,设置path:'/'后才能在任何层级目录上都能访问。