Ajax的使用方法

 1,什么是Ajax?

    Ajax(异步Javascript和XML),是指一种创建交互式网页应用的网页开发技术。

    2,Ajax的作用

    Ajax可以使网页实现异步更新----即在不更新整个页面的情况下实现对某一部分进行更新。

    简单来说Ajax就是用于连接服务器的一种工具。

    3, Ajax所包含的技术

      Ajax并非一种新的技术,而是几种原有技术的结合体。 以下便是Ajax所包含的技术

                (1).使用CSS和XHTML来表示

                (2).使用DOM模型来交互和动态显示

                (3).使用XMLHttpRequest来和服务进行异步通信

                (4).使用javascript来绑定和调用

    4,Ajax的工作原理(如图所示)

 (1)用户在Web页面上执行了某个操作,比如鼠标单击每个链接或按钮等。

  (2)根据用户的操作,触发事件的发生,并调用注册到该事件的JavaScript事件处理函  数。在JavaScript事件处理函数中,需要创建并初始化一个用以向服务器发送异步请求XMLHttpRequest对象,同时指定一个回调函数。当服务器端响应返回时,将自动调用该回调函数。

 (3)  服务器收到XMLHttpRequest对象的请求后,根据请求进行一系列的处理。

(4)处理完毕,服务器端向客户端返回所需要的数据,数据格式通常是HTML,XML,JSON。

(5)数据到达客户端之后执行JavaScript回调函数,在回调函数中将处理返回的数据,并将数据显示在用户界面。这时,站在用户的角度来说,用户获得自己操作所需的数据,并看到界面中某部分内容的更新。由于是异步更新,并没有重新加载页面,所以具有很高的用户交互性,用户几乎察觉不到延迟。

5,Ajax的核心

使用的 XMLHttpRequest 对象,但是需要注意的是——不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的

    ​ 如:IE浏览器使用 ActiveXObject,而其他浏览器则使用 XMLHttpRequest的 javascript 的内建对象

6,Ajax的使用步骤:

(1)创建xhr new XMLHttpRequest();

(2)、创建请求, xhr.open(method,url,isAsyn);

(3)、设置回调函数, onreadystatechange();

(4)、发送请求, xhr.send();

7,JSON语法是JavaScript对象表示语法的子集。

l 数据在键值对中
l 数据由逗号分隔
l 花括号保存对象
l 方括号保存数组

例如使用JSON来表示输入的账号及密码,如图所示,注意其中键应当放置在双引号中。

8,Ajax的封装

   名称

/描述

type

规定请求的类型(GETPOST)。

url

规定发送请求的URL。默认是当前页面。

data

规定要发送到服务器的数据。

timeout

设置本地的请求超时时间(以毫秒计)。

success(result,status,xhr)

当请求成功时运行的函数。

error(xhr,status,error)

如果请求失败要运行的函数。

beforeSend(xhr)

发送请求前运行的函数。

complete(xhr,status)

