JSON 超级快速入门 完 搭建一个超级不规范的REST框架
前言：
经过2天的学习，基本上掌握了javascript和json和ajax，下面我将搭建一个很不规范的REST框架，为web2.0开放api做准备。
正文：
1 下载：json.js,Newtonsoft.Json.dll
2 自己写一个ajax.js
functionCreateAjaxRequest(){
varreq;
if(window.XMLHttpRequest){
req=newXMLHttpRequest();
}elseif(window.ActiveXObject){
req=newActiveXObject("Microsoft.XMLHTTP");
}
returnreq;
}
varreq;
if(window.XMLHttpRequest){
req=newXMLHttpRequest();
}elseif(window.ActiveXObject){
req=newActiveXObject("Microsoft.XMLHTTP");
}
returnreq;
}
3.添加一个IHttpHandler，作为REST的数据源，他的输出符合Json规范，大概意思很简单，从传入的参数里面获取变量，然后查数据库取得datatable,最后经过json的序列化返回response。
Code
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('<spanid="ajaxresponse"><pstyle="text-aligh:center;">Pleasewait</p></span>');
varusrdefaultcss=true;
if(typeofdefaultcss=='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
functionOnloadCss(href)
{
document.createStyleSheet(href);
}
//http://homepage.yesky.com/45/7728545.shtml
functionLoadJsCssFile(filename,filetype)
{
if(filetype=="js")
{
//判断文件类型
varfileref=document.createElement('script')//创建标签
fileref.setAttribute("type","text/javascript")//定义属性type的值为text/javascript
fileref.setAttribute("src",filename)//文件的地址
}
elseif(filetype=="css")
{
//判断文件类型
varfileref=document.createElement("link")
fileref.setAttribute("rel","stylesheet")
fileref.setAttribute("type","text/css")
fileref.setAttribute("href",filename)
}
if(typeoffileref!="undefined")
document.getElementsByTagName("head")[0].appendChild(fileref)
}
this.server='http://localhost:3652/Pixysoft.Web.CitiBox';
document.write('<spanid="ajaxresponse"><pstyle="text-aligh:center;">Pleasewait</p></span>');
varusrdefaultcss=true;
if(typeofdefaultcss=='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
functionOnloadCss(href)
{
document.createStyleSheet(href);
}
//http://homepage.yesky.com/45/7728545.shtml
functionLoadJsCssFile(filename,filetype)
{
if(filetype=="js")
{
//判断文件类型
varfileref=document.createElement('script')//创建标签
fileref.setAttribute("type","text/javascript")//定义属性type的值为text/javascript
fileref.setAttribute("src",filename)//文件的地址
}
elseif(filetype=="css")
{
//判断文件类型
varfileref=document.createElement("link")
fileref.setAttribute("rel","stylesheet")
fileref.setAttribute("type","text/css")
fileref.setAttribute("href",filename)
}
if(typeoffileref!="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("");
}
//取得数据，并且处理
functionhandleStateChange()
{
if(req.readyState==4)
{
if(req.status==200||req.status==0)
{
//取得返回字符串
varresp=req.responseText;
//构造返回JSON对象的方法
varjson=resp.parseJSON();
//构造返回结果
//显示返回结果
document.getElementById("ajaxresponse").innerHTML=GetProductResponse(json);
}
}
}
functionGetProductResponse(json)
{
varretvalue='';
retvalue+='<divclass="lstContent_product">';
retvalue+='<ul>';
for(i=0;i<json.length;i++)
{
retvalue+='<li>';
retvalue+='<pclass="product_img">';
retvalue+='<ahref="'+json[i].Url+'"title="'+json[i].Productname+'"target="_blank">';
retvalue+='<imgsrc='+json[i].Imgurl+'alt=""/>';
retvalue+='</a>';
retvalue+='</p>';
retvalue+='<pclass="product_name">';
retvalue+='<ahref="'+json[i].Url+'"title="'+json[i].Productname+'"target="_blank">'+json[i].Productname+'</a>';
retvalue+='</p>';
retvalue+='<pclass="product_retailprice">';
retvalue+='零售价￥'+json[i].Price+'';
retvalue+='</p>';
retvalue+='<pclass="product_lotprice">';
retvalue+='批发价:[登录问价]</p>';
retvalue+='</li>';
}
retvalue+='</ul>';
retvalue+='</div>';
returnretvalue;
}
req=CreateAjaxRequest();
try
{
req.onreadystatechange=handleStateChange;
req.open("GET",'REST.do?type=hotproduct&count='+productnumber,true);
req.send(null);
}
catch(exception)
{
alert("");
}
//取得数据，并且处理
functionhandleStateChange()
{
if(req.readyState==4)
{
if(req.status==200||req.status==0)
{
//取得返回字符串
varresp=req.responseText;
//构造返回JSON对象的方法
varjson=resp.parseJSON();
//构造返回结果
//显示返回结果
document.getElementById("ajaxresponse").innerHTML=GetProductResponse(json);
}
}
}
functionGetProductResponse(json)
{
varretvalue='';
retvalue+='<divclass="lstContent_product">';
retvalue+='<ul>';
for(i=0;i<json.length;i++)
{
retvalue+='<li>';
retvalue+='<pclass="product_img">';
retvalue+='<ahref="'+json[i].Url+'"title="'+json[i].Productname+'"target="_blank">';
retvalue+='<imgsrc='+json[i].Imgurl+'alt=""/>';
retvalue+='</a>';
retvalue+='</p>';
retvalue+='<pclass="product_name">';
retvalue+='<ahref="'+json[i].Url+'"title="'+json[i].Productname+'"target="_blank">'+json[i].Productname+'</a>';
retvalue+='</p>';
retvalue+='<pclass="product_retailprice">';
retvalue+='零售价￥'+json[i].Price+'';
retvalue+='</p>';
retvalue+='<pclass="product_lotprice">';
retvalue+='批发价:[登录问价]</p>';
retvalue+='</li>';
}
retvalue+='</ul>';
retvalue+='</div>';
returnretvalue;
}
7. 新建一个html页面，输入一下代码：
<html>
<head>
</head>
<body>
MyHotProduct!
<scriptlanguage="javascript">
productnumber=4;defaultcss=true;</script>
<scriptlanguage="javascript"type="text/javascript"src="js/REST/REST_product_preload.js">
</script>
<scriptlanguage="javascript"type="text/javascript"src="js/REST/REST_product.js">
</script>
</body>
</html>
1、win10解决vc++6.0不兼容问题方法
2、Java实验报告（实验一）
3、python函数之匿名函数
4、Java WebService 简单实例[转载]
5、[luoguP1033] 自由落体（模拟？）
<head>
</head>
<body>
MyHotProduct!
<scriptlanguage="javascript">
productnumber=4;defaultcss=true;</script>
<scriptlanguage="javascript"type="text/javascript"src="js/REST/REST_product_preload.js">
</script>
<scriptlanguage="javascript"type="text/javascript"src="js/REST/REST_product.js">
</script>
</body>
</html>
后记：
本REST框架需要ajax、json背景知识，引用了json.js,json.net类库
本REST例子无法正常运行，紧紧作为一个思路。如果需要正常运行，还需要我们公司自己的框架。当然经过合理的修改是可以正常运行的。
优质内容筛选与推荐>>1、win10解决vc++6.0不兼容问题方法
2、Java实验报告（实验一）
3、python函数之匿名函数
4、Java WebService 简单实例[转载]
5、[luoguP1033] 自由落体（模拟？）