Fetch：下一代 Ajax 技术

JS 中的几类异步请求：

1) AJAX

　1> AJAX= Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。用于页面部分异步同服务器交换数据避免页面整体请求

2>主要依靠 XMLHttpRequest 对象与后台服务器进行交互（老版本IE （IE5和IE6）使用 var variable=new ActiveXObject("Microsoft.XMLHTTP");）

3>调用 XMLHttpRequest 的open 打开服务器地址使用 send方法向服务器发送数据　

4> ajax 跨域访问

1.使用原始的jsonp格式：

ajax 在请求跨域地址时，使用传统的json /html / string 是取不到数据的需要使用jsonp 形式来获取数据

jsonp和json 类似但是在服务器需要将返回的字符串以函数名的形式返回,在ajax所在的页面需要定义那个那个返回函数

Stack Overflow 上的这里说的很清楚: Sending JSONP vs. JSON data?

2.jquery 提供了$.jsonp 函数用于解决跨域问题

 var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
    +"?id=1&callback=?";
    $.jsonp({
  "url": url,
  "success": function(data) {
    $("#current-group").text("当前工作组:"+data.result.name);
  },
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});

拓展：jquery的几种异步请求，ajax

　　1> $.load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中

　　2>$.get( url, [data], [callback] )：使用GET方式来进行异步请求

　　3>$.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

　　4>$.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件

　　5>$.Ajax

　　备注： $("#loading").bind("ajaxSend", function(){})我们可以通过bind的形式来绑定ajax实践

　　　　　可以通过 $.ajaxSetup( options ) : 设置全局 AJAX 默认选项

serialize() 与 serializeArray() 用于序列化数据

2) axios

是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

随着 vuejs 作者尤雨溪发布消息，不再继续维护vue-resource,并推荐大家使用 axios 开始，axios 进入了很多人的目光。axios本质也是对原生的XHR的封装，不过它是Promise 的实现版本，符合最新的ES规范，axios的几条特性：

(1)从浏览器中创建XHR；

(2)从node.js创建http请求；

(3)支持Promise API；

(4)客户端支持防御CSRF

(5)提供了一些并发请求的接口

//axios

axios.get('/user',

　　 { params: { ID: 12345 } })

　　.then(function (response) { console.log(response); })

　　.catch(function (error) { console.log(error); });

3) Fetch:

　　1>它和ajax类似可以向服务器发送和获取服务器的数据

2>它不同于ajax的基于事件绑定它是使用ES6中提供的Promise 基于结果期许

调用：

fetch(url,{ 头部信息 ,发送请求数据 }).then(function(){ 成功后处理 },function(){ 失败后处理});

它支持链式调用：

　　fetch(url,{}).then(function(){},function(){}).then(function(){})

eg:

fetch('doAct.action').then(function(res) {

if (res.ok) {

res.text().then(function(obj) {

// Get the plain text

})

}

}, function(ex) {

console.log(ex)

})

////////////////////////////////////////////////

fetch("doAct.action", {

    method: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    body: "keyword=荣耀7i&enc=utf-8&pvid=0v3w1kii.bf1ela"
}).then(function(res) {
    if (res.ok) {
        // To do with res
    } else if (res.status == 401) {
        // To do with res
    }
}, function(e) {
    // Handling errors
});

posted @ 2018-02-12 11:41 ★Angel★ 阅读(309) 评论(0) 编辑收藏举报

刷新页面返回顶部

姚卫军

Fetch：下一代 Ajax 技术

公告