当前位置: 首页 > news >正文

我们都遇到过的这些ajax代码到底什么意思?

hello,我是小索奇,本篇文章给大家带来ajax中常用的一些代码,为什么写这些呢?

因为小索奇也看黑马、尚硅谷等老师的视频,在学习java的时候经常会介绍ajax,导致很多不了解的伙伴一脸懵然,以防万一,这里还是介绍下吧~

xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

这段代码是一个使用 Ajax 技术向服务器发送 GET 请求、获取返回数据并更新页面的示例。具体来说,这段代码中包含以下几个部分:

1.xmlhttp对象的创建

var xmlhttp = new XMLHttpRequest();

在这里,我们使用 XMLHttpRequest 对象实现了 Ajax 的请求。XMLHttpRequest 是原生支持的 JavaScript 对象,它可以直接向服务器发送 HTTP 请求,并获取返回的数据。

2.状态变化的监听

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

这里我们通过 onreadystatechange 属性,为 XMLHttpRequest 对象添加一个状态变化的监听函数。当 readyState 值发生变化时,该函数会被触发执行。readyState 表示 XMLHttpRequest 的状态,有五种可能的取值,分别对应以下含义:

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪

在这个示例中,我们判断当 readyState 变成了 4,而且 status 码为 200(表示服务器返回了成功的响应)时,我们就将服务器返回的文本内容更新到网页上。

设置请求参数并发送请求

xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

最后我们通过 open() 方法设置了请求的类型(GET)、请求的 URL (本例中的 URL 为 "/try/ajax/ajax_info.txt"),以及是否使用异步方式发送请求(最后一个参数为 true)。

最后,我们调用 send() 函数向服务器发送请求。这个函数可以接受一个请求体参数(对于 GET 请求来说,请求体为空),如果需要像 POST 请求一样发送数据给服务器,就需要在这里传入一个字符串作为请求体。

这些就是常见的ajax代码啦~

http://www.lryc.cn/news/62015.html

相关文章:

  • TiDB实战篇-TiCDC
  • ElasticSearch第十七讲 ES索引别名的使用
  • 第二个机器学习应用:乳腺癌数据集在决策树模型上的挖掘
  • 前端canvas截图酷游地址的方法!
  • 2018年入学,2021年入职
  • python+nodejs+ssm+vue 基于协同过滤的旅游推荐系统
  • 【STL十四】函数对象(function object)_仿函数(functor)——lambda表达式
  • 如何写出高质量的前端代码
  • YOLOv7如何提高目标检测的速度和精度,基于优化算法提高目标检测速度
  • CentOS 7中安装配置Nginx的教程指南
  • Vicuna- 一个类 ChatGPT开源 模型
  • 5.1 数值微分
  • 云计算服务安全评估办法
  • laravel5.6.* + vue2 创建后台
  • Python自动化sql注入:布尔盲注
  • Microsoft Defender for Office 365部署方案
  • 字节岗位薪酬体系曝光,看完感叹:不服真不行
  • 华为OD机试-高性能AI处理器-2022Q4 A卷-Py/Java/JS
  • Vue - 实现垂直菜单分类栏目,鼠标移入后右侧出现悬浮二级菜单容器效果(完整示例源码,详细代码注释,一键复制开箱即用)
  • NVM-无缝切换Node版本
  • CCF-CSP真题《202303-1 田地丈量》思路+python,c++满分题解
  • Autosar-软件架构
  • 8年测开年薪30W,为什么从开发转型为测试?谈谈这些年的心路历程……
  • 滑动奇异频谱分析:数据驱动的非平稳信号分解工具(Matlab代码实现)
  • updateByPrimaryKey和updateByPrimaryKeySelective的区别
  • 【ARM Coresight 4 - Rom Table 介紹】
  • 11111111
  • JavaWeb——TCP协议的相关特性
  • 数据结构(C语言实现)——二叉树的概念及二叉树顺序结构和链式结构的实现(堆排序+TOP-K问题+链式二叉树相关操作)
  • OpenShift:关于OpenShift(OKD)通过命令行的方式部署镜像以及S2I流程Demo