JavaScript_学习10

最新推荐文章于 2024-04-20 19:39:44 发布
最新推荐文章于 2024-04-20 19:39:44 发布
阅读量182 收藏
点赞数
分类专栏： JavaScript 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_zhiyi/article/details/108546139
版权

总结步骤:

  1. 创建HttpRequest对象
    我们需要判断浏览器，不同的浏览器创建这个HttpRequest对象的时候，是使用的对象不同
    window.XMLHttpRequest-----IE7+, Firefox, Chrome, Opera, Safari 浏览器— XMLHttpRequest
    ----IE5,IE6浏览器------ActiveXObject(“Microsoft.XMLHTTP”);
    2.请求发送以后的处理动作
    XMLHttpRequest 对象属性
属性描述
onreadystatechange定义当 readyState 属性发生变化时被调用的函数
readyState保存 XMLHttpRequest 的状态。
0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪
responseText以字符串返回响应数据
responseXML以 XML 数据返回响应数据
status返回请求的状态号
200: "OK"
403: "Forbidden
404: "Not Found"
如需完整列表请访问 Http 消息参考手册
statusText返回状态文本（比如 “OK” 或 “Not Found”）

3.向服务器发送请求
3.1.open(method, url, async)
method：请求的类型：GET 还是 POST
url：服务器（文件）位置
async：true（异步）或 false（同步）
3.2 send()/send(string)

send()向服务器发送请求（用于GET）
send(string)向服务器发送请求（用于POST）
xhttp.setRequestHeader(“Conter-type”,“application/x-www-form-urlencoded”);
xhttp.send(“fname=Bill&Gates”);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//无条件全部查询
			function  quancha(){
				//1.创建HttpRequest对象
				var xmlhttprequest;
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentall",true);
				xmlhttprequest.send();
				//3.请求发出以后的处理动作
				xmlhttprequest.onreadystatechange=function(){
					//请求发送并相应成功
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
						//以字符串返回响应数据
						var info=xmlhttprequest.responseText;
						//由于我们得到的json数据是一个字符串，
						//我们现在需要将这个字符串转换成json对象
						var jsonobj=eval("("+info+")");
						//定义行变量
						var rows="";
						for(var i=0;i<jsonobj.length;i++){
							rows=rows+"<tr><td>"+jsonobj[i].stuid+
							        "</td><td>"+jsonobj[i].stuname+
									"</td><td>"+jsonobj[i].stuage+
									"</td><td>"+jsonobj[i].stuaddress+
									"</td></tr>";
						}
						document.getElementById("main").innerHTML=rows;
					}
				}
			}
			
			
			
			//根据id和name一起查询
			function  getStuidAndStuname(id,name){
				//1.创建HttpRequest对象
				var xmlhttprequest;
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuidstuname?stuid="+id+"&stuname="+name,true);
				xmlhttprequest.send();
				//3.请求发出以后的处理动作
				xmlhttprequest.onreadystatechange=function(){
					//请求发送并相应成功
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
						//以字符串返回响应数据
						var info=xmlhttprequest.responseText;
						//由于我们得到的json数据是一个字符串，
						//我们现在需要将这个字符串转换成json对象
						var jsonobj=eval("("+info+")");
						//定义行变量
						var rows="";
						if(jsonobj==null){
							rows="<tr><td colspan='4'>没有记录</td></tr>";
						}else{
							rows="<tr><td>"+jsonobj.stuid+
							        "</td><td>"+jsonobj.stuname+
									"</td><td>"+jsonobj.stuage+
									"</td><td>"+jsonobj.stuaddress+
									"</td></tr>";
						}
						document.getElementById("main").innerHTML=rows;
					}
				}
			}
			
			
			//根据id查询
			function  getStuid(id){
				//1.创建HttpRequest对象
				var xmlhttprequest;
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuid?stuid="+id,true);
				xmlhttprequest.send();
				//3.请求发出以后的处理动作
				xmlhttprequest.onreadystatechange=function(){
					//请求发送并相应成功
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
						//以字符串返回响应数据
						var info=xmlhttprequest.responseText;
						//由于我们得到的json数据是一个字符串，
						//我们现在需要将这个字符串转换成json对象
						var jsonobj=eval("("+info+")");
						//定义行变量
						var rows="";
						if(jsonobj==null){
							rows="<tr><td colspan='4'>没有记录</td></tr>";
						}else{
							rows="<tr><td>"+jsonobj.stuid+
							        "</td><td>"+jsonobj.stuname+
									"</td><td>"+jsonobj.stuage+
									"</td><td>"+jsonobj.stuaddress+
									"</td></tr>";
						}
						document.getElementById("main").innerHTML=rows;
					}
				}
			}
		
			//根据name查询
			function  getStuname(name){
				//1.创建HttpRequest对象
				var xmlhttprequest;
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				xmlhttprequest.open("GET","http://127.0.0.1:8080/ajaxdemo/studentstuname?stuname="+name,true);
				xmlhttprequest.send();
				//3.请求发出以后的处理动作
				xmlhttprequest.onreadystatechange=function(){
					//请求发送并相应成功
					if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
						//以字符串返回响应数据
						var info=xmlhttprequest.responseText;
						//由于我们得到的json数据是一个字符串，
						//我们现在需要将这个字符串转换成json对象
						var jsonobj=eval("("+info+")");
						//定义行变量
						var rows="";
						if(jsonobj==null){
							rows="<tr><td colspan='4'>没有记录</td></tr>";
						}else{
							rows="<tr><td>"+jsonobj.stuid+
							        "</td><td>"+jsonobj.stuname+
									"</td><td>"+jsonobj.stuage+
									"</td><td>"+jsonobj.stuaddress+
									"</td></tr>";
						}
						document.getElementById("main").innerHTML=rows;
					}
				}
			}
			window.onload=function(){
				//无条件全部查询
				quancha();		
				//为按钮添加点击事件
				document.getElementById("querybut").onclick=function(){
					//得到文本框输入的数据值
					var stuidval=document.getElementById("inputid").value;
					var stunameval=document.getElementById("inputname").value;
					if(stuidval!=""&&stunameval!=""){
						getStuidAndStuname(stuidval,stunameval);
					}
					if(stuidval==""&&stunameval==""){
						quancha();	
					}
					if(stuidval!=""&&stunameval==""){
						getStuid(stuidval);
					}
					if(stuidval==""&&stunameval!=""){
						getStuname(stunameval);
					}
				}			
			}
		</script>
	</head>
	<body>
		<center>
			stuid:<input id="inputid" type="text" />
			stuname:<input id="inputname" type="text" />
			<input id="querybut" type="button" value="搜索"/><br>
			<hr>
			<table id="main" border="1px" width="500px"></table>
		</center>
	</body>
