AJAX小知识

2018-01-14 本文已影响14人黄同学2019

QQ截图20170830222735.png

1.如何发请求？

我们知道有几种方式可以发请求，但是都有其局限性，如下：

用 form 可以发请求，但是会刷新页面或新开页面

用 a 可以发 get 请求，但是也会刷新页面或新开页面

用 img 可以发 get 请求，但是只能以图片的形式展示

用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示

用 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 或 POST
- url ：文件在服务器上的位置
- async ：true（异步）或 false（同步）
request.send() 发送请求(如果参数为String，只能为 post请求)

reqeust.onreadychange() 监听 readystatue 的变化，每当 readyState 改变时，就会触发 onreadystatechange 事件。

request.readyState XMLHttpRequest 的状态。从 0 到 4 发生变化

值	readyState 状态	意义
0	`UNSENT`(未打开)	`open()`方法还未被调用，请求未初始化
1	`OPENED` (未发送)	`open()`方法已经被调用，服务器连接已建立
2	HEADERS_RECEIVED (已获取响应头)	`send()`方法已经被调用, 响应头和响应状态已经返回.请求已接收
3	LOADING (正在下载响应体)	响应体下载中; `responseText`中已经获取了部分数据.
4	DONE (请求完成)	整个请求过程已经完毕.