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

简介:

一、jsonP

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

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

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

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

1
2
3
4
5
6
7
8
$.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实现,如下:

1
2
3
4
5
6
7
8
9
10
11
12
     @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等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  $.ajax({
                   async:  false ,
                 url :  '../dependence/queryPost.action' ,
                 success :  function (result) {
                     var  jobList = result.staffinfoVo.jobList;
                     if (jobList !=  null  && $( "option" , post).length<1){
                         post.append( '<option value="">-请选择-</option>' );
                         $.each(jobList,  function (i,item){ 
                             if (item.active== "Y" ){
                                 post.append( '<option value="' + item.jobCode + '">' +item.jobName+ '</option>' ).val(val);
                             }
                         });
                     }
                 }
             });

参考:

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

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





     本文转自 gaochaojs 51CTO博客,原文链接:http://blog.51cto.com/jncumter/1754829,如需转载请自行联系原作者

相关文章
|
8月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
78 0
|
8月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
3月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
24 0
|
7月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
142 2
|
6月前
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
65 0
|
8月前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
68 2
|
8月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
80 3
|
8月前
|
XML 开发框架 前端开发
Ajax学习(基础知识)
Ajax学习(基础知识)
|
8月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
|
8月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一