首页 > 其他分享 >ajax详解

ajax详解

时间:2023-10-04 16:33:33浏览次数:29  
标签:异步 请求 AJAX alice ajax 详解 页面

1. AJAX

到底什么是Ajax

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

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

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

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

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

什么是同步请求?(false)

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

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

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

2. AJAX 的优势

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

3. AJAX 的操作流程

具体操作流程:

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

4. AJAX 的使用

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

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

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

XMLHttpRequest 对象方法描述

创建⼀个 ajax 对象

// IE9及以上
const alice = new XMLHttpRequest()
// IE9以下
const alice = new ActiveXObject('Mricosoft.XMLHTTP')

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

配置链接信息

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

//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
const alice = new XMLHttpRequest()
// alice 对象中的 open ⽅法是来配置请求信息的
// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
// 第⼆个参数是本次请求的 url 
// 第三个参数是本次请求是否异步,默认 true 表示异步,false 表示同步
// alice.open('请求⽅式', '请求地址', 是否异步)
alice.open('get', './data.php')

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

发送请求

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

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

1.一个最基本的 ajax 请求就是上面三步 但是光有上面的三个步骤,我们确实能把请求发送到服务端
2.如果服务端正常的话,响应也能回到客户端 但是我们拿不到响应
3.如果想要拿到响应,我们需要有两个前提条件
  本次 HTTP 请求是成功的,
  ajax 对象也有自己的状态码,用来表示本次 ajax 请求中各个阶段

标签:异步,请求,AJAX,alice,ajax,详解,页面
From: https://www.cnblogs.com/qizhiwei/p/17742411.html

相关文章

  • IBM企业业务流程框架介绍及构建步骤详解
    本人在四大咨询机构从事咨询工作多年,二十年一线数字化规划咨询经验,提供制造业数智化转型规划服务,顶层规划/企业架构/数据治理/数据安全解决方案资料干货.一、前言   IBM作为世界上最大的服务公司、第三大软件公司、第三大数据库公司,在它的发展过程和发展策略上有很多值得我......
  • C++ typedef用法详解
    typedef的语法描述 在现实生活中,信息的概念可能是长度,数量和面积等。在C语言中,信息被抽象为int、float和double等基本数据类型。从基本数据类型名称上,不能够看出其所代表的物理属性,并且int、float和double为系统关键字,不可以修改。为了解决用户自定义数据类型名称的需求,C语言......
  • DMA是什么?结构和例程详解?
    DMA(DirectMemoryAccess)是一种技术,它的主要功能是允许数据直接在内存和外部设备之间传输,而不需要通过CPU或其它芯片外设的干预。这使得CPU可以继续处理其它任务,而不需要等待数据传输完成。DMA控制器通常由硬件实现,它包括多个通道,每个通道都可以被配置为从不同的源地址传输到不同的......
  • C语言之数组详解
    2.1数组的概念数组是若干个相同类型的变量在内存中有序存储的集合。inta[10];//定义了一个整型的数组a,a是数组的名字,数组中有10个元素,每个元素的类型都是int类型,而且在内存中连续存储。这十个元素分别是a[0]a[1]….a[9]a[0]~a[9]在内存中连续的顺序存储2.2数组的分......
  • 归并排序算法详解
    算法介绍引用百度百科的介绍。归并排序(MergeSort)是建立在归并操作上的一种有效,稳定的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列;即先使每个子序列有序,再使子序列段间有序。若将两个有序表合并成一个有序表......
  • Pytorch nn.Linear的基本用法与原理详解
    Pytorchnn.Linear的基本用法与原理详解原文:Pytorchnn.Linear的基本用法与原理详解_iioSnail的博客-CSDN博客nn.Linear的基本定义nn.Linear定义一个神经网络的线性层,方法签名如下:torch.nn.Linear(in_features,#输入的神经元个数out_features,#输出神经元个数......
  • Nginx listen 监听端口详解
    listen指令监听端口:listenaddress:port[default|default_server|[backlog=num|rcvbuf=size|sndbuf=size|accept_filter|deferred|bind|ipv6only=[on|off]|ssl]];默认:listen80配置块:server含义指定服务监听的地址,如果使用IP协议,则可以包......
  • shell 循环读取文件中每一行的方法详解
    当需要在shell脚本中读取文件中的每一行进行处理时,可以使用while循环或for循环。下面将详细介绍这两种方法。 方法一:使用while循环使用while循环是一种常见的读取文件中每行的方法。该方法的基本语法如下:whilereadlinedo#处理每一行的代码done<filename其中,readline......
  • Shell 函数详解(函数定义、函数调用、参数变量)
    Shell函数的本质是一段可以重复使用的脚本代码,这段代码被提前编写好了,放在了指定的位置,使用时直接调取即可。Shell中的函数和C++、Java、Python、C# 等其它编程语言中的函数类似,只是在语法细节有所差别。Shell函数定义的语法格式如下:functionname(){statements[re......
  • C++ 对拍详解 和解读
    对拍是什么#​对拍,是一个比较实用的工具。它能够非常方便地对于两个程序的输出文件进行比较,可以帮助我们实现一些自动化的比较输出结果的问题。​众所周知,几乎每一道编程题目,都会有某种正解能拿到满分;当我们想不出正解时,我们往往可以打暴力代码来获取部分分数。​但是,当我们觉......