美文网首页
JS笔记:ajax基本须知

JS笔记:ajax基本须知

作者: 开水的杯子 | 来源:发表于2017-08-04 13:54 被阅读7次

AJAX基础

AJAX美曰其名就是从某个endpoint倒腾数据回来。

其一:fetch

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
简单用法

fetch('https://www.myjsonurl.com')
  .then(function(response) {
    return response.json();
  }).then(function(blob) {
    // do stuff with the json
    console.log(json);
  });

注意事项:

  1. fetch本身的return value是一个Promise<Response>。大多数情况我们要用里面的json,要先叫response.json之后才能用。
  2. 这个函数是异步的,所以console.log或者任何一个需要用到response的代码必须放在then block里面。
  3. 目前只有Chrome和Firefox会可靠的支持fetch,如果要在别的浏览器里面用,需要一个polyfill。一般大家管用whatwg-fetch
  4. 标准的fetch不会收发cookies也没有身份验证。如果需要身份验证,需要提供init变量。
    提供cookies:
fetch('https://example.com', {
  credentials: 'include'  
})

不提供cookies:

fetch('https://example.com', {
  credentials: 'omit'  
})

其二:Vanilla AJAX

http://api.jquery.com/jquery.ajax/
基本用法:

$.ajax({
  url: "www.example.com",
  cache: false,
  success: function(response){
    console.log(response);
  }
});

其三:最早的Vanilla JS XHR
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
感觉现在已经没人用了,所以大概不用过了。

相关文章

  • JS笔记:ajax基本须知

    AJAX基础 AJAX美曰其名就是从某个endpoint倒腾数据回来。 其一:fetch https://deve...

  • js、jq、ajax、linux基础面试点

    js的基本语法延伸:js内置对象延伸:js HTML DOM对象延伸:jQ基础知识 Ajax的基本工作原理延伸:j...

  • ajax学习

    1、废话不多说,直接上代码演示:创建基本的ajax的get请求的原生js代码。 创建基本的ajax的post请求的...

  • 24_用js写一个ajax的原生实现方法

    一、JS原生Ajax 1、基本概念 ajax:一种请求数据的方式,不需要刷新整个页面; 核心:ajax的技术核心是...

  • jquery的$.ajax的再次封装

    一、$.ajax为什么要再次封装 jquery很强大,基本js开发标准了,尔$.ajax做为异步加载数据功能也很强...

  • Ajax

    Ajax的基本理解 Ajax从定义上来讲,它并不是一门新的技术,它是由html,css,js,xml等技术...

  • JS ajax请求

    原生ajax请求 http://www.jb51.net/article/88084.htm原生的js 的基本步骤...

  • JS中的Ajax

    JS中的Ajax Ajax简介 Ajax为 Asynchronous Javascript And XML 的缩写...

  • 封装ajax

    利用npm安装axios 在src目录下创建ajax.jsajax.js 将ajax.js 文件引入main.js...

  • ajax的封装-ajax.js

    ajax.js:

网友评论

      本文标题:JS笔记:ajax基本须知

      本文链接:https://www.haomeiwen.com/subject/eumvlxtx.html