新葡亰496net Web前端 Jquery ajax请求中datatype的含义

Jquery ajax请求中datatype的含义



谈谈前后端的分工协作

2015/05/15 · HTML5 · 1
评论 ·
Web开发

原文出处:
小胡子哥的博客(@Barret李靖)   

前后端分工协作是一个老生常谈的大话题,很多公司都在尝试用工程化的方式去提升前后端之间交流的效率,降低沟通成本,并且也开发了大量的工具。但是几乎没有一种方式是令双方都很满意的。事实上,也不可能让所有人都满意。根本原因还是前后端之间的交集不够大,交流的核心往往只限于接口及接口往外扩散的一部分。这也是为什么很多公司在招聘的时候希望前端人员熟练掌握一门后台语言,后端同学了解前端的相关知识。

一切从一个普通的前端ajax请求jspringMVC后端的例子开始,

jQuery方法使用Ajax技术

一、开发流程

前端切完图,处理好接口信息,接着就是把静态demo交给后台去拼接,这是一般的流程。这种流程存在很多的缺陷。

  • 后端同学对文件进行拆分拼接的时候,由于对前端知识不熟悉,可能会搞出一堆bug,到最后又需要前端同学帮助分析原因,而前端同学又不是特别了解后端使用的模板,造成尴尬的局面。
  • 如果前端没有使用统一化的文件夹结构,并且静态资源(如图片,css,js等)没有剥离出来放到
    CDN,而是使用相对路径去引用,当后端同学需要对静态资源作相关配置时,又得修改各个link,script标签的src属性,容易出错。
  • 接口问题
    1. 后端数据没有准备好,前端需要自己模拟一套,成本高,如果后期接口有改变,自己模拟的那套数据又不行了。
    2. 后端数据已经开发好,接口也准备好了,本地需要代理线上数据进行测试。这里有两个费神的地方,一是需要代理,否则可能跨域,二是接口信息如果改动,后期接你项目的人需要改你的代码,麻烦。
  • 不方便控制输出。为了让首屏加载速度快一点,我们期望后端先吐出一点数据,剩下的才去
    ajax 渲染,但让后端吐出多少数据,我们不好控。

当然,存在的问题远不止上面枚举的这些,这种传统的方式实在是不酷(Kimi
附身^_^)。还有一种开发流程,SPA(single page
application),前后端职责相当清晰,后端给我接口,我全部用 ajax
异步请求,这种方式,在现代浏览器中可以使用 PJAX 稍微提高体验,Facebook
早在三四年前对这种 SPA
的模式提出了一套解决方案,quickling+bigpipe,解决了 SEO
以及数据吐出过慢的问题。他的缺点也是十分明显的:

  • 页面太重,前端渲染工作量也大
  • 首屏还是慢
  • 前后端模板复用不了
  • SEO 依然很狗血(quickling 架构成本高)
  • history 管理麻烦

问题多的已经是无力吐槽了,当然他依然有自己的优势,咱们也不能一票否决。

针对上面看到的问题,现在也有一些团队在尝试前后端之间加一个中间层(比如淘宝UED的
MidWay )。这个中间层由前端来控制。

JavaScript

+—————-+ | F2E | +—↑——–↑—+ | | +—↓——–↓—+ |
Middle | +—↑——–↑—+ | | +—↓——–↓—+ | R2E |
+—————-+

1
2
3
4
5
6
7
8
9
10
11
    +—————-+
    |       F2E      |
    +—↑——–↑—+
        |        |
    +—↓——–↓—+
    |     Middle     |
    +—↑——–↑—+
        |        |  
    +—↓——–↓—+
    |       R2E      |
    +—————-+

中间层的作用就是为了更好的控制数据的输出,如果用MVC模型去分析这个接口,R2E(后端)只负责
M(数据) 这部分,Middle(中间层)处理数据的呈现(包括 V 和
C)。淘宝UED有很多类似的文章,这里不赘述。

前端jquery ajax 请求:

