【速成之路】网页编程必会的Ajax——Ajax工作流程(一)_编辑页面ajax-程序员宅基地

技术标签: 【速成之路】Ajax  前端  ajax  javascript  

个人主页:这个昵称我想了20分钟
往期专栏: 【速成之路】jQuery
      【速成之路】SQLserver


在这里插入图片描述

在这里插入图片描述

发送请求

  Ajax可以通过 XMLHttpRequest 对象实现用异步方式在后台发送请求。通常情况下,Ajax的发送请求有两种,一种是发送GET请求,另一种是发送POST请求。无论发送哪种请求,都需要经过以下4个步骤:

1.初始化XMLHttpRequest对象

  初始化 XMLHttpRequest 对象。为了提高程序的兼容性,需要创建一个跨浏览器的 XMLHttpRequest 对象,并且判断 XMLHttpRequest 对象的实例是否成功,如果不成功,则给出提示。

2.为XMLHttpRequest对象指定一个返回结果处理函数(即回调函数)

  为 XMLHttpRequest 对象指定一个返回结果处理函数(即回调函数),用于对返回结果进行处理。

3.创建一个与服务器的连接

  创建一个与服务器的连接。在创建时,需要指定发送请求的方式(即GET或POST),以及设置是否采用异步方式发送请求。

4.向服务器发送请求

  向服务器发送请求。 XMLHttpRequest 对象的send()方法可以实现向服务器发送请求,该方法需要传递一个参数,如果发送的是GET请求,可以将该参数设置为null。

Ajax核心代码

  例1是一个网页上有一个文本框,当该文本框失去焦点时,在网页上指定位置显示“Ajax请求从服务器响应内容”,其在浏览器上的运行结果如图1和图2所示。

<!DOCTYPE html>
<html>
   <head>
   <title>Ajax测试</title>
   <meta http-equiv="keywords"content="keyword1,keyword2,keyword3">
   <meta http-equiv=" description "content="this is my page">
   <meta http-equiv="content-type"content="text/html;charset=UTF-8">
   <script type="text/javascript ">
       window.onload=function(){
      
         //获取文本框对象变量myUser
         var myUser=document.getElementById ("username");
         //onblur是myUser对象失去焦点时触发的事件
         myUser.onblur=function()
         {
      
            var xmlhttp;
            if(window.XMLHttpRequest )
            {
      
              //IE7+、Firefox、Chrome、Opera、Safari浏览器执行代码
              xmlhttp=new  XMLHttpRequest();
            }
            else
            {
      
              //IE6、IE5浏览器执行代码
              xmlhttp=new  ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
      
              //ready State=4表示交互完成
              if(xmlhttp.readyState==4){
      
                //status=200表示正确返回了数据
                if(xmlhttp.status==200){
      
                   // responseText 属性值是从服务器端返回数据
                   var message=xmlhttp.responseText ;
                   document.getElementById ("display").innerHTML=message
                   }
                }
            }
            xmlhttp.open("GET"," ajaxServer.jsp", true);
            xmlhttp.send();
            }
        }
   </script>
</head>
<body>
    <form action=""  method="get">
       <input type="text"  id="username"  name="username">
       <span id="display"></span><br>
       <input type="submit"  value="测试">
     </form>
</body>
</html>

在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_61684063/article/details/124468179

智能推荐

noip2018 day1T1 铺设道路_铺设道路 线段树-程序员宅基地

文章浏览阅读343次。题目:https://www.luogu.org/problemnew/show/P5019今年noip考了一道原题:在考场上我想了暴力的方法:这题暴力可以过 #include&lt;cstdio&gt;#include&lt;cstring&gt;#include&lt;algorithm&gt;#include&lt;cmath&gt;using namespac..._铺设道路 线段树

docker下Flink安装_flink.conf 在哪里-程序员宅基地

文章浏览阅读611次。下载flink进入master节点的opt目录wget https://mirrors.tuna.tsinghua.edu.cn/apache/flink/flink-1.11.2/flink-1.11.2-bin-scala_2.11.tgz解压tar -zvxf flink-1.11.2-bin-scala_2.11.tgz配置Flink在master节点下进入到conf目录下,找到flink-conf.yamlvim flink-conf.yaml修改jobmanager._flink.conf 在哪里

ACP云计算认证:个人笔记(真题总结)_触发伸缩规则的任务独立于伸缩组存在-程序员宅基地

文章浏览阅读906次,点赞3次,收藏10次。Elastic Compute Server 是一种处理能力可弹性伸缩的计算服务。CPU内存需要停机,带宽不需要。 垂直:带宽 CPU 内存 水平:服务器 Region 地域 Zone 可用区 安全组, 允许包含跨可用区的实例 磁盘 只能挂在同一可用区 快照镜像 可以跨可用区,镜像可以复制到别的地域 发生故障时,实例只能在同一个可用区迁移 默认系统盘40GB-500GB ,系统盘设备名:/dev/xvda ECS创建时必须要选择 镜像 来确定其操作系统..._触发伸缩规则的任务独立于伸缩组存在

python项目代码审计_Pylama python和javascript的代码审计工具-程序员宅基地

文章浏览阅读254次。适用于Python和JavaScript的代码审计工具依赖Python(2.6、2.7、3.2、3.3)使用JavaScript检查器(gjslint),您需要安装python-gflags有pip install python-gflags。安装pip install pylama使用示例Pylama易于使用,并且在检查代码质量方面非常有趣。只需运行pylama并从所有pylama插件中获取通..._pylama 扫描 javascript

mysql查看表和字段注释_mysql查看表的字段和注释-程序员宅基地

文章浏览阅读3.7k次,点赞2次,收藏12次。说明在mysql中,information_schema这个数据库中保存了mysql服务器所有数据库的信息。包括数据库名,数据库的表,表字段的数据类型等。也就是说,我们想知道mysql中有那些库,那些表,表里面有那些字段以及他们的注释,都可以从information_schema中获取。1.查看数据库所有表名及注释SELECTtable_name name,table_comment commentFROMinformation_schema.TABLESWHEREtable_sch_mysql查看表的字段和注释

jmeter展示内存cpu_jmeter 监控服务器的内存,cpu等内容-程序员宅基地

文章浏览阅读89次。PerfMon Server AgentInstallationYou do not need any root/admin privilege. You can just unzip the the ServerAgent-X.X.X.zip somewhere on the server. Then launch the agent usingstartAgent.shscript on ..._jmeter cpu total localhost

随便推点

oracle匹配靓号的正则表达式_正则表达式号码靓号类型判断代码-程序员宅基地

文章浏览阅读153次。正则表达式号码靓号类型判断代码更新时间:2010年05月09日 13:56:59 作者:很多网站需要将好的会员号留着,或用于日后的盈利。实现方法不是本文讨论范围,本文仅列出博主用于检测靓号类型的一些正则。靓号检测:主要可以检测连号(正连 12345、倒连65432)、AABB号、手机号码、日期号(生日号、年度号)、ABBCABB号,3位以上重复号。更多类型号码检测可以根据以下表达式改造。' 匹..._oracle吉祥号查询

3D人脸点云降噪 k近邻 matlab-程序员宅基地

文章浏览阅读1.7k次,点赞2次,收藏16次。% ptCloud = pointCloud(1000*rand(100,3,'single'));%'double';pointdata=importdata('C:\myfiles\xyz\mdq_face_1.xyz'); %载入点云数据ptCloud = pointCloud(pointdata);% figure;% pcshow(ptCloud); %显示点云数据[poi...

Robot Framework超简单安装教程_robot打开gui客户端-程序员宅基地

文章浏览阅读238次。安装教程很简单一共三部:前提 安装了python和pip,可以参照上一篇教程https://blog.csdn.net/weixin_38961318/article/details/950749801、安装robotframework执行命令pipinstallrobotframework即可2、安装robotframework-ride执行命令pipinsta..._robot打开gui客户端

Spring.factories-程序员宅基地

文章浏览阅读1.5w次,点赞27次,收藏119次。1.概述在 Spring Boot 项目中,怎样将 pom.xml 文件里面添加的依赖中的 bean 注册到 Spring Boot 项目的 Spring 容器中呢?你可能会首先想到使用@ComponentScan 注解,遗憾的是 @ComponentScan 注解只能扫描 Spring Boot 项目包内的 bean 并注册到 Spring 容器中,项目依赖包中的 bean 不会被扫描和注册。此时,我们需要使用 @EnableAutoConfiguration 注解来注册项目依赖包中的 ..._spring.factories

云上高可用系统-韧性设计模式-程序员宅基地

文章浏览阅读3.8k次,点赞24次,收藏23次。同质化部署是一种部署策略,它指的是在部署时将系统的所有组件集成在一起,然后部署到系统的每个实例上。“拥抱故障”的理念强调了开发者需要在系统的全生命周期中考虑系统如何应对故障,确保系统在故障发生时的状态是符合预期的。因此,一个具备韧性的系统需要在部分故障的情况下仍能够正常运行,即使面对较大规模的故障,系统也能够提供大部分的服务。另外,在大规模系统中,事故定级是一个常见的做法,通过事故定级,可以更有针对性地采取措施,提高系统的韧性。这些模式的综合应用能够帮助构建更具韧性的系统,提高系统的可用性和稳定性。

kafka高速导入数据引发的磁盘占满问题_kafka数据盘换新盘后,一开始使用量是原盘的两倍-程序员宅基地

文章浏览阅读1.3k次。今天Kafka出现了一个问题,测试多线程高速生产数据,造成磁盘占满了。我们的kafka配置文件策略如下:log.retention.bytes=1073741842 # topic每个分区的文件存储大小 1Glog.segment.bytes=536870921 # topic每个分区的每个段的文件存储大小 512Mlog.retention.check.interval.ms=60000 #检测时间60slog.segment.delete.delay.ms = 60000 #标记删除延时_kafka数据盘换新盘后,一开始使用量是原盘的两倍