• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NETAJAX

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

ASP.NET AJAX

AJAX

AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScriptXML标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面。在youku看视频的过程中如果提交评论,页面就不会刷新,视频不会被打断。开发一个看效果:用<video  src="diaosi.mp4" autoplay controls></video>播放视频(只有支持html5的浏览器能播放),然后放一个评论功能,服务器只是存到一个文件中。
AJAX是一种进行页面局部异步刷新的技术。用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新,而是在HTML页面中使用JavaScript创建XMLHTTPRequest(简称XHR)对象来向服务器发出请求以及获得返回的数据,在页面中由XMLHTTPRequest来发出Http请求和获得服务器的返回数据,这样页面就不会刷新了。 XMLHTTPRequest是AJAX的核心对象。局部:一小部分刷新,其他部分不刷新;异步:网络请求期间,浏览器不卡。
 1 var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性
 2             xmlhttp.open("POST", "AJAXTest.ashx?i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题),Post请求浏览器一定不会缓存。这里还没有发出请求。true代表异步请求。
 3             xmlhttp.onreadystatechange = function ()
 4             {
 5                 if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
 6                 {
 7                     if (xmlhttp.status == 200) //如果状态码为200则是成功
 8                     {
 9                         alert(xmlhttp.responseText);
10                     }
11                     else
12                     {
13                         alert("AJAX服务器返回错误!");
14                     }
15                 }
16             }
17 //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
18             xmlhttp.send(); //这时才开始发送请求
19 //发出请求后不等服务器返回数据,就继续向下执行,所以不会阻塞,界面就不卡了,这就是AJAX中“A”的含义“异步”。试着在ashx加一句Thread.Sleep(3000);

简单的ajax封装:

 1  function ajax(url,onsuccess,onfail)
 2         {
 3             var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
 4             xmlhttp.open("POST", url, true);
 5             xmlhttp.onreadystatechange = function ()
 6             {
 7                 if (xmlhttp.readyState == 4)
 8                 {
 9                     if (xmlhttp.status == 200)
10                     {
11                         onsuccess(xmlhttp.responseText);
12                     }
13                     else
14                     {
15                         onfail(xmlhttp.status);
16                     }
17                 }
18             }
19             xmlhttp.send(); //这时才开始发送请求
20         }

 Json

AJAX传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程,因此AJAX中有一个事实上的数据传输标准JSon。Json(是一个标准,就像XML一样,Json规定了对象以什么样的格式保存为一个字符串)将复杂对象序列化为一个字符串,在浏览器端再将字符串反序列化为JavaScript可以读取的对象。Json被几乎所有语言支持。Json就是一个把对象(js、java、.net)表示为字符串的标准。
Json是什么,Json就是javascript对象或者数组格式的字符串,Http协议不能传递JavaScript对象,所以要转换为字符串进行传输。
 JavaScript对象(键值对) var person= {name:'rupeng',age:8};
 JavaScript数组:var names = ['rupeng','qq','taobao'];
 JavaScript对象数组:var persons = [{name:'rupeng',age:8}, {name:'qq',age:15}, {name:'taobao',age:10}];
 JavaScript对象关联:var p = {name:'yzk',child:{name:'timi',age:1}};
 1     <script type="text/javascript">
 2 
 3         var p1 = { name: 'rupeng', age: 8 };
 4         //alert(p1.name);
 5         var strs1 = ["rupeng", "baidu", "qq"];
 6         for (var i = 0; i < strs1.length; i++) {
 7             //alert(strs1[i]);
 8         }
 9 
10         var persons = [{ name: 'rupeng', age: 8 }, { name: 'baidu', age: 15 }, { name: 'qq', age: 18 }];
11         for (var i = 0; i < persons.length; i++) {
12             var person = persons[i];
13            // alert(person.name+"|"+person.age);
14         }
15 
16         var dog = { name: 'xiaoquan', age: 3, master: { name: 'china', renkou: 13 } };
17         //alert(dog.name);
18         //alert(dog.master.renkou);
19 
20         /*
21         var dog2 = { name: 'xiaoquan' };
22         var p2 = { name: 'china', renkou: 13 };
23         dog2.master = p2;*/
24 
25         //json的标准就是js中字典、数组的格式。
27         var s = "{ name: 'rupeng', age: 8 }";//ajax从服务器中"{ name: 'rupeng', age: 8 }"这样一个字符串,怎么样取出name的值呢?首先要把这个字符串转换为JavaScript对象
28        // alert(s);
29         //alert(s.name);
30         var p2 = eval("(" + s + ")");//p2就是一个对象了{ name: 'rupeng', age: 8 }
31         //eval把一个json格式的字符串解析为一个js对象
32         alert(p2.name);
33         var s = "[{ name: 'rupeng', age: 8 }, { name: 'baidu', age: 15 }, { name: 'qq', age: 18 }]";
34         var persons = eval("("+s+")");//eval()动态运行JavaScript
35         for (var i = 0; i < persons.length; i++) {
36             var person = persons[i];
37             alert(person.name+"|"+person.age);
38         }
39     </script>
C#转换Json:
1  int[] nums = new int[] {3,5,89};  
2             JavaScriptSerializer jss = new JavaScriptSerializer();
3             string json = jss.Serialize(nums);
4             context.Response.Write(json);

 

JQuery的AJAX封装
1 $.ajax({
2                 type: "post", url: "Ajax1.ashx",
3                 data: { i1: $("#txt1").val(), i2: $("#txt2").val() },
4                 success: function (data, txtStatus) {alert(data);},
5                 error: function () { alert("错误"); }
6             });

 三种Json装换JavaScript的方法:

1 var nums = $.parseJSON(resTxt);//json字符串转换为javascript对象
 1 $.ajax({
 2                 type: "post", url: "JQueryAJAXTest1.ashx",
 3                 dataType:"json",
 4                 data: { i1: 10, i2: 3 },
 5                 success: function (nums) {
 6                     //如果把dataType设置为"json",那么success的第一个参数就是json转换后的JavaScript对象,不需要再手动parseJson
 7                     for (var i = 0; i < nums.length; i++) {
 8                         alert(nums[i]);
 9                     }
10                 },
11                 error: function () {
12                     alert("ajax出错");
13                 }
1 context.Response.ContentType = "application/json";//C#

 JQuery AJAX其他

表单序列化(*):

如果表单元素放到form中,并且按照http的标准(有name等)设置,那么$("#form1").serializeArray()就可以得到一个键值对数组,把这个值赋值给$.ajax的data属性。

全局事件:

1)全局Loading的显示
$("body").bind("ajaxSend", function () {
               //显示Loading
            }).bind("ajaxComplete", function () {
                //隐藏loading
            });
2)、 ajaxError  全局错误处理

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
一般处理程序、ASP.NET核心知识(5)发布时间:2022-07-10
下一篇:
让我们的ASP.NET MVC应用可以单独维护验证消息发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap