Ajax简介与基本使用

news2024/12/24 21:30:52

前言

在这里插入图片描述

本文为Ajax简介与基本使用相关知识,首先将对Ajax进行简介(包含:什么是AjaxAjax的作用Ajax的好处),然后介绍JS方式Ajax的实现(包含发送 Ajax 请求的五个步骤创建 XMLHttpRequest 对象向服务器发送请求服务器响应等),最后介绍jQuery框架中的Ajax(具体包含:jQuery框架的Ajax简介$.ajax()方法$.get()方法$.post()方法等)。

📌博主主页:小新要变强 的主页
👉Java全栈学习路线可参考:【Java全栈学习路线】最全的Java学习路线及知识清单,Java自学方向指引,内含最全Java全栈学习技术清单~
👉算法刷题路线可参考:算法刷题路线总结与相关资料分享,内含最详尽的算法刷题路线指南及相关资料分享~
👉Java微服务开源项目可参考:企业级Java微服务开源项目(开源框架,用于学习、毕设、公司项目、私活等,减少开发工作,让您只关注业务!)


目录

文章标题

  • 前言
  • 目录
  • 一、Ajax简介
    • 1️⃣什么是Ajax
    • 2️⃣Ajax的作用
    • 3️⃣Ajax的好处
  • 二、JS方式Ajax的实现
    • 1️⃣发送 Ajax 请求的五个步骤
    • 2️⃣创建 XMLHttpRequest 对象
    • 3️⃣向服务器发送请求
    • 4️⃣服务器响应
    • 5️⃣代码实现
  • 三、jQuery中的Ajax
    • 1️⃣jQuery框架的Ajax简介
    • 2️⃣$.ajax()方法
    • 3️⃣$.get()方法
    • 4️⃣$.post()方法
  • 后记

在这里插入图片描述

一、Ajax简介

1️⃣什么是Ajax

  • Ajax即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
  • Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。
  • Ajax 是一种用于创建快速动态网页的技术。
  • Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
  • 通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

2️⃣Ajax的作用

Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,部分更新。

3️⃣Ajax的好处

  • 减轻服务器负担,按需要获得数据
  • 无刷新更新页面,减少用户实际和心理的等待时间
  • 只更新部分页面,有效利用带宽
  • 主流浏览器都支持Ajax

二、JS方式Ajax的实现

JS的Ajax:出现最早,使用一个对象XmlHttpRequest对象。专门用于进行Ajax请求发送,和响应的接收使用Ajax发请求,使用Ajax接收响应,使用JS进行页面刷新。

存在的缺点:

  • 若使用JS的Ajax技术,为了实现简单功能,需要书写大量复制代码
  • JS的Ajax代码,浏览器兼容性比较差

1️⃣发送 Ajax 请求的五个步骤

其实也就是 使用 XMLHttpRequest 对象的五个步骤。

  • 请求的网址、请求方法get/post。
  • 提交请求的内容数据、请求主体等。
  • 接收响应回来的内容。

发送 Ajax 请求的五个步骤:

  • (1)创建异步对象。即 XMLHttpRequest 对象。
  • (2)设置请求的参数。包括:请求的方法、请求的url。
  • (3)发送请求。
  • (4)注册事件。onreadystatechange事件,状态改变时就会调用。如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
  • (5)获取返回的数据。

2️⃣创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建XMLHttpRequest对象的语法:

var xmlhttp=new XMLHttpRequest();

3️⃣向服务器发送请求

XMLHttpRequest对象用于和服务器交换数据。如需将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法。

方法描述参数
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求method:请求的方式,GET或POST;url:请求路径;async:true(异步)或 false(同步)
send(string)将请求发送到服务器string:请求参数,仅用于POST请求。格式:名1=值1&名2=值2

🍀GET请求

一个简单的GET请求:

xmlhttp.open("GET","DemoAJAXServlet",true);
xmlhttp.send();

🍀POST请求

一个简单POST请求:

xmlhttp.open("POST","DemoAJAXServlet",true);
xmlhttp.send();

如果需要像HTML表单那样POST数据,请使用setRequestHeader()来添加HTTP头。然后在send()方法中填写发送的数据:

