js传统的浏览器异步功能用XMLHttpRequest来实现。
现在的浏览器原生js倾向于用fetch来和服务器交互数据。
现实中，很多开发者用axios来实现，他们也都建议，初学者从fetch学起。
fetch用于向资源发起一个请求，收到并处理回应。
基本用法： fetch(url地址)
这个函数返回的是一个promise。promise的概念跟异步相关，感兴趣的同学可以去研究，不熟悉的看下面用法就好。
此处列举三处资源：
1、页面相同位置的资源文件“g.txt”。
2、互联网上get方式访问的webapi，“http://101.43.217.127:9999/api/Person/GetDouble?n=101”。其中，最后的n=101表示传递过去一个变量n，值是数字101。这个webapi会把传上去的数字翻倍返回。
3、互联网上post方式访问的webapi，“http://101.43.217.127:9999/api/Person/GetPerson”。用json格式，在body中发送一个学生对象作为参数（形如：{xm:"张三",cj:64}，姓名张三，成绩64）。服务器对数据进行处理，返回json字符串，在姓名前加上hello，把成绩开方乘10。
本地文本文件很简单
g.txt里只有一行文字“wahaha”
界面html：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/1.js"></script> 7 </head> 8 <body> 9 <input type="button" value="一" onclick="f1()"/> 10 <input type="button" value="二" onclick="f2()"/> 11 <input type="button" value="三" onclick="f3()"/> 12 </body> 13 </html>
对应js：
1 function f1() { 2 myurl1 = "http://127.0.0.1:8848/w1/g.txt"; 3 fetch(myurl1) 4 .then(r => r.text()) 5 .then(r => console.log(r)); 6 } 7 8 function f2() { 9 myurl2 = "http://101.43.217.127:9999/api/Person/GetDouble?n=101"; 10 fetch(myurl2) 11 .then(r =>r.text()) 12 .then(r => console.log(r)); 13 } 14 15 function f3() { 16 myurl3 = "http://101.43.217.127:9999/api/Person/GetModel"; 17 mydata = JSON.stringify({xm:"张三",cj:80}); 18 fetch(myurl3, { 19 method: "post", 20 headers: new Headers({ 21 'Content-Type':'application/json' 22 }), 23 body: mydata 24 }) 25 .then(r => r.json()) 26 .then(r => console.log(r["xm"]+"----"+r["cj"]));27 }
说明：
1、所有的fetch后面，都跟了两个then。这与异步知识有关。简单理解，拿到了资源之后，需要处理才可以使用。文本资源，用参数的text()函数获得内容。json资源，用json()函数获取对象。在下一个then中，才能使用这些内容。
2、post相对复杂。第17行用于准备上传的对象，并处理成json字符串。18-24行的花括号，用于设置请求资源的各种参数。19行标识提交数据的方式，20-21行指出传给服务器的是一个用于程序交换数据的json字符串，23行的body里面是要上传的json数据。
3、代码中的箭头函数（又叫拉姆达表达式），其实是匿名函数的一种简写。形如 r => console.log(r) 的写法，其实就是 function (r){console.log(r);}
4、服务器端程序，各种主流语言都可以写。大家可以自行尝试。
ps：服务器程序和web页面不在同一个地方（相同域名、端口），需要关注同源/跨域问题。服务器端需要允许跨域访问，fetch中可以在第二个参数里增加‘mode: "no-cors"’来表示跨域。此处测试服务器已经设置把所有请求视为同源（ c#代码，builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin(); ），故fetch中未做跨域设置。
运行效果：
掌握到这里，大家应该发现，html+css+js，跑在浏览器里，就是一个可以跨平台的窗口，这也是web前端的根基所在。
历史上，很多优秀的前端框架/工具包，bootstrap、jQuery、vue、layui，都是以此为基础，帮助前端工程师快速开发出页面程序。
而后端的语言，java、python、node.js、c#配合上各自的框架，也可以完成丰富的webapi开发。
大家在学习时，需要打牢基础，根据工作需要，认清新旧知识，有重点地去学习。