JavaScript11

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

总结下步骤

1.首先创建HttpRequest对象

我们需要判断浏览器，不同的浏览器创建这个HttpRequest对象的时候，是使用的对象不同

window.XMLHttpRequest---IE7+,Firefox,Chrome,Opera,Safari浏览器---XMLHttpRequest---IE5,IE6浏览器---ActiveObject("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:服务器（文件）位置

       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");

 

以get方式发送javascript请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//以Get方式发送javascript的ajax请求
			function getAjaxRequest(url){
				//创建HttpRequest对象
				var xmlhttprequest;
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				var basepath="http://127.0.0.1:8080/ajaxdmeo";
				url=basepath+url;
				xmlhttprequest.open("GET",url,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{
							if(jsonobj.length>0){
								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>";
								}
							}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(){
				//无条件查询
				getAjaxRequest("/studentall");
				//为按钮添加点击事件
				document.getElementById("querybut").onlick=function(){
					//得到文本框输入的数据值
					var stuidval=document.getElementById("inputid").value;
					var stunameval=document.getElementById("inputname").value;
					if(stuidval!=""&&stunmaeval!=""){
					getAjaxRequest("/studentstuidstuname?stuid="+stuidval+"&stuname="+stunameval);	
					}
					if(stuidval==""&&stunameval==""){getAjaxRequest("/studentall");
				    }
					if(stuidval!=""&&stunameval=""){
						getAjaxRequest("/studentstuid?stuid="+stuidval);	
					}
					if(stuidval!=""&&stunameval!=""){
						getAjaxRequest("/studentstuname?stuname="+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>

 以post方式发送javascript的ajax请求

1.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//以post方式发送javascript的ajax请求
			function postAjaxRequest2(url,canshu){
				//1.创建HttpRequest对象
				var xmlhttprequest;
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHttp");
				}	
			//2.发送请求
			var basepath="http:127.0.0.1:8080/ajaxdmeo";
			url=basepath+url
			xmlhttprequest.open("post",url,true);
			xmlhttprequest.setRequestHeader("Conten-type","application/x-www-form-urlencoded");
			if(canshu==null){
				xmlhttprequest.send()
			}else{
				xmlhttprequest.send(canshu);
			}
			//3.请求发出以后的处理动作
			xmlhttprequest.oneradystatechange=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{
						if(jsonobj.length>0){
							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>";
							}
						}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(){
			//保存post请求方法的请求参数的变量
			var canshu=null;
		    //无条件全部查询
			postAjaxRequest2("/studentall",canshu);
			//为按钮添加点击事件
			document.getElementById("querybut").onclick=function(){
				//得到文本框输入的数据值
				var stuidval=document.getElementById("inputid").value;
				var stunameval=document.getElementById("inputname").value;
				if(stuidval!=""&&stuname!=""){
					canshu="shuid="+stuidval+"&stuname"+stunameval;
					postAjaxRequest2("/studentstuidstuname",canshu);
				}
				if(stuidval==""&&stunameval==""){
					postAjaxRequest2("/studentall",canshu);
				}
			    if(stuidval!=""&&stunameval==""){
					canshu="stuid="+stuidval;
					alert(canshu);
					postAjaxRequest2("/studentstuname",canshu);
				}
			}
		}
		</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>

2.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//以post方式发送javascript的ajax请求
			function postAjaxrequest1(url){
				//1.创建HttpRequest对象
				var xmlhttprequest;
				if(window.XMLHttpRequest){
					xmlhttprequest=new XMLHttpRequest();
				}else{
					xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
				}
				//2.发送请求
				var basepath="http://127.0.0.1:8080/ajaxdmeo";
				url=basepath+url
				xmlhttprequest.open("post",url,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{
							if(jsonobj.length>0){
								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>";
																	}
							}else{
								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;
					}
				}
			}
		 window.onload=function(){
			 //无条件全部查询
			 postAjaxrequest1("/studentall");
			 //为按钮添加点击事件
			 document.getElementById("querybut").onclick=function(){
				 //得到文本框输入的数据值
				 var stuidval=document.getElementById("inputid").value;
				 var stuidval=document.getElementById("inputname").value;
				 if(stuidval!=""&&stunameval==""){
					 postAjaxrequest1("/studentstuidstuname?stuid="+stuidval+"&stuname="+stunameval);
				 }
				 if(stuidval==""&&stuname==""){
					 postAjaxrequest1("/studentall");
				 }
				 if(stuidval!=""&&stubameval==""){
					 postAjaxrequest1("studentstuid?stuid="+stuidval);
				 }
				 if(stuidval==""&&stunameval!=""){
					 postAjaxrequest1("/studentstuname?stuname="+stunameval);
				 }
			 }
		 }
		</script>
	</head>
	<body>
		<center>
			stuid:<input id="inputid" type="text"/>
			stuname:<input id="inputname" type="text"/>
			<input id="querbut" type="button" value="查找"/><br>
			<hr>
			<table id="main" border="1px" width="500px" ></table>
		</center>
	</body>
</html>

Get和post的区别

GET

POST

请求数据被放在请求的URL中

请求数据被放在请求的Http协议

请求数据用户可见

请求数据用户不可见

不安全

安全

传输的数据量小【255个字符】

传输的数据量没有限制

不能上传文件

能上传文件

限制表单是数据编码的值为ASCII码

支持ISO10646字符集

执行效率高

执行效率低

270年前
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 学习笔记 | 事件处理
鲁毅的博客
06-02 712
1.事件概述 1.1 什么是事件 事件是可以被 JS 检测到的行为，实质上是一种交互操作。 例如：我们可以给某按钮添加一个 onclick （点击）事件，当用户点击时触发某个函数。 1.2 事件的作用 各个元素之间可以借助事件来进行交互 用户和页面之间也可以通过事件来交互 后端和页面之间也可以通过事件来交互（减轻服务器压力） 注意：事件通常会与函数进行配合，当事件发生了函数才会执行，事件的本质就是一次交互操作。 1.3 事件传递 JS 中规定： 事件不仅能够和触发者交互，还会在特定情况下沿着 dom t
javascript基础学习系列四百五十六： readystatechange 事件
wanmeijuhao的博客
02-08 758
支持 readystatechange 事件的每个对象都有一个 readyState 属性，该属性具有一个以下列出的可能的字符串值。而在包含较少且较小外部资源的页面中，这个readystatechange 事件有可能在 load 事件触发后才触发。在外部资源较多的页面中，很可能交互阶段会早于完成阶段，而在外部资源较少的页面中，很可能完成阶段会早于交互阶段。与 pageshow 对应的事件是 pagehide，这个事件会在页面从浏览器中卸载后，在 unload 事件之前触发。添加到 window。
JS学习第五期
pe11223的博客
01-20 229
JS学习第五期
JavaScript10
weixin_49344258的博客
09-12 93
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.请求发送以后的处理动作 XML
Javascript：readystatechange事件
weixin_34343689的博客
10-26 1437
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
javascript - javascript tutorial
最新发布
07-03
PART 1: JAVASCRIPT BASICS 1 1. JAVASCRIPT – Overview2 What is JavaScript?2 Client-Side JavaScript2 Advantages of JavaScript3 Limitations of JavaScript3 JavaScript Development Tools3 Where is ...
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
JavaScript教程文档
09-22
JavaScript 编程语言，本教程文档来源网站： https://zh.javascript.info/ 个人离线学习参考阅读使用。
js之onreadystatechange事件
毒牙
09-18 9691
XMLHttpRequest包含以下三个非常重要的属性：onreadystatechange、readyState、status。 readySate存有以下五个XML状态信息。 0： 请求末初始化、1：服务器已建立链接、2：请求已接收、3：请求已处理、4：请求已完成，且响应已就绪 每当readyState发生变化是都会触发onreadystatechange函数，总共会触...
ajax 深入学习
jaymou
04-12 231
目录 参考： 一、浏览器对服务器请求 二、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 7194
关于readystatechange 事件也是常用事件之一，为了提高用户的交互体，特别是在H5及移动端我们用得比较多，所以在此通过学习记录向大做一个详细介绍，希望对前端开发人员有所帮助。        IE为 DOM文档中的某些部分提供了 readystatechange 事件。这个事件的目的是提供与文档或 元素的加载状态有关的信息，但这个事件的行为有时候也很难预料。支持 readystatech...
页面生命周期：DOMContentLoaded，load，beforeunload，unload
LeviDing的博客
12-16 1430
DOMContentLoaded，load，beforeunload，unloadHTML 页面的生命周期包含三个重要事件：DOMContentLoaded —— 浏览器已完全加载 HT...
JS高级程序设计——第13章事件 13.4 事件类型（HTML5 事件）
YuTong_的博客
04-22 532
HTML5 事件一、contextmenu 事件二、beforeunload事件 DOM 规范没有涵盖所有浏览器支持的所有事件。很多浏览器出于不同的目的——满足用户需求或 解决特殊问题，还实现了一些自定义的事件。HTML5 详尽列出了浏览器应该支持的所有事件。本节只讨论其中得到浏览器完善支持的事件，但并非全部事件。(其他事件会在本书其他章节讨论。) 一、contextmenu 事件 cont...
XMLHttpRequest 的 readystatechange 事件和 load 事件的区别
Triumphal
04-20 3894
分别在 onreadystatechange 和 onload 里写入代码：xhr.onload = function () { console.log(`load:xhr.readyState == ${xhr.readyState} ,xhr.status=${xhr.status}`); } xhr.onreadystatechange = function () { con...
Ajax学习-上（基本用法）
weixin_42603991的博客
10-09 188
Ajax 1.概述 web程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务器的请求，获得服务器的数据： 地址栏输入地址，回车，刷新 特定元素的href或src属性 表单提交 这些方案都是我们无法通过或很难通过代码的方式进行编程（对服务器发出请求并且接受服务器返回的响应），如果我们可以通过javaScr...
XHR的属性
jiaoqi6132的博客
02-23 1489
标准属性 1.XMLHttpRequest.onreadystatechange 当 readyState 属性发生变化时调用的EventHandler。 语法： 只要 readyState 属性发生变化，就会调用相应的处理函数。这个回调函数会被用户线程所调用。XMLHttpRequest.onreadystatechange 会在 XMLHttpRequest 的readyState...
【面试】onreadystatechange事件
qq_46580087的博客
03-17 3650
在困难面前，回避的时间越长，付出的代价就越大。
揭秘JavaScript忍者技巧
"JavaScript 编程之道" 通过《Secrets of the JavaScript Ninja》一书，我们可以了解到 JavaScript 编程的秘密和技巧。本书由 John Resig 和 Bear Bibeault 合作编写，对 JavaScript 编程的方方面面进行了深入的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值