JSON 超级快速入门 完 搭建一个超级不规范的REST框架

前言：

经过2天的学习，基本上掌握了javascript和json和ajax，下面我将搭建一个很不规范的REST框架，为web2.0开放api做准备。

正文：

1 下载：json.js,Newtonsoft.Json.dll

2 自己写一个ajax.js

function CreateAjaxRequest() {

var req;

if (window.XMLHttpRequest) {

req = new XMLHttpRequest();

}else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

return req;

}

3.添加一个IHttpHandler，作为REST的数据源，他的输出符合Json规范，大概意思很简单，从传入的参数里面获取变量，然后查数据库取得datatable,最后经过json的序列化返回response。

Code

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Pixysoft.Framework.Noebe;

using System.Collections.Generic;

/// <summary>

/// RESThandler 的摘要说明

/// </summary>

[Pixysoft.Framework.Security.Entity.SkipPage]

public class RESThandler : IHttpHandler

{

private const int DefaultCountNumber = 6;

#region IHttpHandler 成员

public bool IsReusable

{

get { return true; }

}

public void ProcessRequest(HttpContext context)

{

context.Response.Clear();

context.Response.ClearContent();

string type = context.Request.QueryString["type"];

string count = context.Request.QueryString["count"];

if (string.IsNullOrEmpty(type) || string.IsNullOrEmpty(type.Trim()))

{

context.Response.Write("");

return;

}

int countNum;

if (!int.TryParse(count, out countNum))

{

countNum = DefaultCountNumber;//default value

}

if (countNum < 0 || countNum > 12)

countNum = DefaultCountNumber;

switch (type)

{

case RestType.hotproduct:

{

INoebeCommand command = NoebeManager.Instance.NoebeCommand;

command.SQL = "SELECT TOP " + countNum + " WEB_ITEMINFO.ITEMCODE AS ITEMCODE,WEB_ITEMINFO.ITEMNAME AS ITEMNAME,WEB_ITEMINFO.PRICE AS PRICE,WEB_ITEMIMG.THUMBPICURL AS THUMBPICURL FROM WEB_ITEMINFO INNER JOIN WEB_ITEMIMG ON WEB_ITEMINFO.ITEMCODE = WEB_ITEMIMG.ITEMCODE ORDER BY WEB_ITEMINFO.CREATEDATE,WEB_ITEMINFO.MODIDATE";

DataTable table = command.ExecuteReader();

List<HotProduct> list = new List<HotProduct>();

foreach (DataRow row in table.Rows)

{

HotProduct pro = new HotProduct();

pro.Imgurl = GetImageUrl(row["THUMBPICURL"].ToString());

pro.Price = double.Parse(row["PRICE"].ToString()).ToString(".00");

pro.Productname = Pixysoft.StringCoder.StringTrim(row["ITEMNAME"].ToString(), 15);

pro.Url = "common/item.aspx?itemcode=" + row["ITEMCODE"].ToString();

list.Add(pro);

}

context.Response.Write(Pixysoft.Json.MyJson.Instance.Serialize(list));//我把Json.net封装了一下，实际上还是调用了他的javascript.serialize的方法

return;

break;

}

default:

{

context.Response.Write("");

return;

break;

}

}

}

#endregion

private string GetImageUrl(string url)

{

if (!url.StartsWith("http://"))

{

return HttpContext.Current.Server.MapPath(url);

}

return url;

}

}

[Serializable]

public class HotProduct

{

string imgurl;

string url;

string productname;

string price;

public string Imgurl

{

get { return imgurl; }

set { imgurl = value; }

}

public string Url

{

get { return url; }

set { url = value; }

}

public string Productname

{

get { return productname; }

set { productname = value; }

}

public string Price

{

get { return price; }

set { price = value; }

}

}

class RestType

{

public const string hotproduct = "hotproduct";

}

4.在web.config里面注册这个handler

<add verb="GET" path="REST.do" type="RESThandler,App_Code"/>

因为我的handler在web项目里面写的，所以type的dll引用了App_Code

