快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

学习、阅读笔记——jsonP&Ajax

一、jsonP

创新互联建站公司2013年成立,先为弓长岭等服务建站,弓长岭等地企业,进行企业商务咨询服务。为弓长岭企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

jsonP,客户端浏览器不允许跨域访问,当服务器的协议、地址、端口号有一个不同时,即为跨域。jsonP是json Padding的缩写,Padding可理解为后缀或者是填充。jsonP的重要特殊是具有一个回调函数,回调函数是调用者调用被调用域服务的标记,callback运行在被调用域服务器上。jQuery支持jsonP,语法如下:

jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?", 
			function(data) {
			    alert("Symbol: " + data.symbol + ", Price: " + data.price);
			});

?为回调函数名,默认为callback; 

还可以使用Ajax实现,语法如下:

$.ajax({  
        url:"http://localhost:20002/MyService.ashx?callback=?",     
        dataType:"jsonp",  
        jsonpCallback:"person",  
        success:function(data){  
            alert(data.name + " is a a" + data.sex);  
        }  
   });

《使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup》还给出了servlet实现,如下:

	@Override
        	protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
        	  throws ServletException, IOException {
        		String jsonData = getDataAsJson(req.getParameter("symbol"));
        		String output = req.getParameter("callback") + "(" + jsonData + ");";

        		resp.setContentType("text/javascript");
        	          
        		PrintWriter out = resp.getWriter();
        		out.println(output);
        		// prints: jsonp1232617941775({"symbol" : "IBM", "price" : "91.42"});
        	}

另外两篇参考文章,分别是:

我的一篇博文《json接口格式实现》和《深入理解jsonP》,jsonP的缺点是存在安全问题(客户端执行回调)和执行失败无提示。

二、Ajax

Ajax即为异步的js和xml,由html、css、js、xml、xmlHtppRequest等组成,除XmlHttpRequest以外,其他技术都是已熟的web标准技术。Ajax的优点有:1.异动请求;2.局部刷新;3.按需取数;缺点有:破坏浏览器的回退按钮行为;2.使用js作为驱动引擎,需考虑js兼容性和debug等。

Ajax的三个优点可以让页面更加丰富,交互更加自由,用户体现更佳,jQuery通过$.ajax提供了丰富的ajax功能,$.ajax的常用参数有data、type、success、beforesend、url、async等等。

 $.ajax({
		  		async: false,
				url : '../dependence/queryPost.action',
				success : function(result) {
					var jobList = result.staffinfoVo.jobList;
					if(jobList != null && $("option", post).length<1){
						post.append('-请选择-');
						$.each(jobList, function(i,item){ 
							if(item.active=="Y"){
								post.append(''+item.jobName+'').val(val);
							}
						});
					}
				}
			});

参考:

各种AJAX方法的使用比较(1)

轻松掌握AJAX(jQuery)异步通信


名称栏目:学习、阅读笔记——jsonP&Ajax
文章源于:http://6mz.cn/article/gesgod.html

其他资讯