AJAX基础 学习打卡

思维导图

什么是Ajax？

1、Ajax的全称：Asynchronous JavaScript and XML（异步的JavaScript和XML）他并不是新的编程语言，而是几种原有技术的结合体。
2、ajax是一种无需重新加载整个网页的情况下，能够局部更新网页的技术。

为什么要使用ajax – 优点

1、通过异步刷新，提升了用户体验。
2、优化浏览器和服务器之间的传输，减少不必要的数据返回，减少了带宽占用。
3、ajax引擎在客户端运行，承担了一部分由服务器承担的工作，从而减少大量用户下的服务器负载

Ajax的缺点

1、不支持浏览器的回退按钮。
2、安全问题ajax暴露于服务器交互的细节
3、对搜索引擎的支持比较弱

Ajax和JSON

XMLHttpRequest对象

是一种支持异步请求的技术，他是ajax的核心

XMLHttpRequest作用

1、可以向服务器提出请求并处理响应，而不阻塞用户
2、可以在页面加载以后进行页面的局部更新

如何使用ajax

完整实现按一个ajax的异步调用和局部刷新，三步：
1、创建XMLHttpRequest对象，也就是创建一个异步调用对象 – 创建XMLHttpRequest对象
2、创建一个新的http请求，并执行该http请求的方法，url – 发送ajax请求
3、设置响应http请求状态变化的函数 – 处理服务器响应

创建XMLHttpRequest对象

1、这个对象用于在后台和服务器交换数据，是ajax的核心。
2、并不是w3c的标准，不同的浏览器创建方式不同。

发送ajax请求

1、创建请求
xmlhttp.open(“GET”,“URL地址”,true);
2、发送到服务器
xmlhttp.send();

处理服务器响应

处理服务器响应
(1) xmlHttp.onreadystatechange()事件用于监听Ajax执行过程
(2) xmlHttp.readystate属性说明的是XMLHttpRequest当前的状态
① Readystate =0 – 请求未初始化
② Readystate =1 – 服务器连接已经建立
③ Readystate =2 – 请求已经被接收
④ Readystate =3 – 请求正在处理
⑤ Readystate =4 – 响应文本已被接收
(3) xmlHttp.status属性服务器响应的状态码，200:成功 404:未找到

利用Ajax实现新闻列表展现

1、准备后端数据 – 新闻对象
2、前端编写页面请求

同步和异步的区别

1、true代表异步执行
2、false代表同步执行

总结

1、对于同步执行，相当于代码进入了一个等待状态，数据不返回，程序就不会继续往下执行。
2、而异步状态下，ajax是不会处于代码的阻塞状态，程序任然会继续往下执行的，但是数据返回通过触发 onreaystatechange事件进行获取和处理的。