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 函数之

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑IP地址怎么修改?http代理ip设置方法有哪些?

在互联网时代,我们的网络已经成为我们生活、工作和学习中不可或缺的一部分。有时候,为了保护我们的隐私或者突破网络限制,我们需要修改电脑的IP地址。那么,电脑IP地址怎么修改呢?http代理ip设置方法有哪些呢&#xff1…

关于前端学习的思考-浮动元素和块级元素的关系

先摆关系:浮动元素嵌套块级元素,浮动元素和块级元素是上下关系。 1、浮动元素为父盒子,块级元素为子盒子。 父盒子为浮动元素,子盒子不会继承。如图floatnone; 摆结论:子盒子为行内元素,行内块…

ISCTF2023新生赛Misc部分WP

ISCTF2023新生赛部分WP MISC:签到:你说爱我?尊嘟假嘟:小蓝鲨的秘密:easy_zip:杰伦可是流量明星:蓝鲨的福利:Ez_misc:PNG的基本食用:小猫:MCSOG-猫猫:镜流:小白小黑:张万森…

高项备考葵花宝典-项目范围管理输入、输出、工具和技术

项目范围管理包括确保项目“做”且“只做”所需的全部工作(即不能少做,也不能多做,如果多做,就要消耗团队额外的时间和资源,并且无法被认可),以成功完成项目。项目范围管理主要在于定义和控制哪…

微信小程序——给按钮添加点击音效

今天来讲解一下如何给微信小程序的按钮添加点击音效 注意&#xff1a;这里的按钮不一定只是 <button>&#xff0c;也可以是一张图片&#xff0c;其实只是添加一个监听点击事件的函数而已 首先来看下按钮的定义 <button bind:tap"onInput" >点我有音效&…

MySQL之undo日志

聊聊undo log 什么是undo log undo log&#xff08;回滚事务&#xff09;&#xff0c;在事务没有提交前&#xff0c;MySQL将记录更新操作的反向操作到undo log日志中&#xff0c;以便进行回退保证事务的原子性 undo log的作用 1.提供回滚操作 我们在进行数据更新操作的时候…

实现一个高并发的Redis分布式锁

1. 无锁场景 下面是一个扣减库存逻辑, 由于查库存和扣减库存两个操作不是原子的,明显存在并发超卖问题 // 假设初始库存200GetMapping("/stock")public String stock(RequestParam(value "name", defaultValue "World") String name) {String…

TCP 基本认识

1&#xff1a;TCP 头格式有哪些&#xff1f; 序列号&#xff1a;用来解决网络包乱序问题。 确认应答号&#xff1a;用来解决丢包的问题。 2&#xff1a;为什么需要 TCP 协议&#xff1f; TCP 工作在哪一层&#xff1f; IP 层是「不可靠」的&#xff0c;它不保证网络包的交付…

leetCode 40.组合总和 II + 回溯算法 + 剪枝 + used数组 + 图解

给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。candidates 中的每个数字在每个组合中只能使用 一次 注意&#xff1a;解集不能包含重复的组合 示例 1: 输入: candidates [10,1,2,7,6,1,5], t…

AD1668A 双N/P沟道 MOS管 耐压20V 过流2.1A 适用于正反接充电

AD1668A 双N/P沟道 MOS管 耐压20V 过流2.1A 的集成MOS管&#xff0c;封装TSOT23-8封装&#xff0c;体积小&#xff0c;适用于板子较小的板子。相当于2个SI2301、2个SI2302的集成模块。 芯片的内阻 N沟道的基本参数 P沟道的基本参数 这种结构的方式是适用于正反接都能充电的结构…

从0开始学习JavaScript--JavaScript中的解构赋值及使用场景

在现代JavaScript中&#xff0c;解构赋值是一种强大而灵活的语法特性&#xff0c;它允许从数组或对象中提取值并赋给变量。这种语法不仅使代码更简洁&#xff0c;而且提高了可读性。在本篇文章中&#xff0c;将深入探讨JavaScript中解构赋值的基本概念、语法规则以及丰富的使用…

JenKins快速安装与使用

一、JenKins 0.准备&#xff0c;配置好环境 1&#xff09;Git&#xff08;yum安装&#xff09; 2&#xff09;JDK&#xff08;自行下载&#xff09; 3&#xff09;Jenkins&#xff08;自行下载&#xff09; 1.下载安装包 进官网&#xff0c;点Download下方即可下载。要下…