5.写一个REST_product_preload.js，目的是动态导入需要使用的ajax.js/json.js，当然还有自己定义的css

//写下一个mark，被ajax填充

this.server = 'http://localhost:3652/Pixysoft.Web.CitiBox';

document.write('<span id="ajaxresponse"><p style="text-aligh:center;">Please wait</p></span>');

var usrdefaultcss = true;

if (typeof defaultcss == 'undefined')

{

usrdefaultcss = true;

}

else

{

usrdefaultcss = defaultcss;

}

if (usrdefaultcss)

LoadJsCssFile(this.server + '/App_Themes/REST/REST_product.css','css');

LoadJsCssFile(this.server + '/js/ajax/ajax.js','js');

LoadJsCssFile(this.server + '/js/json/json.js','js');

//动态加载css

function OnloadCss(href)

{

document.createStyleSheet(href);

}

//http://homepage.yesky.com/45/7728545.shtml

function LoadJsCssFile(filename, filetype)

{

if (filetype=="js")

{

//判断文件类型

var fileref=document.createElement('script')//创建标签

fileref.setAttribute("type","text/javascript")//定义属性type的值为text/javascript

fileref.setAttribute("src", filename)//文件的地址

}

else if (filetype=="css")

{

//判断文件类型

var fileref=document.createElement("link")

fileref.setAttribute("rel", "stylesheet")

fileref.setAttribute("type", "text/css")

fileref.setAttribute("href", filename)

}

if (typeof fileref!="undefined")

document.getElementsByTagName("head")[0].appendChild(fileref)

}

6.写一个REST_product.js，这个就是调用ajax读取handler的json数据，并且显示到页面。（我就被一个ajax问题搞了很久，终于发现通过写<span>，然后替换里面的span.htmltext就可以实现动态加载数据）

//获得数据

req = CreateAjaxRequest();

try

{

req.onreadystatechange = handleStateChange;

req.open("GET", 'REST.do?type=hotproduct&count='+productnumber, true);

req.send(null);

}

catch(exception)

{

alert("");

}

//取得数据，并且处理

function handleStateChange()

{

if(req.readyState == 4)

{

if (req.status == 200 || req.status == 0)

{

// 取得返回字符串

var resp = req.responseText;

// 构造返回JSON对象的方法

var json = resp.parseJSON();

//构造返回结果

// 显示返回结果

document.getElementById("ajaxresponse").innerHTML=GetProductResponse(json);

}

}

}

function GetProductResponse(json)

{

var retvalue='';

retvalue +='<div class="lstContent_product">';

retvalue+='<ul>';

for(i=0;i<json.length;i++)

{

retvalue+='<li>';

retvalue+='<p class="product_img">';

retvalue+='<a href="'+json[i].Url+'" title="'+json[i].Productname+'" target="_blank" >';

retvalue+='<img src='+json[i].Imgurl+' alt="" />';

retvalue+='</a>';

retvalue+='</p>';

retvalue+='<p class="product_name">';

retvalue+='<a href="'+json[i].Url+'" title="'+json[i].Productname+'" target="_blank" >'+json[i].Productname+'</a>';

retvalue+='</p>';

retvalue+='<p class="product_retailprice">';

retvalue+='零售价 ￥'+json[i].Price+'';

retvalue+='</p>';

retvalue+='<p class="product_lotprice">';

retvalue+='批发价: [登录问价]</p>';

retvalue+='</li>';

}

retvalue+='</ul>';

retvalue +='</div>';

return retvalue;

}

7. 新建一个html页面，输入一下代码：

<html>

<head>

</head>

<body>

My Hot Product!

<script language="javascript">

productnumber=4;defaultcss=true;</script>

<script language="javascript" type="text/javascript" src="js/REST/REST_product_preload.js">

</script>

<script language="javascript" type="text/javascript" src="js/REST/REST_product.js">

</script>

</body>

</html>

后记：

本REST框架需要ajax、json背景知识，引用了json.js,json.net类库

本REST例子无法正常运行，紧紧作为一个思路。如果需要正常运行，还需要我们公司自己的框架。当然经过合理的修改是可以正常运行的。