请求完成时运行的函数(在请求成功或失败之后均调用,即在 success error 函数之

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/202215.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

顶级大厂Quora如何优化数据库性能?

Quora 的流量涉及大量阅读而非写入,一直致力于优化读和数据量而非写。 0 数据库负载的主要部分 读取数据量写入 1 优化读取 1.1 不同类型的读需要不同优化 ① 复杂查询,如连接、聚合等 在查询计数已成为问题的情况下,它们在另一个表中构…

HT for Web (Hightopo) 使用心得(5)- 动画的实现

其实,在 HT for Web 中,有多种手段可以用来实现动画。我们这里仍然用直升机为例,只是更换了场景。增加了巡游过程。 使用 HT 开发的一个简单网页直升机巡逻动画(Hightopo 使用心得(5)) 这里主…

纯js实现录屏并保存视频到本地的尝试

前言:先了解下:navigator.mediaDevices,mediaDevices 是 Navigator 只读属性,返回一个 MediaDevices 对象,该对象可提供对相机和麦克风等媒体输入设备的连接访问,也包括屏幕共享。 const media navigator…

【brew】Mac上安装vue3

先安装node。 这里我从其他博客找的方案,原始脚本下载太慢了。 cnpm的安装: 让npm更快一点。 npm install -g cnpm --registryhttps://registry.npm.taobao.org安装vue脚手架 2.0版本:sudo npm install -g vue-cli 3.0版本: sud…

2023.11.26使用opencv调节图片亮度

2023.11.26使用opencv调节图片亮度 测试一些opencv对图片的处理效果,方法比较简单,找出所有像素点,然后将RGB三色的亮度分别进行调节即可,同类可以进行像素级的处理。测试结果和项目代码如下: 使用OpenCV调节图拍亮…

Unity引擎:创造无限可能的游戏开发平台

Unity引擎:创造无限可能的游戏开发平台 一、Unity引擎概述1.1 什么是Unity引擎?1.2 Unity引擎的特点和优势 二、Unity开发环境和工具2.1 Unity编辑器2.2 支持的平台2.3 脚本语言2.4 图形和音频工具 三、Unity游戏开发流程四、示例应用场景五、结论&#…

java使用poi读写excel(处理上下标和科学计数法)

Background 要读写如下图所示的excel,符号和单位中包含上下标,在读写时需要特殊处理;取值列中是科学计数法,读写时需要特殊处理;excel中包含多个sheet,读的时候把所有sheet的数据读出来,写的时候…

分割掩模 VS 掩膜

掩膜 Mask分割掩模 Segmentation Mask总结示例 掩膜 Mask “掩膜” 是指一种用于 标识或遮蔽图像中特定区域 的 图像。 在图像处理中,掩膜通常是一个 二值图像,其中的 像素值为 0 或 1。binary Mask 叫做二元掩膜,如下图所示: 这…

Airtest进阶使用篇!提高脚本稳定性 + 批量运行脚本!

一、背景 今天彭于晏为大家分享Airtest进阶使用篇,主要包含两块的内容: 提高脚本稳定性批量运行脚本生成测试报告 二、提高脚本稳定性 1、添加全局配置: #全局设置 ST.FIND_TIMEOUT10 #设置隐式等待时长,默认识别图片时间是30秒,可改为…

[黑皮系列] 计算机网络:自顶向下方法(第8版)

文章目录 《计算机网络:自顶向下方法(第8版)》简介作者目录前言配套公开课 《计算机网络:自顶向下方法(第8版)》 出版信息: 原作名: Computer Networking: A Top-Down Approach 作者: [美] Jame…

运维知识点-SQLServer/mssql

SQLServer/mssql Microsoft structed query language常见注入提权 技术点:0x00 打点前提 0x01 上线CS0x02 提权0x03 转场msf0x04 抓取Hash0x05 清理痕迹 Microsoft structed query language 常见注入 基于联合查询注入 order by 判断列数(对应数据类型…

从0开始学习JavaScript--JavaScript 单例模式

单例模式是一种常见的设计模式,它保证一个类仅有一个实例,并提供一个全局访问点。在 JavaScript 中,单例模式通常用于创建唯一的对象,以确保全局只有一个实例。本文将深入探讨单例模式的基本概念、实现方式,以及在实际…

const 和 constexpr 深入学习

在 C 中,const 和 constexpr 都可以用来修饰对象和函数。修饰对象时,const 表示它是常量,而 constexpr 表示它是一个常量表达式。常量表达式必须在编译时期被计算1。修饰函数时,const 只能用于非静态成员的函数,而 con…

Secure Software Lifecycle Management (SSLM)安全软件生命周期管理

文章目录 前言一、现代理念二、安全的软件生命周期管理总结 前言 The concept of integrating security into the software development process is not new. While I cannot definitively assert that Microsoft was the pioneer of this concept, the Secure Development Li…

清理docker Build Cache缓存文件

使用docker构建镜像,发现docker的overlay2文件会越来越大。 使用命令查看docker系统占用资源: docker system df 可以看到已经占用了26.7GB,清理这个缓存 docker builder prune 再次查看,已经没有缓存了,清理成功。 …

【UE】中文字体 发光描边材质

效果 步骤 1. 先将我们电脑中存放在“C:\Windows\Fonts”路径下的字体导入UE 点击“全部选是” 导入成功后如下 2. 打开导入的“SIMSUN_Font”,将字体缓存类型设置为“离线” 点击“是” 这里我选择:宋体-常规-20 展开细节面板中的导入选项 勾选“使用距…

Redis缓存淘汰策略

Redis缓存淘汰策略 1、各种面试题 生产上你们的redis内存设置多少?如何配置、修改redis的内存大小如果内存满了你怎么办?redis清理内存的方式?定期删除和惰性删除了解过吗?redis缓存淘汰策略有哪些?分别是什么?你用哪个?redis的LRU了解过吗?请手…

FastApi接收不到Apifox发送的from-data字符串_解决方法

接收不到Apifox发送的from-data字符串_解决方法 问题描述解决方法弯路总结弯路描述纵观全局小结 问题描述 这里写了一个接口,功能是上传文件,接口参数是file文件和一个id字符串 gpt_router.post("/uploadfiles") async def create_upload_fi…

基于ora2pg迁移Oracle19C到postgreSQL14

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…