xmlhttp.open("POST","DemoAJAXServlet",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=tom&age=20");

4️⃣服务器响应

获得来自服务器的响应,使用XMLHttpRequest对象的responseText或responseXML属性。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

请求被发送到服务器时,需要执行一些基于响应的任务。每当readyState改变时,就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。

下面是XMLHttpRequest对象的三个重要的属性:

属性描述
onreadystatechange状态改变事件触发器,每当readyState属性改变时,就会调用该函数
readyState存有XMLHttpRequest的状态。从0到4发生变化。0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成,且响应已就绪
status响应状态码。200: 成功;404: 未找到页面

在onreadystatechange事件中,当readyState等于4且状态为200时,表示响应已就绪:

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

5️⃣代码实现

//1.创建ajax核心对象XMLHttpRequest
var ajax = new XMLHttpRequest();
//2.与服务器建立连接
ajax.open("post","testAjax");
//3.设置请求头,如果请求方式为post,请求头必须设置
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.注册事件监听,监听服务器端对象状态的改变
//作用:服务器处理之后,响应客户端,通过此函数来接收响应的数据,此后在ajax中此函数被称为回调函数
ajax.onreadystatechange = function(){
  //判断服务器对象的状态是否为完成状态
  if(ajax.readyState == 4){ //4表示服务器完成
    //判断服务器是否处理成功
    if(ajax.status == 200){ //200响应状态码,表示处理成功
      alert("响应回的数据:" + ajax.responseText);
    }else {
      alert("处理失败:" + ajax.status);
    }
  }
}
//5.发送请求
var name = document.getElementById("name").value;
ajax.send("name="+name);

三、jQuery中的Ajax

1️⃣jQuery框架的Ajax简介

jQuery是一个优秀的JS框架,对JS原生的Ajax进行了封装。
与Ajax操作相关的jQuery方法在开发中经常使用的有三种:POST、GET、AJAX

2️⃣$.ajax()方法

$ .ajax()方法用于执行AJAX异步请求。所有的jQuery AJAX方法都使用$ .ajax()方法。该方法通常用于其他方法不能完成的请求。

语法:

$.ajax({name:value, name:value, ... })

该参数规定AJAX请求的一个或多个名称/值对。下面的表格中列出了可能的名称/值:

名称描述
asyncBoolean表示请求是否异步处理。默认true
beforeSend(xhr)Function发送请求前运行的函数。
cacheBoolean表示浏览器是否缓存被请求页面。默认true
complete(xhr,status)Function请求完成时运行的函数(在请求成功或失败之后均调用,即在success和error函数之后)
contentTypeString发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-urlencoded”
contextObject为所有AJAX相关的回调函数规定 “this” 值
dataObject,String规定要发送到服务器的数据
dataFilter(data,type)Function用于处理XMLHttpRequest原始响应数据的函数
dataTypeString预期的服务器响应的数据类型。text:返回纯文本字符串;json:返回JSON数据
error(xhr,status,error)Function如果请求失败要运行的函数
globalBoolean规定是否为请求触发全局AJAX事件处理程序。默认true
ifModifiedBoolean规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认false
jsonpString在一个jsonp中重写回调函数的字符串
jsonpCallbackString在一个jsonp中规定回调函数的名称
passwordString规定在HTTP访问认证请求中使用的密码
processDataBoolean规定通过请求发送的数据是否转换为查询字符串。默认true
scriptCharsetString规定请求的字符集
success(result,status,xhr)Function,Array当请求成功时运行的函数
timeoutNumber设置本地的请求超时时间(以毫秒计)
traditionalBoolean规定是否使用参数序列化的传统样式
typeString规定请求的类型(GET或POST)
urlString规定发送请求的URL。默认是当前页面
usernameString规定在HTTP访问认证请求中使用的用户名
xhrFunction用于创建XMLHttpRequest对象的函数

代码示例:

$.ajax({
  url : "checkUsername",
  type : "post",
  dataType : "text",
  data : "username="+$("#username").val(),
  beforeSend : function(){
    if($("#username").val()==""){
      alert("用户名不能为空");
      return false;
    }
    return true;
  },
  success : function(data){
    alert(data);
  }
});

3️⃣$.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据。

语法:

$.get(URL,data,callback,type);

参数解析:

  • URL:请求的路径地址,必需项
  • data:发送Key/value请求参数
  • callback:请求成功后所执行的回调函数
  • type:返回内容格式,xml, html, script, json, text, _default

代码示例:

$.get("checkUsername",{ username : $("#username").val() },function(data){
  alert(data);
});

4️⃣$.post()方法

$.post()方法通过HTTP POST请求从服务器上请求数据。

语法:

$.post(URL,data,callback,type);

参数解析:

  • URL:请求的路径地址,必需项
  • data:发送Key/value请求参数
  • callback:请求成功后所执行的回调函数
  • type:返回内容格式,xml, html, script, json, text, _default

代码示例:

$.post("checkUsername",{ username : $("#username").val() },function(data){
  alert(data);
});

后记

在这里插入图片描述

👉Java全栈学习路线可参考:【Java全栈学习路线】最全的Java学习路线及知识清单,Java自学方向指引,内含最全Java全栈学习技术清单~
👉算法刷题路线可参考:算法刷题路线总结与相关资料分享,内含最详尽的算法刷题路线指南及相关资料分享~

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通用的融合框架:IFCNN

IFCNN: A general image fusion framework based on convolutional neural network (IFCNN: 基于卷积神经网络的通用图像融合框架) 在本文中,我们提出了一种基于卷积神经网络的通用图像融合框架,称为IFCNN。**受变换域图像融合算…

测试人生 | 折腾 6 年踩坑无数的”笨小孩“:方向对了,路就不会遥远!

image1080459 72.4 KB 编者按:本文来自霍格沃兹测试学院学员 笨小孩 的分享,从退伍军人到测试小白,从培训被坑再到经历各种小公司倒闭、裁员、6年间几番折腾,最终靠“笨功夫”成功转型测试开发,年薪近 30W&#xff0c…

番外8:ADS导出DWG文件并交给工厂制板

番外8:ADS导出DWG文件并交给工厂制板 (功率放大器板子和散热器) 将ADS源文件导出PCB与散热器文件(功率放大器) 导出文件并预处理 打开制作好的版图文件,在原有基础上打好散热孔和固定孔,散热…

Deep Learning Architecture for Automatic Essay Scoring

1. Introduction 利用手工制作的特征,如文章长度、句子长度、语法正确性或可读性来评分的文章面临以下问题。首先,它可能被学生用作欺骗系统的一种选择,即写出并提交一篇结构良好但偏离主题**的文章。由于文字结构和表面等语言特征&#xff…

[附源码]Python计算机毕业设计电影网站系统设计Django(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置: Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术: django python Vue 等等组成,B/S模式 pychram管理等…

OpenAi[ChatGPT] 使用Python对接OpenAi APi 实现智能QQ机器人-学习详解篇

文章大部分来自:https://lucent.blog 原文博客地址:https://blog.ideaopen.cn 最近火热全文的ChatGPT,被很多人玩出了花,我们在Github上可以看到几个常见的逆向SDK包,这一篇我将以学习的方式来写这一篇文章。 这些SDK不…

NeurIPS 2022 | 浙大与SEA AI Lab提出高表现力可泛化语音合成

语音合成旨在根据文本合成特定说话人的语音。先进语音合成模型展示了强大的生成能力,无论是生成高水平的细节还是其生成的多样性,都让人印象深刻。个性化语音生成需求的增加对语音合成模型提出了挑战,尤其是在域外(OOD; Out-Of-Di…

[附源码]Node.js计算机毕业设计大悦城电竞赛事管理系统Express

项目运行 环境配置: Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术: Express框架 Node.js Vue 等等组成,B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境:最好是Nodejs最新版,我…

CV-对比学习-模型:MoCo/SimCLR/BYOL/SimSiam

很多大佬认为,深度学习的本质就是做两件事情:Representation Learning(表示学习)和 Inductive Bias Learning(归纳偏好学习)。在表示学习方面,如果直接对语义进行监督学习,虽然表现很…

海泰隐私计算能力助力实现数据“可用不可见”

一、 数据孤岛阻碍数据发展 当今时代,信息技术日新月异,人类文明正经历从信息科技(IT)时代向数据科技(DT)时代的飞速变革。数据作为基础性战略资源的地位日益凸显。然而,数据孤岛问题突出。出于对数据安全的传统保护&…

单商户商城系统功能拆解45—应用中心—积分商城

单商户商城系统,也称为B2C自营电商模式单店商城系统。可以快速帮助个人、机构和企业搭建自己的私域交易线上商城。 单商户商城系统完美契合私域流量变现闭环交易使用。通常拥有丰富的营销玩法,例如拼团,秒杀,砍价,包邮…

pikachu靶场-2 跨站脚本漏洞(xss)

跨站脚本漏洞(xss) Cross-Site Scripting 简称为“CSS”,为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS。一般XSS可以分为如下几种常见类型: 1.反射性XSS; 2.存储型XSS; 3.DOM型XSS; XSS漏洞一直被评估…

Kubernetes二进制多节点集群部署

多Maser集群架构的了解 Kubernetes作为容器集群系统,通过健康检查重启策略实现了Pod故障自我修复能力,通过调度算法实现将Pod分布式部署,并保持预期副本数,根据Node失效状态自动在其他Node拉起Pod,实现了应用层的高可用…

羧基聚乙二醇叠氮 COOH-PEG-N3/Azide的结构式

叠氮化物与炔烃之间的反应能够使羧酸PEG有效缀合到目标分子或材料上,并且产率很高。 所得羧酸可与胺,羟基和其他基团反应。 叠氮化物和羧酸之间的PEG接头具有良好的水溶性,较小的位阻和增强的稳定性。 产品名称 羧基聚乙二醇叠氮 COOH-PEG…

css div等块元素设置display:inline-block存在间隙问题

我们给块元素例如div设置display:inline-block&#xff0c;会发现元素之间存在空隙。如下图。 <div class"contain"><div id"box1"></div><div id"box2"></div><div id"box3"></div> <…

Simulink自动化-Matlab脚本自动生成Autosar RTE S/R接口及mapping

文章目录前言设计Excel模板Input/Output属性Sender/Receiver属性Matlab脚本自动创建Input/Output接口自动创建RTE Sender/Receiver port实现效果Excel设置运行新建Input与Output运行创建RTE Port及Mapping总结前言 在之前的一篇文章中&#xff0c;介绍了Autosar Parameter Por…

内网隧道各类协议方法

正+反(了解即可) 正向代理:已控服务器监听端口,通过这个端口形成一个正向的隧道,由代理机器代替主机去访问内网目标。但是内网入口一般处于DMZ区域有防火墙拦截,无法直接进入内网环境。 反向代理:由内网主机主动交出权限到代理机器,然后本地去连接形成反向代理。例如…

吉林优美姿文化:抖音账号怎么做垂直?

其实现在抖音限流看起来是一件很平常的事情&#xff0c;那么在我们抖音运营中&#xff0c;如果出现一些不合规的行为或者怎么样的&#xff0c;都会导致限流&#xff0c;严重的可能还会被限流&#xff0c;那么这时候怎么办呢&#xff1f;跟着吉林优美姿小编来一起看看吧&#xf…

MySql索引简单知识点及事务的分析

目录 索引 什么是MySql索引&#xff1f; 索引的易忽略点 基本操作&#xff1a; 查看索引 创建索引 删除索引 索引在MySql中的数据结构 事务 使用方法 事务的核心特性 隔离性 隔离的常见问题 ***MySql四个隔离级别 &#x1f4cc;————本章重点————&#x1f…

微软艰难的2022安全年回顾

©网络研究院 这些是管理员需要了解的 2022 年以来最重要的漏洞和修复。 我们即将结束 2022 年的安全年。只有时间会告诉我们 2023 年会发生什么&#xff0c;但对于 Microsoft 网络的 IT 和安全管理员来说&#xff0c;2022 年是混合攻击、本地 Exchange Server 缺陷和需要…