JavaScript10

最新推荐文章于 2023-01-20 21:04:25 发布
最新推荐文章于 2023-01-20 21:04:25 发布
阅读量92 收藏
点赞数
文章标签： js ajax javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49344258/article/details/108548173
版权

https://www.w3school.com.cn/js/index.asp

总结步骤

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.2send()/Send(string)

send()

向服务器发送请求（用于 GET）

send(string)

向服务器发送请求（用于 POST）

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhttp.send("fname=Bill&lname=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/ajaxdmeo/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>

 

270年前
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 学习笔记 | 事件处理
鲁毅的博客
06-02 702
1.事件概述 1.1 什么是事件 事件是可以被 JS 检测到的行为，实质上是一种交互操作。 例如：我们可以给某按钮添加一个 onclick （点击）事件，当用户点击时触发某个函数。 1.2 事件的作用 各个元素之间可以借助事件来进行交互 用户和页面之间也可以通过事件来交互 后端和页面之间也可以通过事件来交互（减轻服务器压力） 注意：事件通常会与函数进行配合，当事件发生了函数才会执行，事件的本质就是一次交互操作。 1.3 事件传递 JS 中规定： 事件不仅能够和触发者交互，还会在特定情况下沿着 dom t
javascript基础学习系列四百五十六： readystatechange 事件
最新发布
wanmeijuhao的博客
02-08 700
支持 readystatechange 事件的每个对象都有一个 readyState 属性，该属性具有一个以下列出的可能的字符串值。而在包含较少且较小外部资源的页面中，这个readystatechange 事件有可能在 load 事件触发后才触发。在外部资源较多的页面中，很可能交互阶段会早于完成阶段，而在外部资源较少的页面中，很可能完成阶段会早于交互阶段。与 pageshow 对应的事件是 pagehide，这个事件会在页面从浏览器中卸载后，在 unload 事件之前触发。添加到 window。
JS学习第五期
pe11223的博客
01-20 219
JS学习第五期
Javascript：readystatechange事件
weixin_34343689的博客
10-26 1430
2019独角兽企业重金招聘Python工程师标准>>> ...
js之onreadystatechange事件
毒牙
09-18 9671
XMLHttpRequest包含以下三个非常重要的属性：onreadystatechange、readyState、status。 readySate存有以下五个XML状态信息。 0： 请求末初始化、1：服务器已建立链接、2：请求已接收、3：请求已处理、4：请求已完成，且响应已就绪 每当readyState发生变化是都会触发onreadystatechange函数，总共会触...
javascript10.rar_javascript
09-19
javascript 经典实例，源码和特效。
Practica10-Javascript
02-18
Practica10-Javascript
JavaScript教程文档
09-22
JavaScript 编程语言，本教程文档来源网站： https://zh.javascript.info/ 个人离线学习参考阅读使用。
javascript10教程
04-13
javascript10教程
JAVASCRIPT HashTable
10-31
JAVASCRIPT HashTable
ajax 深入学习
jaymou
04-12 227
目录 参考： 一、浏览器对服务器请求 二、ajax 1、原生写法 1、readystatechange监听xhr对象的变化（readystate） 2、同步、异步 小技巧：js计时 3、兼容ie5/6 三、jquery ajax 快捷方法 四、axios 五、跨源（跨域）请求解决方案 1、jsonp 2、CORS 参考： 1、mdn XMLHttpRequest ...
元素的加载状态判断readystatechange事件使用方法及注意事项
PromiseCao的博客
09-29 7117
关于readystatechange 事件也是常用事件之一，为了提高用户的交互体，特别是在H5及移动端我们用得比较多，所以在此通过学习记录向大做一个详细介绍，希望对前端开发人员有所帮助。        IE为 DOM文档中的某些部分提供了 readystatechange 事件。这个事件的目的是提供与文档或 元素的加载状态有关的信息，但这个事件的行为有时候也很难预料。支持 readystatech...
JS高级程序设计——第13章事件 13.4 事件类型（HTML5 事件）
YuTong_的博客
04-22 522
HTML5 事件一、contextmenu 事件二、beforeunload事件 DOM 规范没有涵盖所有浏览器支持的所有事件。很多浏览器出于不同的目的——满足用户需求或 解决特殊问题，还实现了一些自定义的事件。HTML5 详尽列出了浏览器应该支持的所有事件。本节只讨论其中得到浏览器完善支持的事件，但并非全部事件。(其他事件会在本书其他章节讨论。) 一、contextmenu 事件 cont...
页面生命周期：DOMContentLoaded，load，beforeunload，unload
LeviDing的博客
12-16 1399
DOMContentLoaded，load，beforeunload，unloadHTML 页面的生命周期包含三个重要事件：DOMContentLoaded —— 浏览器已完全加载 HT...
Ajax学习-上（基本用法）
weixin_42603991的博客
10-09 186
Ajax 1.概述 web程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务器的请求，获得服务器的数据： 地址栏输入地址，回车，刷新 特定元素的href或src属性 表单提交 这些方案都是我们无法通过或很难通过代码的方式进行编程（对服务器发出请求并且接受服务器返回的响应），如果我们可以通过javaScr...
XMLHttpRequest 的 readystatechange 事件和 load 事件的区别
Triumphal
04-20 3881
分别在 onreadystatechange 和 onload 里写入代码：xhr.onload = function () { console.log(`load:xhr.readyState == ${xhr.readyState} ,xhr.status=${xhr.status}`); } xhr.onreadystatechange = function () { con...
XHR的属性
jiaoqi6132的博客
02-23 1454
标准属性 1.XMLHttpRequest.onreadystatechange 当 readyState 属性发生变化时调用的EventHandler。 语法： 只要 readyState 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState...
【面试】onreadystatechange事件
qq_46580087的博客
03-17 3635
在困难面前，回避的时间越长，付出的代价就越大。
Ajax--概述、xhr对象的常用属性和方法、xhr的常用事件、xhr对象发送POST请求、xhr对象发送GET请求、xhr对象的兼容性问题、数据交换格式(XML、JSON)
小白小白从不日别的博客
05-18 4166
主要介绍了Ajax
javascript 10进制转16进制
03-16
JavaScript中将10进制转换为16进制可以使用toString()方法。例如： var num = 255; var hex = num.toString(16); console.log(hex); // 输出ff 其中，toString()方法的参数为要转换的进制数，这里为16进制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值