js发起请求的原生方法

1. ajax
2. Jquery.ajax
3. window.fetch
4. Axios

   ajax

   Asynchronous JavaScript and XML 异步的javaScript和XML
   XML eXtensible Markup Language 可扩展标记语言 被设计用来传输和存储数据。 ```javascript // 1 创建XMLHttpRequest对象 let xml = new XMLHttpRequest() //open方法 定义请求的类型url 以及是否异步处理 open(method,url,async) xml.open(‘GET’,’ajax_info.text’,true); // send方法 发送请求到服务器 send(string?) string仅用于POST请求 xml.send() ; // setRequestHeader方法 设置请求头 setRequestHeader(header,value) header: 规定头的名称 value: 规定头的值 xml.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

// 2 处理callback // 异步请求通过 onreadystatechange 调用callback函数 // readyState // 0 未初始化 // 1 器连接已建立 // 请求已接收 // 请求处理中 // 请求已完成，且响应已就绪 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById(‘myDiv’).innerHTML = xmlhttp.responseText; } }; xmlhttp.open(‘GET’, ‘/try/ajax/ajax_info.txt’, true); xmlhttp.send(); // 非异步请求，不需要设置onreadeystatechange send()会阻断js进程 —— 把代码放到 send() 语句后面即可 xmlhttp.open(“GET”,”/try/ajax/ajax_info.txt”,false); xmlhttp.send(); document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText; //通过 responseText 和 responseXML拿到返回的值 // https://www.runoob.com/ajax/ajax-xmlhttprequest-response.html // 3

```

Jquery.ajax

jquery封装的ajax请求，写起来更加的方便。需要引入Jquery库

window.fetch

浏览器基于es6的promise。
暂时无法取消一个请求，因为是基于Promise？
特别低版本的浏览器不支持。

Axios

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

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF