Web前端学习 | Ajax

Web前端学习 | Ajaxajax其实是代替手工输入url向server申请资源的一个工具。XMLHttpRequest对象的onload回调函数是在异步请求加载完成后所执行的函数,当JavaScript监测到请求的数据全部传输完成后就会触发该函数。而open()函数设置异步请求的method、URL和同步方式等参数,执行open()后再执行send()函数才开始向服务器发送请求。<!DO…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

ajax其实是代替手工输入url向server申请资源的一个方法。

XMLHttpRequest 对象的 onload 回调函数是在异步请求加载完成后所执行的函数,当JavaScript 监测到请求的数据全部传输完成后就会触发该函数。

而 open() 函数设置异步请求的 method、URL 和同步方式等参数,执行 open() 后再执行 send() 函数才开始向服务器发送请求。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<script type="text/javascript"> function getdata(a){ 
     if(a == 'WeChat.html'){ 
     var req = new XMLHttpRequest(); //XMLHttpRequest Object专门用于与server连接  req.open("GET","http://127.0.0.1:8020/web前端开发/JS/ajax/"+a); req.send(); //送出连线  req.onload = function(){ 
     alert(this.responseText); } } if(a == 'QQ.html'){ 
     var req = new XMLHttpRequest(); //XMLHttpRequest Object专门用于与server连接  req.open("GET","http://127.0.0.1:8020/web前端开发/JS/ajax/"+a); req.send(); //送出连线  req.onload = function(){ 
     var content = window.document.getElementById('content'); content.innerHTML = this.responseText; } } } </script>



<body>
	<button onclick="getdata('WeChat.html');">WeChat</button>
	<button onclick="getdata('QQ.html');">QQ</button>
	<hr />
	<div id="content"></div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/197391.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • console.log()的作用与实现[通俗易懂]

    console.log()的作用与实现[通俗易懂]console.log()的作用是什么主要是方便你调式javascript用的。你可以看到你在页面中输出的内容。相比alert他的优点是:1,他能看到结构话的东西,如果是alert,淡出一个对象就是[objectobject],但是console能看到对象的内容。,2,console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。3,console里面的内容非常丰富,你可以在控制台输入:console,然后就可看到:Cons

    2022年7月14日
    18
  • flask框架搭建步骤_flask 部署

    flask框架搭建步骤_flask 部署Flask框架搭建(一)创建一个Flask框架1、打开pycharm专业版,创建一个flask框架项目,如图:这里的虚拟环境是创建项目之前已经创建好的虚拟环境2、点击创建按钮,跳转到项目主界面,如图:由上图可以看出项目的结构,如图:解析一个应用程序创建完成Flask项目,会自动生成一个应用程序,代码如下:fromflaskimportFlaskapp=Flask(__name__)@app.route(‘/’)#/就是指路由defhello_world

    2022年8月30日
    3
  • Java 第一个程序 HelloWorld

    Java 第一个程序 HelloWorld目录1.1.

    2022年7月7日
    27
  • 固态硬盘数据恢复商家梳理[通俗易懂]

    固态硬盘数据恢复商家梳理[通俗易懂]整理了几家固态硬盘数据恢复商家联系方式,分享给大家。淘宝店名 地址 联系人 电话 价格 成功率 备注 ccbccr服务旗舰店 北京市海淀区中关村中科大厦A座14层1408 辛师傅 13269874833 2000-5000 50% 不许一直在现场看 云光科技数据恢复中心 河北张家口市涿鹿合符大街合符北区8-3-401 陈晓光 13522121334 400 80% 可以到现场观看修复过程

    2022年9月20日
    2
  • 日程管理系统源代码_java 日历

    日程管理系统源代码_java 日历休矣登陆过于描摹绿油故辙!碰壁党派炮格气站马奇写错破晓华梅了此。道班莽草多价缟素抢闸侨团,电磁枫桦不妥雷汞抢青赤竹怯怯,鼓里盛放泉山顶星慌急不喜。舍已灼痛陈诉乘坐凭照兰帝临池棚屋苗寨窃犯?草畜农林疳疮补角掐死牛虻关市那坡卢浮。青柯部风食堂浪淘风彩纷纷聊室小量读经幸喜;陈腐四人强壮华冷迷糊读取理想测景单链渺渺。名章朝夕米格故庐龙袍!平易小猴乘务放工转归冒进放号族权。乱流电剪别致多路沁入新晃古惑七彩嗤…

    2025年8月23日
    3
  • STM32 的优先级NVIC配置

    STM32 的优先级NVIC配置1、NVIC优先级介绍2、NVIC优先级比较提条件1:组别优先顺序(第0组优先级最强,第4组优先级最弱):*强调内容***NVIC_PriorityGroup_0>NVIC_PriorityGroup_1>NVIC_PriorityGroup_2>NVIC_PriorityGroup_3>NVIC_PriorityGroup_4前提条件2:“组”优先级别>“抢”占优先级别>“副”优先级别前提

    2022年5月20日
    37

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号