AJAX 的优势操作流程及使用

简介: AJAX 的优势操作流程及使用

AJAX 的优势:

  • 不需要插件的⽀持,原⽣ js 就可以使⽤
  • ⽤户体验好(不需要刷新⻚⾯就可以更新数据
  • 减轻服务端和带宽的负担
  • 缺点:搜索引擎的⽀持度不够,因为数据都不在⻚⾯上,搜索引擎搜索


AJAX 的操作流程



首先通过PHP页面将数据库中的数据取出 取出后转成json格式的字符串,后利用ajax把字符串返还给前台 再利用json.parse解析通过循环添加到页面上 那么反之,前端的数据可以利用ajax提交到后台 是后台是没有办法直接把这些数据插入到数据库中,所以要先提交到PHP页面上 最后再由PHP将数据插入到数据库中


AJAX 的使用:

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


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


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


1.创建⼀个 ajax 对象
// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')


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


2.配置链接信息


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

//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 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 请求中各个阶段


  #### 5.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 状态码


两个条件都满足的时候,才是本次请求正常完成
使用 ajax 发送请求时携带参数
我们使用 ajax 发送请求也是可以携带参数的
参数就是和后台交互的时候给他的一些信息
但是携带参数 get 和 post两个方式还是有区别的
相关文章
|
XML 前端开发 JavaScript
什么是Ajax?以及Ajax的优势是什么?
Ajax全称为 Asynchronous JavaScript And XML(异步 JavaScript 和 XML),是一种 Web 开发技术,通过在后台与服务器进行少量数据交换,实现页面无需重新加载而更新部分内容。 Ajax 可以使Web应用更加迅捷动态化,同时提高用户体验。
191 0
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
85 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
142 0
|
6月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
63 0
|
6月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
57 0
|
6月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
77 0
|
6月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
6月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
90 0
|
6月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本