一、AJAX技术简介
AJAX 即 “Asynchronous JavaScript and XML”(异步的 JavaScript 与 XML 技术),指的是一套综合了多项技术的浏览器端网页开发技术。AJAX 的概念由 Jesse James Garrett 所提出,说白了就可以使用 JavaScript 代码发送网络请求并处理响应,由浏览器实现。
出现的很早 1998
年出来,首次是微软
提出来的,并没有引起重视;直到2005
年左右,谷歌推出 gmail,gmap
使得ajax技术一时间流行起来。
俗话:ajax技术就是在页面不刷新情况下,和服务器端进行交互的交互。
传统的 Web 应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分 HTML 码往往是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
与此不同,AJAX 应用可以仅向服务器发送并取回必须的数据,并在客户端采用 JavaScript 处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少,服务器回应更快了。同时,很多的处理工作可以在发出请求的客户端机器上完成,因此 Web 服务器的负荷也减少了。
特点:
异步请求,局部刷新。
同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
局部刷新指刷新页面部分内容。
优缺点:
优点:Web 应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息,减轻服务器压力。
缺点:浏览器实现之间有差异处理兼容性问题;不能回退和前进;默认不支持跨域访问(浏览器的同源策略 - Web 安全 | MDN)。
注意事项:
ajax 这门技术,必须要在网络协议环境下才可以使用。不能把网页直接拖入到浏览器执行,必须在 web 服务器模式下访问。
总结:ajax对我们来讲就是书写一段js代码来向服务器发送请求(异步)。
二、AJAX书写步骤
1、创建 AJAX 对象; 2、设置请求路径,请求方式等; 3、绑定监听状态改变的处理函数,在处理函数可获取响应数据; 4、发送请求。
创建ajax对象会有浏览器兼容性问题:
function createAjax() { var ajax; try { // 非 IE ajax = new XMLHttpRequest(); } catch (e) { // IE ajax = new ActiveXObject('Microsoft.XMLHTTP'); } return ajax; }
三、响应处理和响应流程
响应处理,即对服务响应回浏览器的数据根据状态码和 AJAX 对象的状态信息进行不同的处理,在绑定状态改变的处理函数中写对应的逻辑代码即可。
AJAX 对象有 4 个属性:
-
readyState 总共有 5 个状态值,分别为 0 ~ 4,每个值代表了不同的含义:onreadystatechange
-
0:初始化,AJAX 对象还没有完成初始化
-
1:载入,AJAX 对象开始发送请求
-
2:载入完成,AJAX 对象的请求发送完成
-
3:解析,AJAX 对象开始读取服务器的响应
-
4:完成,AJAX 对象读取服务器响应结束
-
-
status 表示响应的 HTTP 状态码,常见状态码如下:
-
200:成功
-
302:重定向
-
404:找不到资源
-
500:服务端错误
-
-
responseText 获得字符串形式的响应数据。
-
responseXML 获得 XML 形式的响应数据。
综合以上,在状态改变的处理函数一般针对 readyState == 4 且 status == 200 的情况才处理,再根据后台返回的数据类型决定从 responseText 或者 responseXML 获取服务器响应回去来的数据。
四、使用ajax发送get请求
前端代码:
<body> <h1>这是首页</h1> 欢迎来到我们网站!! <br><br> <button id="obtn">点击获取数据---点击发送Get请求</button> <div id="odiv"></div> <script> let obtn = document.getElementById("obtn"); let odiv = document.getElementById("odiv"); obtn.onclick = () => { //发送ajax请求 // 1、创建 AJAX 对象; let ajax = new XMLHttpRequest(); // 2、设置请求路径,请求方式等;ajax.open(请求方式,路径) ajax.open('GET', '/get_data'); // 3、绑定监听状态改变的处理函数,在处理函数可获取响应数据; ajax.onreadystatechange = ()=>{ // 获取响应回来的数据 if(ajax.readyState===4&& ajax.status===200){ console.log(ajax.readyState); console.log(ajax.responseText); // 请求到数据之后,就可以把数据更新到页面上 odiv.innerHTML = ajax.responseText; } }; // 4、发送请求。 ajax.send() } </script>服务端代码:
else if(requestUrl=== "/get_data"){ //或者写成:/get_data.*/.test(requestUrl) response.setHeader("Content-type","text/html;charset=utf-8"); response.write("这个数据是来自服务器的..."); response.end(); }