关于ajax那些事

Posted 2020-08-20

哈哈，今天突然兴起，想了想自己对ajax的了解，来这里叙述下。心情好，嘿嘿嘿

 

ajax是一种创建交互式网页应用的网页开发技术。就是在不重新加载页面的情况下，更新部分网页。

ajax原理：ajax就是相当于在用户和服务器之间加了一个中间层，是用户操作与服务器操作相应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给了ajax引擎自己来做，只有确定需要从数据库读取数据的时候，再由ajax引擎代为向服务器提交请求。

ajax核心：通过XMLHttpRequest获取非本页内容。

ajax优势：

　　　　1、通过异步处理的模式提升用户体验　　

　　　　2、优化浏览器与服务器之间的传输，减少不必要数据的往返，减少带宽（单位时间内通过的数据量）占用

　　　　3、ajax引擎在客户端运行，承担一部分本来有服务器承担的任务，从而减少负载

ajax缺点：

　　　　1、不能实时请求和响应服务器数据

　　　　2、不支持浏览器回退功能

　　　　3、不能提交媒体数据，图片和文件

 

原生写的ajax五部曲，必不能忘记：

　　　　function ajax(){
　　　　　　// 1.创建异步对象
　　　　　　var ajaxObj = new XMLHttpRequest();

　　　　　　// 2.设置url 方法
　　　　　　ajaxObj.open(‘get‘,‘xxx.php‘);

　　　　　　// 3.发送请求
　　　　　　ajaxObj.send();

　　　　　　// 4.为状态改变事件 绑定 对应的代码
　　　　　　ajaxObj.onreadystatechange = function () {
　　　　　　　　if (ajaxObj.readyState == 4 && ajaxObj.status==200) {
　　　　　　　　　　　　// 5.在数据回来之后,修改界面的内容
　　　　　　　　　　　　// 创建元素,添加到界面上,或者 其他的操作
　　　　　　　　　　　　console.log(ajaxObj.responseText);
　　　　　　　　　　}

　　　　　　}
　　　　}

关于readyState共有五个状态（友好网址：http://www.educity.cn/wenda/64512.html）：

　　0 － （未初始化）已经创建对象，还没有调用send方法

　　1 － （加载）准备开始发送数据

　　2 － （加载完成）已发送数据，正在等待响应返回

　　3 － （交互）正在接受响应，但是接受不完整

　　4 － （完成）接受响应完毕

（2、3、4都与响应挂钩，开始、过度、完成）

 

关于status ：200，请求成功（友好网址：http://hibeary.iteye.com/blog/697997）：

　　其他：

　　1xx - 信息提示 

　　2xx - 成功 

　　3xx - 重定向 

　　4xx - 客户端错误 

　　5xx - 服务器错误