ajax—Json

前端之家收集整理的这篇文章主要介绍了ajax—Json前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上一个视频播放例子是通过ajax实现的,异步刷新的好处我们已经体会到了,此外ajax传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程,因为ajax中有一个事实上的数据传输标准Json。那我们来介绍一下吧。

1.基础

Ø 定义

JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。它基于JavaScript(StandardECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,C++,C#,Java,JavaScript,Perl,Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成(网络传输速度快)。

Ø 特点

Json(是一个标准,就像XML一样,规定了对象以什么样的格式保存为一个字符串)将复杂对象序列化为一个字符串,在浏览器端再将字符串反序列化为javascript可读取的对象。其几乎为所有的语言所支持

Ø 来源

特点提到是像XML文件一样的,在ajax中,我们提高创建对象XMLHTTPRequset,看到前面是XML,最初的时候是为了解析和传递XML文件,可是我们通常发的是一些普通的文本或者字符串,当然xml格式存在一些缺点:Xml的缺点是太占空间,因为XML下面都是一个接着一个节点,这样必然占用很大的空间。为了降低数据流量,发明了json;类似于xml。传递数据,占的体积更少而已。

Xml包含的东西很复杂,并且占的空间大,如图:


Ø 用法

C#中将.NET对象序列化为一个Json字符串的方法:JavascriptSerializer().Serializer(p),JavascriptSerializer在System.Web.Extensions.dll中,是.Net3.x中新增加的类,如果在.NET2.0中则需要用第三方控件。

Ø JS解析Json

有的资料介绍了eval解析Json,这样存在不安全性,jquery等库提供了解析json的方法,有的浏览器支持json.parse;不支持的引用json2.js也是可以的。注意js对数组的变量也要for(vari=0;i<persons.length;i++)

2.应用

Ø 举例

第一步:新建一个person类

<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace json
{
    public class person
    {
        public string Name { get; set; }
        public string Age { get; set; }
        public string Email{ get; set; }
    }
}</strong></span>

新建处理程序为json.ashx(获得一个对象的json格式,即将对象序列化)

<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;

namespace json
{
    /// <summary>
    /// json 的摘要说明
    /// </summary>
    public class json : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
            context.Response.ContentType = "text/html";
            
            List<person> list = new List<person>();
            list.Add(new person { Name = "lxn",Age = "25",Email = "1234567@qq.com" });
            list.Add(new person { Name = "wzp",Email = "1234567@163.com" });
            list.Add(new person{ Name = "lxl",Age = "24",Email = "1234567@126.com" });
           

            JavaScriptSerializer jss = new JavaScriptSerializer(); //定义一个序列化的串
            //获取的是一个数组,将其序列化
            //string json= jss.Serialize(list);  //将list序列化
            //获取的是一个对象,将一个对象序列化
            string json = jss.Serialize(new person { Name = "lxl",Email = "1234567@126.com" });
            context.Response.Write(json);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}</strong></span>

新建html页为jsonHtml(Jsonhtml,将序列化的字符串转化为javascript对象)

<span style="font-family:Microsoft YaHei;font-size:14px;"><strong><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Json例子</title>
    <script src="ajax.js" type="text/javascript"></script>
    <script type="text/javascript">
        function go()
        {
            ajax("json.ashx",function (resTxt) {
               var p = JSON.parse(resTxt); //p为一个对象
                alert("姓名:" + p.Name + ";年龄:" + p.Age)
                  
                //alert(resTxt);
                //对数组式的进行遍历
                //var persons = JSON.parse(resTxt);
                //for (var i = 0; i < persons.length; i++) {
                //    var p = persons[i];
                //    alert("姓名:" + p.Name + ";年龄:" + p.Age)

                //}
            });

        }
    </script>
</head>
<body onload="go()">

</body>
</html>
</strong></span>
ajax交互页面
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>function ajax(url,onsuccess) {
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR
    xmlhttp.open("POST",url,true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求

    //DRY:不要复制粘贴代码
    //AJAX是异步的,并不是等到服务器端返回才继续执行
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
        {
            if (xmlhttp.status == 200) //如果Http状态码为200则是成功
            {
                onsuccess(xmlhttp.responseText);
            }
            else {
                alert("AJAX服务器返回错误!");
            }
        }
    }
    //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!!
    xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧!
}</strong></span>


注解:在服务器端通过上面的把一个对象转换为json字符串,在客户端通过json.parse将其转为对象,是一个对应的关系。Json.js应对不支持的parse的,实现兼容。产生的效果自己动手试试吧。

同样我们也可以对数组形式进行转化,在html页用for对其进行遍历即可。

其他同对象转换,只是需要修改部分代码即可,如下:

html页面

<span style="font-family:Microsoft YaHei;font-size:14px;"><strong> function go()
        {
            ajax("json.ashx",function (resTxt) {
               //var p = JSON.parse(resTxt); //p为一个对象
               // alert("姓名:" + p.Name + ";年龄:" + p.Age)
                //    )
                //alert(resTxt);
                //对数组式的进行遍历
                var persons = JSON.parse(resTxt);
                for (var i = 0; i < persons.length; i++) {
                    var p = persons[i];
                    alert("姓名:" + p.Name + ";年龄:" + p.Age)

                }
            });

        }</strong></span>

一般处理程序面:
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>  public void ProcessRequest(HttpContext context)
        {
            //context.Response.ContentType = "text/plain";
            context.Response.ContentType = "text/html";
            
            List<person> list = new List<person>();
            list.Add(new person { Name = "lxn",Email = "1234567@126.com" });
           

            JavaScriptSerializer jss = new JavaScriptSerializer(); //定义一个序列化的串
            //获取的是一个数组,将其序列化
            string json= jss.Serialize(list);  //将list序列化
            //获取的是一个对象,将一个对象序列化
            //string json = jss.Serialize(new person { Name = "lxl",Email = "1234567@126.com" });
            context.Response.Write(json);
        }</strong></span>

3.总结

json和xml一样都是一种数据交换格式:

1、方便于传输,较少冗余的字符。当然直接传二进制是最好的,但面临难解析的问题。亦可以是xml、纯字符串的方式,但json有其独到的好处。

2、方便转换。有很多的json api提供了json字符串转成对象、对象转换成json串的方法

3、易于阅读。json代码的良好结构,可以很直观地了解存的是什么内容

这是目前初步的理解,不足之处请多指教~

猜你在找的Ajax相关文章