您的位置：首页 > Web前端 > JavaScript

javascript 隐藏框架和远程脚本

2013-02-18 15:33 197 查看
注：Ajax技术出现之前，其中应用最广泛的技术是隐藏框架和远程脚本，隐藏框架利用了<frame>或者<iframe>元素，创建一个可用JavaScript与服务器通信的框架（0像素高<frame>或者隐藏的<iframe>元素）。

代码：

隐藏框架：

<!DOCTYPE>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HiddenFrame</title>
<linkhref="Styles/upfile.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<formid="upFile"action="uploadHandler.ashx"method="post"target="iframe"enctype="multipart/form-data">
<inputid="upload"name="upload"type="file"/>
<inputtype="submit"/>
</form>
<iframeid="iframe"name="iframe"style="display:none;"></iframe>
<scripttype="text/javascript">
functionFn_CallBack(){
alert("上传成功!");
}
</script>
</body>
</html>


　核心：将form的target="iframe"指向iframe框架并且iframe的css设置为display：none这样就隐藏了上传文件的刷新的过程,其实还是在刷新只是感觉不到而已。

uploadHandler代码就简单的保存不做其他操作。

publicvoidProcessRequest(HttpContextcontext)
{
HttpPostedFilefile=context.Request.Files["upload"];//upload要和htmltype="file"一致
stringfilePath=System.Web.HttpContext.Current.Server.MapPath("~/file");
file.SaveAs(filePath+"/"+file.FileName);
stringscript="<script>parent.Fn_CallBack()</script>";
context.Response.Write(script);
}

publicboolIsReusable
{
get
{
returnfalse;
}
}


　　

　　远程脚本：动态创建script标签利用scr指向服务器的这样就具备了跨域的能力同样如果iframe的url指向其他地方也具备了跨域的能力，但是远程脚本效率高，缺点不能传送二进制文件。

代码：

<!DOCTYPE>
<html>
<head>
<title>remotescript</title>
<styletype="text/css">
body
{
font-size:20px20px20px20px;
font-family:Tahoma;
font-size:14px;
}
</style>
</head>
<body>
<formaction="#">
输入你的名字:
<inputid="userName"name="userName"type="text"/>
<inputtype="button"value="发送"onclick="send()"/>
</form>
<scripttype="text/javascript">
functionsend(){
varresult;
varmsg=encodeURIComponent($("userName").value);//编码encodeURIComponent
varscript=document.createElement("script");//创建script元素
script.src="Script.ashx?msg="+msg;//设置script的scr属性
document.getElementsByTagName("head")[0].appendChild(script);//将script元素附加到页面dom树中
setTimeout(function(){
alert(result);
},5000);
}

functionhadleResult(msg){
alert(msg);
}

function$(element){
if(typeofelement=="string"){
returndocument.getElementById(element);
}else{
returnelement;
}
}

functionremovejscssfile(filename,filetype){
//判断文件类型
vartargetelement=(filetype=="js")?"script":(filetype=="css")?"link":"none";
//判断文件名
vartargetattr=(filetype=="js")?"src":(filetype=="css")?"href":"none";
varallsuspects=document.getElementsByTagName(targetelement);
//遍历元素，并删除匹配的元素
for(vari=allsuspects.length;i>=0;i--){
if(allsuspects[i]&&allsuspects[i].getAttribute(targetattr)!=null&&allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]);
}
}
</script>
</body>
</html>


Script的代码：


publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/javascript";
stringmsg=context.Request.QueryString["msg"];
if(msg==null)msg="";
stringscript="result='hello,"+msg+"!';hadleResult(result);$('userName').value='';removejscssfile('Script.ashx','js');";
context.Response.Write(script);
}

publicboolIsReusable
{
get
{
returnfalse;
}
}


问题在利用定时器判断result是否存在(目的保证script的ulr指向的服务器运行成功!)后访问result为未定义？求解看了回来好看看那个人的script来解决的跨域的问题。


附件jqueryjsonp代码(参考中国开源社区)：

后台：

[WebMethod]
[ScriptMethod(ResponseFormat=ResponseFormat.Json,XmlSerializeString=false,UseHttpGet=true)]
publicvoidLogin(stringuserName,stringuserPwd,stringmacAddress)
{
varresponse=HttpContext.Current.Response;
varcontext=HttpContext.Current.Request;

response.Clear();//清空无关信息
response.Buffer=true;//完成整个响应后再发送
response.Charset="GB2312";//设置输出流的字符集-中文
response.AppendHeader("Content-Disposition","attachment;filename=Report.doc");//追加头信息
response.ContentEncoding=System.Text.Encoding.GetEncoding("GB2312");//设置输出流的字符集
response.ContentType="text/json";

//获取回调函数名
stringcallback=context.QueryString["callback"];
varjsons="[{\"taskId\":\"100\",\"projectName\":\"张三\"}]";
response.Write(callback+"("+jsons+")");
response.End();

}


前台：

$(function(){
$("#jsonp_btn").click(function(){
$.ajax({
async:false,
url:'http://localhost:82/Email.asmx/Login',//跨域URL
dataType:'jsonp',
jsonpCallback:'persons',//默认callback
data:{"userName":"admin","userPwd":"etimes2011@","macAddress":""},//请求数据
timeout:5000,
beforeSend:function(){
//jsonp方式此方法不被触发。原因可能是dataType如果指定为jsonp的话，就已经不是ajax事件了
},
success:function(data){
//客户端jquery预先定义好的callback函数，成功获取跨域服务器上的json数据后，会动态执行这个callback函数
alert("success"+data[0].projectName);

},
complete:function(XMLHttpRequest,textStatus){

},
error:function(xhr){
//jsonp方式此方法不被触发
//请求出错处理
alert("请求出错(请检查相关度网络状况.)");
}
});

});
});

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航