AJAX总结

AJAX

1、什么是Ajax

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

是一种用于创建快速动态网页的技术

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

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

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

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

2、同步与异步的区别

什么是同步请求?(false)

同步请求是指当前发出请求后,浏览器什么都不能做, 必须得等到请求完成返回数据之后,才会执行后续的代码, 相当于生活中的排队,必须等待前一个人完成自己的事物,后一个人才能接着办。 也就是说,当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面处于一个假死状态, 当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

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

默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事, Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。 一般默认值为true,异步。异步请求可以完全不影响用户的体验效果, 无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。

3.AJAX 的优势

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

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

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

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

4.实现AJAX的基本步骤

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

  1. 创建XMLHttpRequest对象,即创建一个异步调用对象.

  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

  3. 设置响应HTTP请求状态变化的函数.

  4. 发送HTTP请求.

  5. 获取异步调用返回的数据.

  6. 使用JavaScript和DOM实现局部刷新.

5.AJAX 的使用

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

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

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

XMLHttpRequest 对象方法描述

1.创建⼀个 ajax 对象
复制代码
 const xhr = new XMLHttpRequest()

上⾯就有了⼀个 ajax 对象 我们就可以使⽤这个 xhr 对象来发送 ajax 请求了

2.配置链接信息

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

复制代码
 const xhr = new XMLHttpRequest()
 // xhr 对象中的 open ⽅法是来配置请求信息的
 // 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
 // 第⼆个参数是本次请求的 url 
 // 第三个参数是本次请求是否异步,默认 true 表示异步,false 表示同步
 // xhr.open('请求⽅式', '请求地址', 是否异步)
 xhr.open('get', './data.php')

上⾯的代码执⾏完毕以后,本次请求的基本配置信息就写完了

3.发送请求
复制代码
 //如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:
 const xhr = new XMLHttpRequest()
 xhr.open('get', './data.php')
 // 使⽤ xhr 对象中的 send ⽅法来发送请求
 xhr.send()

上面代码是把配置好信息的 ajax 对象发送到服务端

一个最基本的 ajax 请求就是上面三步 但是光有上面的三个步骤,我们确实能把请求发送到服务端 如果服务端正常的话,响应也能回到客户端 但是我们拿不到响应 如果想要拿到响应,我们需要有两个前提条件

  1. 本次 HTTP 请求是成功的,也就是我们下面要说的 http 状态码为 200 ~ 299

  2. ajax 对象也有自己的状态码,用来表示本次 ajax 请求中各个阶段

6.AJAX 状态码

  • ajax 状态码 - xhr.readyState

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

复制代码
 readyState === 0 : 表示未初始化完成,也就是 open 方法还没有执行 
 readyState === 1 : 表示配置信息已经完成,也就是执行完 open 之后 
 readyState === 2 : 表示 send 方法已经执行完成
 readyState === 3 : 表示正在解析响应内容
 readyState === 4 : 表示响应内容已经解析完毕,可以在客户端使用了
  • 这个时候我们就会发现,当一个 ajax 请求的全部过程中,只有当 readyState === 4 的时候,我们才可以正常使用服务端给我们的数据

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

复制代码
  一个 ajax 对象中有一个成员叫做 xhr.status
  这个成员就是记录本次请求的 http 状态码的 
  • 两个条件都满足的时候,才是本次请求正常完成

readyStateChange

在 ajax 对象中有一个事件,叫做 readyStateChange 事件 这个事件是专⻔用来监听 ajax 对象的 readyState 值改变的的行为 也就是说只要 readyState 的值发生变化了,那么就会触发该事件 所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了

复制代码
   const xhr = new XMLHttpRequest() 
     xhr.open('get', './data.php')
     xhr.send()
     xhr.onreadyStateChange = function () {
     // 每次 readyState 改变的时候都会触发该事件
     // 我们就在这里判断 readyState 的值是不是到 4
     // 并且 http 的状态码是不是 200 ~ 299
     if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
     // 这里表示验证通过
     // 我们就可以获取服务端给我们响应的内容了
     }
 }

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

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

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

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

GET 还是 POST?

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

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

复制代码
  无法使用缓存文件(更新服务器上的文件或数据库)
  向服务器发送大量数据(POST 没有数据量限制)
  发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
相关推荐
Mr_Xuhhh29 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端