</html>

在这里插入图片描述

H之一
关注
专栏目录
d2admin后台框架
12-26
这是一个基于vue cli 3.0以上的一个后台管理系统框架，下载之后使用npm i即可安装依赖，npm run serve即可使用；使用者需要熟悉vue和node.js,需要先下载node.js；如果npm i下载失败可切换到淘宝镜像安装；详情可浏览 'https://doc.d2admin.fairyever.com/zh/learn-guide/getting-started.html#安装环境'
d2admin框架学习
牛奔的博客
10-29 343
<template slot-scope="scope"> <el-button @click="upper_score(scope.$index, scope.row)" type="text">待上分</el-button></template>
request发post请求的方法
qq_26931659的博客
06-29 7499
EmailDate0=[]; EmailDate1=[]; var _params = {}; var url=“http://127.0.0.1:”+settings.serverPort+"/api/SupervisionSystem/GetEmail"; request.post(url, {form: _params}, function (err, reponse,body) { //c...
JS实现AJAX请求_1
零起点
09-28 234
JS实现AJAX请求_1（基础篇） AJAX：全称“Asynchronous JavaScript and XML”   (异步的JavaScript与XML)   AJAX请求的特点：   1，不刷新页面   2，服务器仅返回需要的数据   AJAX引擎：XMLHttpRequest   此对象是浏览器中的内置对象，在目前的所有浏览器中都支持此对象。   IE中获取此对象...
javascript基础学习系列三百七十四：发送和接收数据
m0_68635815的博客
03-13 372
打开 Web Socket 之后，可以通过连接发送和接收数据。服务器向客户端发送消息时，WebSocket 对象上会触发 message 事件。与通过 send()方法发送的数据类似，event.data 返回的数据也可能是 ArrayBuffer 或 Blob。这由 WebSocket 对象的 binaryType 属性决定，该属性可能是"blob"或"arraybuffer"。
JavaScript学习帮助文档_JavaScript学习帮助文档_javascript_
09-29
这份"JavaScript学习帮助文档"是专为初学者设计的，旨在帮助他们掌握JavaScript的基础知识和实际应用技巧。 首先，JavaScript的基本语法是学习的起点。它是一种基于原型的、动态类型的、弱类型的脚本语言。这意味着...
JavaScript_学习云计算的基础知识.zip
最新发布
05-20
10. **学习资源**：JavaScript的学习资源丰富，对于初学者来说，有很多在线课程、文档和社区支持，可以帮助快速掌握云计算相关知识。 `learn-to-cloud_main.zip`可能包含了深入学习云计算的JavaScript教程、实战...
JavaScript_学习网络开发的开放式课程.zip
05-20
在"JavaScript_学习网络开发的开放式课程.zip"这个压缩包中，我们可以期待找到一系列关于JavaScript学习的资源。"说明.txt"可能是课程介绍或者学习指南，它可能包含课程的目标、结构、推荐的学习路径以及可能遇到的...
JavaScript_学习WebGL API.zip
05-20
JavaScript
JSP.rar_javascript_javascript项目_jsp javascript_jsp小项目
09-22
"jsp_javascript"说明了JavaScript代码是如何嵌入到JSP页面中的，而"jsp小项目"则意味着我们可能会看到一个完整的、可运行的JSP应用示例，其规模适中，便于理解和学习。 **文件名称列表** 虽然列表中只提到了"JSP...
d2-admin-permission:在d2-admin-start-kit的基础上增加权限验证。简单配置，就可实现根据权限动态显示菜单和按钮
05-06
d2-admin-start-kit-with-permission permission 分支 功能 路由和菜单来自同一配置文件 实现角色验证，根据用户角色动态显示菜单 对无权限路由进行拦截 下载 git clone https://github.com/lfyfly/d2-admin-start-kit-with-permission.git git checkout permission npm install npm run dev 配置 1. 配置 src/api/modules/sys.user.api.js，mock的登录接口user的roles和isSuperAdmin字段。 roles: [ role:String ]，代表可访问该页面的角色 isSuperAdmin: Boolean，代表是否为超级管理员。超级管理员拥有任何权限，如果isSuperAdmin为true,
Java版水果管理系统源码-d2-admin-renren-security-study:学习[D2Admin人人企业版](https://g
06-05
Java版水果管理系统源码 Created by at 2019-5-5 13:01:14 Updated by at 2019-5-20 15:57:37 前言 上个月月底@ 开源了使用 D2Admin 适配 人人企业版(专业版) 的前端工程--,具体详情见☞。由于最近有开发后台管理系统的需求，加上其他诸多因素，如：想学习优秀的开源项目、刚好参加@ 组织的、之前项目使用过等等，于是乎萌生了根据commits学习了解如何改造renren-security前端的想法。当然，也督促自己产出一篇相关的文章，来记录这次有趣的学习之旅。 前置准备 所谓“工欲善其事必先利其器”，连我这样的Copy攻城狮都要搭建的前端基础开发环境，都9102年啦，再没有node环境都没法进行前端开发了，再不济运行d2-admin的环境总该有吧！ 安装环境 这里请参考D2 Admin快速上手部分： Fork D2-Admin@1.6.18 这里紧跟@ 大大的思路，基于D2-Admin@1.6.18 开发。当然也可以通过来初始化项目,具体操作参照： 了解D2Admin项目结构 有过开发经历的同学在项目开发之前一般都有过
js实现发送消息功能
wa2661391317的博客
04-16 3296
js实现发送消息功能 方法：1.一是函数传值 告诉要不要发送（即按Enter键可以发送消息） async handleEnter(e,isPaste) { let message = this.state.html var conversation = this.props.conversation; if( !conversation || !m...
js函数（2）
boat_sea的博客
04-22 129
局部变量只作用于函数体内，而在函数体内没进行var的变量为全局变量，不过这个全局变量只有在函数被调用后才能在函数外面调用。如下：function send(){a="我是全局变量"；//没有var 声明的全局变量只有在函数被调用后才能在函数外面被调用}send();document.write(a);                                                 ...
【Django-vue-admin学习笔记】dvadmin用户功能基础models解析
Mr数据杨
04-20 311
通过本文的详细介绍可以看到在一个复杂的软件项目中，如何通过精心设计的数据模型来管理各种类型的信息和业务流程。每个类都是项目中不可或缺的一部分，它们相互协作，提供了一个全面、高效和灵活的数据管理解决方案。从Users类的详细用户管理到类的消息处理，每个模型都通过其方法和属性为软件项目的顺利运行提供支持。这些数据模型展示了在现代软件开发中，结构化和有组织的数据处理方法的重要性，为构建可靠、高效和可扩展的软件应用提供了坚实的基础。
Get请求后端并带参数
qq_42177787的博客
05-25 3467
一、Get请求后端并带参数 JS请求后端并携带参数 业务场景：前端页面导出Excel文件 业务要求：后端生成文件，并记录数据 前端： exportData() { var data = JSON.stringify(this.ruleForm) window.open( `${base_url}/assessManagement/exportAssessInfo/?userToken=${this.$store.state.userToken}&data=` +
javascript XMLHttpRequest.send() 方法
学习专栏
12-02 2万+
下文 为转帖XMLHttpRequest.send()发送一个 HTTP 请求语法send(body)如果通过调用 open() 指定的 HTTP 方法是 POST 或 PUT，body 参数指定了请求体，作为一个字符串或者 Document 对象。如果请求体不适必须的话，这个参数就为 null。对于任何其他方法，这个参数是不可用的，应该
Node.js —— express中 res.json( )和 res.send( )
热门推荐
starter_____的博客
01-15 5万+
1、res.json([body]) 发送一个json的响应。这个方法和将一个对象或者一个数组作为参数传递给res.send()方法的效果相同。不过，你可以使用这个方法来转换其他的值到json，例如null，undefined。(虽然这些都是技术上无效的JSON)。 res.json(null); res.json({user:'tobi'}); res.status(500).json(
NodeJs——（14）express框架的send()方法简介
weixin_34235457的博客
07-08 620
（35）express框架的send方法 ①send方法用的还挺多的，因此需要明确其作用； ②原型是： res.send([body|status], [body]) 即既可以直接发送内容，也可以第一个参数状态，第二个参数内容。 如果直接发送内容的话，状态会被自动补全； ③发送的内容： 示例： res.send(newBuffer('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值