三层封装方法:

最底层:$.ajax();
中间层:.load()、$.get()和$.post()
最高层:$.getScript()和$.getJSON()

二、核心问题

上面提出了在业务中看到的常见的三种模式,问题的核心就是数据交给谁去处理。数据交给后台处理,这是模式一,数据交给前端处理,这是模式二,数据交给前端分层处理,这是模式三。三种模式没有优劣之分,其使用还是得看具体场景。

既然都是数据的问题,数据从哪里来?这个问题又回到了接口。

  • 接口文档由谁来撰写和维护?
  • 接口信息的改动如何向前后端传递?
  • 如何根据接口规范拿到前后端可用的测试数据?
  • 使用哪种接口?JSON,JSONP?
  • JSONP 的安全性问题如何处理?

这一系列的问题一直困扰着奋战在前线的前端工程师和后端开发者。淘宝团队做了两套接口文档的维护工具,IMS以及DIP,不知道有没有对外开放,两个东西都是基于
JSON Schema 的一个尝试,各有优劣。JSON Schema 是对 JSON
的一个规范,类似我们在数据库中创建表一样,对每个字段做一些限制,这里也是一样的原理,可以对字段进行描述,设置类型,限制字段属性等。

接口文档这个事情,使用 JSON Schema 可以自动化生产,所以只需编写 JSON
Schema 而不存在维护问题,在写好的 Schema
中多加些限制性的参数,我们就可以直接根据 Schema 生成 mock(测试) 数据。

mock 数据的外部调用,这倒是很好处理:

JavaScript

typeof callback === “function” && callback({ json: “jsonContent” })

1
2
3
typeof callback === "function" && callback({
   json: "jsonContent"
})

在请求的参数中加入 callback 参数,如
/mock/hashString?cb=callback,一般的 io(ajax)
库都对异步数据获取做了封装,我们在测试的时候使用 jsonp,回头上线,将
dataType 改成 json 就行了。

JavaScript

IO({ url: “”, dataType: “jsonp”, //json success:
function(){} })

1
2
3
4
5
IO({
  url: "http://barretlee.com",
  dataType: "jsonp", //json
  success: function(){}
})

这里略微麻烦的是 POST 方法,jsonp 只能使用 get 方式插入 script
节点去请求数据,但是 POST,只能呵呵了。

这里的处理也有多重方式可以参考:

  • 修改 Hosts,让 mock 的域名指向开发域名
  • mock 设置 header 响应头,Access-Allow-Origin-Control

对于如何拿到跨域的接口信息,我也给出几个参考方案:

  • fiddler
    替换包,好像是支持正则的,感兴趣的可以研究下(求分享研究结果,因为我没找到正则的设置位置)
  • 使用 HTTPX 或者其他代理工具,原理和 fiddler
    类似,不过可视化效果(体验)要好很多,毕竟人家是专门做代理用的。
  • 自己写一段脚本代理,也就是本地开一个代理服务器,这里需要考虑端口的占用问题。其实我不推荐监听端口,一个比较不错的方案是本地请求全部指向一个脚本文件,然后脚本转发URL,如:

JavaScript

原始请求: 在ajax请求的时候: $.ajax({
url: “” });

1
2
3
4
5
原始请求:http://barretlee.com/api/test.json
在ajax请求的时候:
$.ajax({
  url: "http://<local>/api.php?path=/api/text.json"
});
  • php中处理就比较简单啦:

JavaScript

if(!isset($_GET[“page”])){ echo 0; exit(); } echo
file_get_contents($_GET[“path”]);

1
2
3
4
5
if(!isset($_GET["page"])){
  echo 0;
  exit();
}
echo file_get_contents($_GET["path"]);
  • Ctrl+S,保存把线上的接口数据到本地的api文件夹吧-_-||
$.ajax({  
                url: getAbsoluteUrl('score/findScore'),  
                type: 'POST',  
                dataType: 'json',    //第1处  
                success: function (res) {  
                    alert(res);  
                },  
                error: function (msg) {  
                  alert(msg);  
                }  
            });  

一、中间层——load()、$get()、$post()

(1)load(参数1,参数2,参数3)——————-(局部方法)
1,参数1:url 必需的URL,规定希望加载的url地址(后端php代码文件路径)
2,参数2:data 可选,与请求一同发送的 key/value 数据,参数类型为
Object;
3,参数3: callback 可选,load方法完成后所执行的回调函数,参数类型为函数
Function。(通常情况下需要书写)

<div id="tip"></div>
<label for="username">用户名:</label>
<input type="text" name="userID" value="" id="username"/>
<input type="button" value="验证" id="btn"/>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
var cO=$("#username").val();
$("#tip").load("js/checkU.php?username="+cO,function(res,stateT,xhr){
                        console.log(res);
//                      console.log(res);    //js ====    xhr.responseText
//                      console.log(statusT);  //        success
//                      console.log(xhr);   //js ====    new XMLHttpRequest()
//                      console.log(xhr.status);//        200
//                      console.log(xhr.statusText);//     ok

                    });
                });
            });
    </script>

(2)$.get(url,[data],[callback],[type])————————-(全局方法)

url: 必需 待载入页面的URL地址;
data: [可选] 待发送 Key/value 参数;
callback: [可选] 载入成功时回调函数;
type: [可选] 返回内容格式,xml, html, script, json, text, _default。

<div id="tip"></div>
<label for="username">用户名:</label>
<input type="text" name="userID" value="" id="username"/>
<input type="button" value="验证" id="btn"/>

    <script type="text/javascript">
            $(function(){
                $("#btn").click(function(){
                    var cO=$("#username").val();
                    $.get("js/checkU.php",{"username":cO},function(res,stateT,xhr){
                        $("#tip").html(xhr.responseText);
                        console.log(res);
                        console.log(stateT);
                    });
                });
            });
    </script>

(3)$.post(URL,data,callback)—————————-(全局方法)

URL 必需 参数规定您希望请求的 URL。
Data [可选] 参数规定连同请求发送的数据。
Callback [可选] 参数是请求成功后所执行的函数名。

三、小结

本文只是对前后端协作存在的问题和现有的几种常见模式做了简要的列举,JSON
Schema
具体如何去运用,还有接口的维护问题、接口信息的获取问题没有具体阐述,这个后续有时间会整理下我对他的理解。

赞 2 收藏 1
评论

图片 1

后端 springMVC代码
···
@RequestMapping(value = “findScore”, method =
RequestMethod.POST,
produces = “application/json”)
public @ResponseBody Map findScore(Model model, ServletRequest request)
{

二、最高层——-$.getScript()、$.getJSON()

$.getScript(),用于加载特定的 JS 文件;
$.getJSON(),用于专门加载 JSON 文件。

1.$.getScript(url,callback)
url参数为服务器的请求地址,
callback参数为数据请求成功后,执行的回调函数。

    Map<String , Object> map = new LinkedHashMap<String, Object>();  

    map.put("createdUser","jiabaochina");  
    map.put("score", 5);  
    map.put("status", "success");  
    return map;  
} 

三、底层$ajax()

$.ajax()是所有 ajax
方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。JQuery封装的底层Ajax操作函数,更加侧重于定制化选项,让开发人员控制的细节方面更加精确。
语法:
$.ajax({name:value, name:value, … })
参数 类型 说明
url String 发送请求的地址
type String 请求方式:POST 或 GET,默认 GET
timeout Number 设置请求超时的时间(毫秒)
data Object 或String 发送到服务器的数据,键值对字符串或对象
dataType String 返回的数据类型,比如 html、xml、json 等
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数
complete Function 请求完成后调用的回调函数
success Function 请求成功后调用的回调函数
error Function 请求失败时调用的回调函数
async Boolean 默认为Boolean 是否异步处理。默认为 true,false 为同步处理

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图