AJAX 小知识
1.如何发请求？
咱们知道有几种方式能够发请求，可是都有其局限性，以下：javascript
用 form 能够发请求，可是会刷新页面或新开页面html
用 a 能够发 get 请求，可是也会刷新页面或新开页面java
用 img 能够发 get 请求，可是只能以图片的形式展现程序员
用 link 能够发 get 请求，可是只能以 CSS、favicon 的形式展现ajax
用 script 能够发 get 请求，可是只能以脚本的形式运行小程序
思考：有没有这样的发请求的方式？跨域
- get、post、put、delete 请求都行
- 想以什么形式展现就以什么形式展现
2.AJAX 的出现
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术)浏览器
2.1 AJAX 的历史
-
服务器之殇服务器
上个世纪90年代，几乎全部的网站都由HTML页面实现，服务器处理每个用户请求都须要从新加载网页。这样的处理方式效率不高。用户的体验是全部页面都会消失，再从新载入，即便只是一部分页面元素改变也要从新载入整个页面，不只要刷新改变的部分，连没有变化的部分也要刷新。这会加剧服务器的负担。网络
-
异步加载和iframe方案
这能够用异步加载来解决。1995年，JAVA语言的初版发布，随之发布的的Java applets（JAVA小程序）首次实现了异步加载。浏览器经过运行嵌入网页中的Java applets与服务器交换数据，没必要刷新网页。1996年，Internet Explorer将iframe元素加入到HTML，支持局部刷新网页。
-
XMLHttp 的出现
1998年先后，Outlook Web Access小组写成了容许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件。该组件原属于微软Exchange Server，而且迅速地成为了Internet Explorer 4.0[2]的一部分。部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。可是，2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通信，如Google讨论组、Google地图、Google搜索建议、Gmail等。Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速流传提升了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为简单易用。
-
总结为：
IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 能够直接发起 HTTP 请求。 随后 Mozilla、 Safari、 Opera 也跟进（抄袭）了，取名 XMLHttpRequest，并被归入 W3C 规范
2.2 AJAX 的优缺点
-
优势
（1）实现局部更新：
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动做，并避免了在网络上发送那些没有改变的信息。
（2）仅依赖于浏览器和JavaScript：
Ajax不须要任何浏览器插件，但须要用户容许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不一样的浏览器和平台上通过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。一样，也出现了另外一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
-
缺点
（1）浏览器的兼容问题：
Ajax在本质上是一个浏览器端的技术，首先面临无可避免的第一个问题便是浏览器的兼容性问题。各家浏览器对于JavaScript／DOM／CSS的支持总有部分不太相同或是有Bug，甚至同一浏览器的各个版本间对于JavaScript／DOM／CSS的支持也有可能部分不同。这致使程序员在写Ajax应用时花大部分的时间在调试浏览器的兼容性而非在应用程序自己。所以，目前大部分的Ajax连接库或开发框架大多以js连接库的形式存在，以定义更高阶的JavaScript API、JavaScript对象（模板）、或者JavaScript Widgets来解决此问题。
（2）局部刷新带来的问题：
Ajax技术之主要目的在于局部交换客户端及服务器之间的数据。如同传统之主从架构，无可避免的会有部分的业务逻辑会实如今客户端，或部分在客户端部分在服务器。因为业务逻辑可能分散在客户端及服务器，且以不一样之程序语言实现，这致使Ajax应用程序极难维护。若有用户接口或业务逻辑之更动需求，再加上前一个JavaScript/DOM/CSS 之兼容性问题，Ajax应用每每变成程序员的梦魇。
3.AJAX 的 使用
3.1 AJAX的原理
- 使用 XMLHttpRequest 发请求
- 服务器返回 XML 格式的字符串
- JS 解析 XML，并更新局部页面
3.2 AJAX 的目的：
使用 js 发请求 ，使用 js 处理返回的响应。
3.3 请用原生 JS写出一个AJAX请求：
<body>
<button id="button">点我</button>
<script> button.addEventListener('click',(e)=>{ let request = new XMLHttpRequest() request.open(method,address) request.send() reqeust.onreadychange() = ()={ if(request.readyState === 4){ if(request.status >= 200 && reuest.status< 300){ let string = esponseText let object =window.JSON.parse(string) } } } }) </script>
</body>
复制代码
分析：
-
let request = new XMLHttpRequest()建立一个AJAX实例 -
request.open(method,address)初始化请求，通常有3个参数 ，若是没有设置就是 默认值request.open(method,url,async)method：请求的类型；GET 或 POSTurl： 文件在服务器上的位置async：true（异步）或 false（同步）
-
request.send()发送请求(若是参数为String，只能为 post请求) -
reqeust.onreadychange()监听readystatue的变化 ，每当 readyState 改变时，就会触发 onreadystatechange 事件。-
request.readyStateXMLHttpRequest 的状态。从 0 到 4 发生变化值 readyState 状态 意义 0 UNSENT(未打开)open()方法还未被调用，请求未初始化1 OPENED(未发送)open()方法已经被调用， 服务器链接已创建2 HEADERS_RECEIVED (已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回.请求已接收3 LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据.4 DONE (请求完成) 整个请求过程已经完毕. request.status200表示OK；404表示未找到页面。
-
参考文章：
AJAX-阮一峰
为何form表单提交没有跨域问题，但ajax提交有跨域问题？
AJAX-MDN