Ajax
一Ajax概述
-
ajax全名 asynchronous javascript and XML ( 异步JavaScript 和 XML )
-
ajax 不是新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术
-
ajax 是前后台交互的能力，也就是我们客户端给服务端发送消息的工具，以及接收响应的工具
-
ajax 通过在后台与服务器进行少量的数据交换，实现了在无需重新加载整个页面的情况下，更新页面局部数据的技术
-
ajax 是一个默认异步执行机制的功能，其分为同步（async=false）和异步（async=true）
-
什么是同步请求
/* 同步请求是指当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据后，才会执行后续的代码，也就是说，当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载，页面处于一个假死状态，当这个ajax执行完毕后才会继续运行其他代码，页面解除假死状态 */ -
什么是异步请求(默认)
/* 异步请求就是当发出请求的同时，浏览器可以作任何事，ajax发送的请求并不会影响页面的加载和用户的操作，不会影响到用户的体验效果 */
-
二.Ajax的优缺点
1.优点
- 不需要插件的支持，原生的JS就可以实现
- 不需要刷新页面就可以更改数据
- 异步与服务器通信：优化了Browser和Server之间的沟通，减少了不必要的数据传输、时间及降低网络上数据流量
- 前端和后端负载平衡：Ajax 可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本；Ajax的原则是“按需取数据”，可以最大程度减少冗余请求和响应对服务器造成的负担，提升站点性能
- 基于标准被广泛支持：Ajax 基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要用户允许JavaScript在浏览器上的执行
- 界面与应用分离：也就是说数据与呈现分离，有利于分工合作，减少非技术人员对页面的修改造成的WEB应用程序的错误、提高效率、也更加适用于现在的发布系统
2.缺点
- 对搜索引擎支持较弱：如果使用不当，Ajax会增大网络数据流量，从而降低整个系统的性能
- 如果客户禁用JS，网站就取不到数据
三.Ajax的使用
1.运用原理
2.具体操作流程
- 首先通过PHP页面将数据库中的数据取出
- 取出后转成json格式的字符串，后利用ajax把字符串返还给前台
- 在利用 json.parse解析通过循环添加到页面上
- 那么反之，前端的数据可以利用 ajax 提交到后台
- 但是后台是没有办法直接把这些数据插入到数据库中的，所以要先提交到PHP页面上
- 最后又PHP将数据插入到数据库中
3.使用步骤
3.1 XMLHttpRequest 对象
-
XMLHttpRequest 是浏览器接口对象，该对象的API可被JavaScript、VBScript 以及其他 web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其他数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为 Ajax 编程的核心对象
-
XMLHttpRequest 对象属性描述（用于和服务器交换数据）
-
3.2 Ajax 的使用步骤
//1.创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//2.给定请求方式、请求地址以及是否异步(默认为true表异步)
xhr.open("get","url地址");
//3.发送请求
xhr.send();
//4.获取服务器端给客户端的响应数据
xhr.onreadystatechange = function(){
if(xhr.readyState ==4 && xhr.status == 200){
//JSON.parse()方法实现JSON字符串转换为JS对象
var info = JSON.parse( xhr.responseText );
}
}
3.3 Get/Post请求
- get 请求一般用来请求获取数据，post 请求一般作为发送数据到后台，传递数据，创建数据
- get 请求也可以传参到后台，但是传递的参数则显示在地址栏，安全性低，且参数的长度也有限制(2048字符)；post请求则是将传递的参数放在 request body 中，不会在地址栏显示，安全性比get请求，参数没有长度限制
- get 请求刷新浏览器或者回退没有影响，post请求则会重新请求一遍
- get 请求可以被缓存，也会保留在浏览器的历史纪录中；post 请求不会被缓存，也不会保留在浏览器的历史纪录中
- get 请求通常是通过 url 地址请求，post 常见的则是 form 表单请求
3.4 Ajax 状态码
-
Ajax 状态码（xhr.readyState）：是用来表示一个 ajax 请求的全部过程中的某一个状态
/* 0：请求未初始化，也就是 open 方法还未执行 1：服务器连接已建立，即 open 方法已被执行完 2：请求已接收，表示 send 方法已 执行完成 3：请求处理中即正在解析响应内容 4：请求已完成，且响应已就绪；也就是说内容解析完毕，可以在客户端使用 */ -
这时候我们会发现，在一个 ajax 请求的全部过程中，只有当 readyState == 4 的时候，我们才可以正常使用服务端给我们的数据
-
且配合 http 状态码为 200 ~ 299
/* 一个 ajax 对象中有一个成员叫做 xhr.statue ,这个成员就是记录本次请求的 http 状态码的 */ -
俩个条件都满足的时候，才是本次请求正常完成
3.5 readyStateChange
- 在 ajax 对象中有一个事件，叫 readyStateChange事件
- 这个事件是专门用来监听 ajax 对象的 readyState 值改变的行为
- 即只要 readyState 的值发生改变就触发该事件
- 因此我们就在该事件中监听 readyState、status 的值
3.6 解析主体
- xhr.responseText ：获得字符串形式的响应数据
- xhr.responseXML：获得 XML 形式的响应数据