Ajax如何使用
什么是ajax?
- AJAX(Asynchronous JavaScript And XML),(异步 JavaScript 和 XML),中文名:阿贾克斯。是指一种创建异步交互式网页应用的网页开发技术。
- AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
- 前端通过与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
为什么要使用AJAX
- 更自然、流畅的用户体验,对用户的操作即时响应
- 在不中断用户操作的情况下与Web服务器进行通信
- 更灵敏的响应用户访问,实现近似于桌面应用程序的交互效果
- 通过局部更新页面降低网络流量,提高网络的使用效率
同步与异步
-
同步,可以理解为在执行完一个函数或方法之后,一直等待系统返回值或消息,这时程序是出于阻塞的,只有接收到返回的值或消息后才往下执行其他的命令。
-
异步,执行完函数或方法后,不必阻塞性地等待返回值或消息,只需要向系统委托一个异步过程,那么当系统接收到返回值或消息时,系统会自动触发委托的异步过程,从而完成一个完整的流程。
-
所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。
-
同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务; //执行栈
-
异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有等主线程任务执行完毕, //任务队列
-
"任务队列"开始通知主线程,请求执行任务,该任务才会进入主线程执行。
-
具体来说,异步运行机制如下:
-
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
-
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
-
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
-
(4)主线程不断重复上面的第三步。
XMLHttpRequest对象
- AJAX的核心对象是XMLHttpRequest,即AJAX的异步操作,和服务器 交互主要依赖该对象。
- XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力
- 以前浏览器负责显示和发送请求接收响应。两件事情同一时刻只能做一件,没法同时进行。这样会让用户感觉不好(友好性不好),
- 使用XMLHttpRequest对象,可以把浏览器解脱出来,可以让浏览器只负责显示,而完成请求的事情由XMLHttpRequest对象负责。
- 这样两者各负其责,效率更高,效果更好,用户体验很好,用户永远不会看到浏览器空白
ajax的编写步骤
- 使用 new XMLHttpRequest创建xhr对象
- xhr.open 初始化请求参数
- xhr.send 发送网络请求
- xhr.onreadystatechange 添加事件,设置回调函数
- xhr.responseText 返回给前端的数据
<script>
let xhr = new XMLHttpRequest();
xhr.open("POST","text.txt","true");
//xhr.open("POST","content.php","true");
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
}
xhr.send();
XMLHttpRequest对象的兼容
let xhr;
if (window.ActiveXObject) {
//ie
xhr = new ActiveXObject("Microsoft.XMLHttp");
} else {
//非ie
xhr = new XMLHttpRequest();
}
XMLHttpRequest的属性与状态码
-
onreadystatechange:每次对象状态改变所触发事件的事件处理程序(每当 readyState 属性改变时,就会调用该函数。)
-
readyState:对象状态值:(存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。)
0 = 请求未初始化(uninitialized)对象创建完毕就是0
1 = 正在加载(loading)(服务器连接已建立) 1:对象设置完成后就是1.即调用open函数后,装载,准备工作
2 = 加载完毕(loaded)( 请求已接收) 调用send函数后,变成,因为,只要调用send说明加载完毕
3 = 交互(interactive)(请求处理中)到服务端了
4 = 完成(complete)(请求已完成,且响应已就绪) 服务器端处理完毕了
-
responseText:从服务器进程返回的数据的字符串形式
-
status: 从服务器返回的数字代码,如404(未找到)或200(就绪)
-
responseXML: 从服务器进程返回的数据的字符串形式 //JSON