淘先锋技术网

首页 1 2 3 4 5 6 7

AJAX

ajax 全名 async javascript and XML(异步JavaScript和XML)

是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具,以及接受响应的⼯具

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

是⼀个 默认异步执⾏机制的功能,AJAX分为同步(async = false)和异步(async = true)

什么是同步请求?(false)

- 什么是异步请求?(默认:true)

AJAX 的优势

  • 不需要插件的⽀持,原⽣ js 就可以使⽤

  • ⽤户体验好(不需要刷新⻚⾯就可以更新数据)

  • 减轻服务端和带宽的负担

  • 缺点:搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索不到

AJAX 的操作流程

具体操作流程:

首先通过PHP页面将数据库中的数据取出

取出后转成json格式的字符串,后利用ajax把字符串返还给前台

再利用json.parse解析通过循环添加到页面上

那么反之,前端的数据可以利用ajax提交到后台

但是后台是没有办法直接把这些数据插入到数据库中,所以要先提交到PHP页面上

最后再由PHP将数据插入到数据库中

AJAX 的使用

在 js 中有内置的构造函数来创建 ajax 对象

创建 ajax 对象以后,我们就使⽤ ajax 对象的⽅法去发送请求和接受响应

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。

XMLHttpRequest 对象方法描述

XMLHttpRequest 对象属性描述(用于和服务器交换数据。)

AJAX 状态码

  • ajax 状态码 - xhr.readyState

  • 是用来表示一个 ajax 请求的全部过程中的某一个状态

  • 这个时候我们就会发现,当一个 ajax 请求的全部过程中,只有当 readyState === 4 的时候,我们才可以正常使用服务端给我们的数据

  • 所以,配合 http 状态码为 200 ~ 299

两个条件都满足的时候,才是本次请求正常完成 readyStateChange

在 ajax 对象中有一个事件,叫做 readyStateChange 事件

这个事件是专⻔用来监听 ajax 对象的 readyState 值改变的的行为

也就是说只要 readyState 的值发生变化了,那么就会触发该事件

所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了

使用 ajax 发送请求时携带参数

  • 我们使用 ajax 发送请求也是可以携带参数的

  • 参数就是和后台交互的时候给他的一些信息

  • 但是携带参数 get 和 post两个方式还是有区别的

GET 还是 POST?

  • 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

  • 然而,在以下情况中,请使用 POST 请求: