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

JQuery和原生JS跨域加载JSON数据或HTML。

2014-05-31 16:26 363 查看
前提：有时候需要在网页上，加载另一个网站上的数据。或者加载另一个网站上的一个页面。Js的Ajax请求不具备跨域功能，可以使用JQuery来实现。

网页端JS代码:

$(function(){
$.ajax({
type:"get",
async:false,
url:"http://localhost:13964/getpage.ashx?callback=?",//服务端URL，该URL返回一段JS数据。如需返回HTML，只需把HTML组织成JSON即可，比如{"html":"<html></html>"}
dataType:"jsonp",//表示该请求为跨域的JSOP请求
jsonp:"htmlcall",//作用未知。随便填，但也能正常执行
jsonpCallback:"htmlcallback",//该值会把URL中的callback参数值替换，比如会把callback=?替换成callback=htmlcallback
success:function(json){
$(json.selector).append(json.html);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert('fail');
alert(textStatus);
alert(errorThrown);
}
});
});


服务端代码：

publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
stringhtml=string.Empty;
using(FileStreamfs=newFileStream(AppDomain.CurrentDomain.BaseDirectory+"/temppage.html",FileMode.OpenOrCreate))
{
using(StreamReadersr=newStreamReader(fs))
{
html=sr.ReadToEnd();
}
}

JavaScriptSerializerjss=newJavaScriptSerializer();
Jsonpjsp=newJsonp();
jsp.html=html;
stringjson=jss.Serialize(jsp);
//这里需要注意的是，JSONP要返回的并不是标准的JSON格式，而是下面这样的一个格式
//callbackname(json)其中callbackname是从JS端传来的参数。json是JSON数据，括号也不能少。
stringcallback=context.Request["callback"];
context.Response.Write(callback+"("+json+")");

}
publicclassJsonp
{
publicstringhtml{get;set;}
publicstringselector="body";
}

//原生JS跨域方法

varscript=document.createElement("script");
script.src="http://192.168.1.145:8089/AdSource/D?adid="+advid+"&callback=lian_adv_writer";
script.type="text/javascript";
document.head.appendChild(script);

functionlian_adv_writer(data){
alert(data);

}


                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航