Ajax 技术_csdn ajax-CSDN博客

本文链接：https://blog.csdn.net/m0_61657501/article/details/130181728

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 形式的响应数据