Javascript(笔记49) - AJAX
AJAX 是什么
Ajax(Asynchronous JavaScript and XML) 异步JavaScript和XML；sync 同步的；async 异步的；
客户端与服务器，可以在 不必刷新整个页面 的情况下，与服务器进行异步通讯的技术；
AJAX：只新刷局部页面的技术；
1）Javascript : Ajax技术主要开发语言；
2）HTML/XML/JSON：用于封装请求数据和响应数据；
3）DOM：通过 DOM 修改页面元素，实现页面局部刷新；
4）CSS：改变样式，美化页面效果，提升用户体验；
5）Ajax引擎（核心）：即 XMLHttpRequest 对象，以异步方式在客户端和服务器之间传递数据；
为什么用AJAX
不刷新整个页面，只刷新局部
1）更新部分页面，有效利用带宽
例如，只是登录，就没必须刷新整个页面；通常表单提交是同步的，提交过程中，页面是不能交互的；
2）提供连续的用户体验
例如，看视频时，点赞和评论等交互行为，不影响视频的正常播放；
3）关键词自动补全或地图加载
例如，搜索框搜索时，关键词在下框自动补全；地图加载时，只显示正在看的区域等；
AJAX工作流程
用户界面，由JS获得用户数据，由AJAX引擎（主要是 XMLHttpRequest对象）发送给服务器；服务器将处理完的局部数据（非整个页面）封装成XML/JSON/HTML的格式返回给引擎，再用DOM和CSS修改和修饰页面渲染给用户；
传统Web与Ajax差异
传统Web | Ajax技术 | |
发送请求方式 | 提交表单方式发送请求 | 异步引擎对象发送请求 |
服务器响应 | 响应内容是完整页面 | 响应内容只是需要的数据 |
客户端处理方式 | 需要等待服务器响应完成并重新加载整个页面后用户才能进行操作 | 可以动态更新页面中的部分内容，用户不需要等待请求的响应 |
同步的理解：空中加油时，俩飞机需保持相同速度和位置；排队做核酸，前面没做完，后面就要等待；
异步的理解：银行取号，取完号后坐一边休息，可以干点别的等待叫号；
XMLHttpRequest
Javascript对象 XMLHttpRequest是整个Ajax技术的核心，提供了异步发送请求的能力；
常用方法
方法 | 描述 |
open(method,URL,async) | 建立与服务器的连接 method: 请求方式，“GET”(默认) 或 “POST”，需大写 URL：请求地址 async：是否使用异步请求，true(默认) 或 false |
send(content) | 发送请求 content： 请求参数，只有POST请求才能通过 send() 发送参数 |
setRquestHeader(header,value) | 设置请求头信息，在用 post 请求方式时使用 |
getAllResponseHeaders | 以字符串形式返回完整的 http 标头集 |
常用属性
属性 | 描述 |
onreadystatechange | 事件属性，指定回调函数，当 readyState 属性改变时触发执行 |
readyState | 存有的XMLHttpRequest的状态从0到4发生变化。 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 |
responseText | 以文本形式返回响应 |
responseXML | 以XML形式返回响应 |
status | 表示HTTP请求响应的状态 200 服务器响应正常 400 无法找到请求资源 403 没有权限访问 404 访问的资源不存在 500 服务器内部错误 |
status | 以字符串形式返回状态（如：Not Found 404 或 ok 200） |
示例：
同步请求示例
