Ajax笔记---day01

于 2021-01-29 20:41:28 发布
阅读量217 收藏
点赞数
文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677100/article/details/113405449
版权

Ajax笔记—day01

为什么使用Ajax

1.jsp发送请求数据的时候，请求发送完毕之后就到了servlet上，这个就是jsp通过网络发送数据给http协议，后端处理数据(servlet),处理完毕之后，又会把数据传递给jsp(数据存储在域中)，jsp从域中读取数据，然后通过el表达式，jstl把数据渲染到页面上。以上的操作，如果页面比较漂亮，图片比较多，js的操作比较多，页面渲染就比较慢。

2.采用html里面的标签解决数据的请求，它不需要服务器，也就是不需要tomcat的编译，通过浏览器就可以编译，数据的回显就比较快。它可以通过form表单的发送提交数据，a标签把数据传递过去，如果这些数据都是从后端返回过来的，整个页面都有刷新，速度就会慢，如果是单个数据的更新，数据就比较快。

3.我们使用之前的方法的话，它就会让我们的整个页面都会刷新，数据量大的时候，网络就有压力，页面资源加载时就比较慢。

什么是Ajax

Ajax(Asynchronous JavaScript And XML)—异步的javascript和xml文件，它并不是一个新的技术，而是很多技术的组合在一起的标准的使用方法。就是jsp+html的form表单或a标签，它们把数据传递给servlet,现在交给Ajax去做。Ajax的核心是一个对象，是javascript里面的一个XmlHttpRequest,使用这个对象可以完成数据传递和接收，这个对象通过浏览器来创建

以后我们在进行数据的传递的过程中，bootstrap,layui等，他们都可以通过ajax发送数据，通过ajax的方式来进行数据的传递的时候，可以通过页面直接把数据传递到后端，其实就是在页面上加入一段js的代码。

Ajax—可以让异步请求(局部请求)，在一个页面上，要加入一部分数据的时候，就不用刷新整个页面，而是让一小部分数据进行更新。Ajax是页面发送数据，数据走到后端后，后端通过请求把数据进行整理，然后响应页面。

Ajax进行数据传递的时候，ajax可以传输纯文本(txt),xml文件，json文件。纯文本没有格式，解析时比较麻烦；xml和json是字符串，一般传输时传输这两种数据，在开发中，都会使用json数据进行传递。

同步与异步

同步

客户端发送请求的时候，等待服务端发送一个响应，如果服务器没有响应的时候它就一直等待，浪费时间。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vt4g8dPX-1611921722825)(C:\Users\Administrator\Desktop\1\1-29.1.png)]

你的一次请求就是让服务器把整个的数据整体打包发送过来，数据就相对比较多，网络就会有一定的压力，只要你发送请求就是整个页面的数据，压力大。

同步存在的问题是当数据量比较大的时候，网络的压力和服务器的压力就比较大。

异步

客户端发送一个请求之后，不需要等待，就可以直接发送第二个请求。它在使用的时候，不需要等待时间，也不需要刷新整个页面，只是这个页面上的局部刷新。让页面上的局部数据发生变化，由js发送请求。局部页面刷新，不是这个页面的刷新。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zcCzrx9R-1611921722837)(C:\Users\Administrator\Desktop\1\1-29.2.png)]

局部刷新的实现方式

  1. 最简单的方式，通过js来实现，当前页面上有一个标签，让标签中的内容发生变化。

    这个只是使用js实现页面刷新数据，没有和后端的服务器进行连接。

    <body style="background-color: grey;">
	<script type="text/javascript">
		window.onload=function () {
			var but=document.getElementById("but01");
			but.onclick=function(){
				var h1=document.getElementById("h1");
				h1.innerHTML="这个是点击之后的内容"
			}
		}
	</script>

	<h1 id="h1"></h1>
	<button id="but01">点击我更新h1中的数据</button>
</body>

    <script type="text/javascript">
		function aa(){
			document.getElementById("h1").innerHTML="修改完的数据";
		}
	</script>

	<h1 id="h1"></h1>
	<button onclick="aa()">点击我更新h1中的数据</button>

Ajax应用场景和优缺点

应用场景:

Ajax使用到局部刷新，页面上表格里的数据，站内搜索(框架引擎)，注册页面，淘宝的历史分页等等。都是采用的局部刷新的方式，你的请求过去是服务器处理你的请求，不需要等待

优缺点：

优点：异步交互方式，用户体验好，不需要刷新整个页面，性能上也有一定的提高，服务器压力减小

缺点：不是所有地方都能使用，因为多次访问请求，造成服务器的压力

原始的js实现ajax的操作

最原始的javascript实现ajax操作数据(jsAjax,jquery Ajax等等)

最原始的js—ajax使用4步完成数据的提交和响应

1.创建xmlhttprequest对象,这个对象是通过浏览器来创建，现在使用的浏览器都支持。

所有的浏览器：（浏览器的版本，根据不同的浏览器可以创建xmlhttprequest对象，但是创建对象的方式不一样）

‘Microsoft.XMLHTTP’,

‘MSXML2.XMLHTTP.6.0’,

‘MSXML2.XMLHTTP.5.0’,

‘MSXML2.XMLHTTP.4.0’,

‘MSXML2.XMLHTTP.3.0’,

‘MSXML2.XMLHTTP’

我们现在最常用的浏览器：

var xmlhttp=new XMLHttpRequest();// 现在大多数浏览器都死支持这个方式来创建xmlhttp对象的；

ie6.0的浏览器的创建：

var xmlhttp1=new ActiveXObject("MSXML2.XMLHTTP");

ie5.0以下的浏览器都使用这个方式：

var xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP ");

<script type="text/javascript">
		//1.得到xmlhttprequest
		function CreateXmlHttpRequest(){
			try{
				//当前浏览器为最新的浏览器
				return new XMLHttpRequest();
			}catch(e){
				try{
					//ie6版本
					return new ActiveXObject("MSXML2.XMLHTTP");
				}
				catch(e){
					//ie5版本以下
					try{
					return new ActiveXObject("Microsoft.XMLHTTP ");
					}
				    catch(e){
					     alert("你的浏览器太老了，请升级浏览器");
				    }
				}

			}
		}
	</script>

2.和服务器建立连接

xmlhttprequest（返回过来的对象）.open() 用它打开与服务器之间的连接 他带有三个参数：

（1）请求方式：可以使用post， get方式

（2）请求的地址 url：指定你的服务器的资源，例如：/ajaxTest/ajaxServlet

（3）这次请求是否为异步请求；如果为true表示发送异步请求，否则同步请求！

  xmlhttprequest.open("GET", "/AjaxTest /AjaxServlet", true);

3.发送请求

xmlhttprequest.send(null);//null一般都加上,否则有的浏览器就会无法发送；

参数：就是我们的请求体；如果你的get请求最好写上null；

如果是post请求：xmlhttprequest.send(“username=zhangsan&password=123456”);

4.服务器响应之后返回过来的数据

xmlhttprequest带有一个监听事件,注册我们的监听器； onreadystatechange（当你的状态发生变化的时候；）

xmlhttprequest5种状态；

1.0号状态：我们的xmlhttprequest对象刚刚创建没有调用 open（）方法；

2.1号状态：请求开始：调用了open()方法，但还没有调用send()方法

3.2号状态：调用完了send()方法了；

4.3号状态：服务器已经开始响应，但不表示响应结束了！

5.4号状态：服务器响应结束！（通常我们只关心这个状态！！！）
通过xmlhttprequest对象获取状态：

var state=xmlhttprequest.readyState； 获取的状态；

获取服务给过来的状态:

var status=xmlhttprequest.status;// 服务器给过来的状态码（200； 404； 500）

获取从服务器过来的数据；

var content = xmlhttprequest.responseText;//得到服务器的响应的文本格式的内容
var content = xmlhttprequest.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象！

例子:直接访问文件中的内容

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	
	<title>Document</title>
	<script>
		//1.创建xmlhttprequest对象
		function CreateXmlHttpRequest(){
			try{
				//当前浏览器为最新的浏览器
				return new XMLHttpRequest();
			}catch(e){
				try{
					//ie6版本
					return new ActiveXObject("MSXML2.XMLHTTP");
				}
				catch(e){
					//ie5版本以下
					try{
					return new ActiveXObject("Microsoft.XMLHTTP ");
					}
				    catch(e){
					     alert("你的浏览器太老了，请升级浏览器");
				    }
				}

			}
		}

		function getserverdata(){
			//2.和服务器建立连接
		var xmlhttprequest=CreateXmlHttpRequest();
		xmlhttprequest.open("GET","aa.txt",true);
		//3.发送请求
		xmlhttprequest.send(null);
		//4.服务器响应之后返回过来的数据
		xmlhttprequest.onreadystatechange=function(){
			if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){
				var text=xmlhttprequest.responseText;//后端返回来的数据
				document.getElementById("h1").innerHTML=text;//得到服务器的响应的文本格式的内容
			 }
			}
		}
		
	</script>
</head>
<body>
	<h1 id="h1"></h1>
	<button onclick="getserverdata()">点我</button>
</body>
</html>

通过ajax发送请求给服务端的一个文件，然后读取到文件中的内容，展示到页面上

提交数据的方式

使用get方式提交数据

1.不带任何参数
<body>
	<script>
		function aa(){
			var xmlhttprequest=new XMLHttpRequest();
			xmlhttprequest.open("GET","/AjaxTest/GetServlet01",true);
			xmlhttprequest.send(null);
			xmlhttprequest.onreadystatechange=function(){
				if(xmlhttprequest.readyState==4&&xmlhttprequest.status==200){
					document.getElementById("h1").innerHTML=xmlhttprequest.responseText;
				}
			}
		}
	</script>
	<h1 id="h1"></h1>
	<button onclick="aa()">获取服务端数据</button>
</body>
2.带参数传递到后端（参数的值是固定的）
<script>
		function aa(){
			var xmlhttprequest=new XMLHttpRequest();
			xmlhttprequest.open("GET","/AjaxTest/GetServlet02?name=zll&password=1234",true);
			xmlhttprequest.send(null);
			xmlhttprequest.onreadystatechange=function(){
				if(xmlhttprequest.readyState==4&&xmlhttprequest.status==200){
					document.getElementById("h1").innerHTML=xmlhttprequest.responseText;
				}
			}
		}
	</script>
	<h1 id="h1"></h1>
	<button onclick="aa()">获取服务端数据</button>

get的后端处理

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("name");
		String password=request.getParameter("password");
		System.out.println(name+"\t"+password);
		response.getWriter().print("welcome to ajax!"+name+"\t"+password);
	}
3.带参数传递(把数据写活)

通过input框写入数据

<body>
	<script>
		function getSend(){
			var name=document.getElementById("name").value;
			var password=document.getElementById("password").value;
			var age=document.getElementById("age").value;
			console.log(name+password+age);
			var xmlhttprequest=new XMLHttpRequest();
			//拼接字符串
			xmlhttprequest.open("GET",'/AjaxTest/GetServlet03?name='+name+'&password='+password+'&age='+age,true);
			xmlhttprequest.send(null);
			xmlhttprequest.onreadystatechange=function(){
				if(xmlhttprequest.readyState==4&&xmlhttprequest.status==200){
					console.log(xmlhttprequest.responseText);
				}
			}
		}
	</script>
	<center>
		用户账号<input id="name" type="text"><br>
		用户密码<input id="password" type="text"><br>
		用户年龄<input id="age" type="text"><br>
		<button onclick="getSend()">注册</button>
	</center>
	
</body>

get的后端处理

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("name");
		String password=request.getParameter("password");
		String age=request.getParameter("age");
		System.out.println(name+"\t"+password+"\t"+age);
		response.getWriter().print(name+"\t"+password+"\t"+age);
	}

使用post方式提交数据

1.不带参数
<body>
	<script>
		function post(){
			var xmlhttprequest=new XMLHttpRequest();
			xmlhttprequest.open("POST","/AjaxTest/PostServlet01",true);
			xmlhttprequest.send(null);
			xmlhttprequest.onreadystatechange=function(){
				if(xmlhttprequest.readyState==4&&xmlhttprequest.status==200){
					document.getElementById("h1").innerHTML=xmlhttprequest.responseText;
				}
			}
		}
	</script>
	<h1 id="h1"></h1>
	<button onclick="post()">使用post请求数据</button>
</body>

post的后端

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("请求进入post中");
		response.getWriter().print("post request");
	}
2.带参数(参数的值是固定的)

注意设置响应头，要不然为null

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

<body>
	<script>
		function getSend(){
			var xmlhttprequest=new XMLHttpRequest();
			xmlhttprequest.open("POST","/AjaxTest/PostServlet02",true);
			//设置响应头
			xmlhttprequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttprequest.send("name=zll&password=1111&age=18");
			xmlhttprequest.onreadystatechange=function(){
				if(xmlhttprequest.readyState==4&&xmlhttprequest.status==200){
					console.log(xmlhttprequest.responseText);
				}
			}
		}
	</script>
        //这个基本上不起作用，因为数据是写死的
	<center>
		用户账号<input id="name" type="text"><br>
		用户密码<input id="password" type="text"><br>
		用户年龄<input id="age" type="text"><br>
		<button onclick="getSend()">注册</button>
	</center>
</body>
3.带参数(参数的值是由用户输入的)

注意拼接，设置响应头，其余和2差不多

<script>
		function getSend(){
			var name=document.getElementById("name").value;
			var password=document.getElementById("password").value;
			var age=document.getElementById("age").value;
			
			var xmlhttprequest=new XMLHttpRequest();
			xmlhttprequest.open("POST","/AjaxTest/PostServlet03",true);
			//设置响应头
			xmlhttprequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttprequest.send("name="+name+"&password="+password+"&age="+age);
			xmlhttprequest.onreadystatechange=function(){
				if(xmlhttprequest.readyState==4&&xmlhttprequest.status==200){
					console.log(xmlhttprequest.responseText);
				}
			}
		}
	</script>
	<center>
		用户账号<input id="name" type="text"><br>
		用户密码<input id="password" type="text"><br>
		用户年龄<input id="age" type="text"><br>
		<button onclick="getSend()">注册</button>
	</center>

后端处理

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		String name=request.getParameter("name");
		String password=request.getParameter("password");
		String age=request.getParameter("age");
		System.out.println(name+"\t"+password+"\t"+age);
		response.getWriter().print(name+"\t"+password+"\t"+age);
	}

Ajax请求的返回是xml文件格式

这个很少用到

	<script>
		window.onload=function(){
			var xmlhttp=new XMLHttpRequest();
			document.getElementById("but").onclick=function(){
			xmlhttp.open("GET","/AjaxTest/XmlServlet",true);
			xmlhttp.send(null);
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4&&xmlhttp.status==200){
					var tex=xmlhttp.responseXML;
					ele=tex.getElementsByTagName("student")[0];//获取到根元素的集合
							var number=ele.getAttribute("number");
							var name=ele.getElementsByTagName("name")[0].textContent;
							var age=ele.getElementsByTagName("age")[0].textContent;
							var sex=ele.getElementsByTagName("sex")[0].textContent;
							var str=number+"     "+name+"    "+age+"    "+sex;
							document.getElementById("h1").innerHTML=str;
					}
				}
			}
		}
	</script>
	
	<body>
		<button id="but">点击获取xml文件中的内容</button>
		<h1 id="h1"></h1>

	</body>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("进入到get的方式");
		String xml="<students>"+
                "<student number='123453'>"+
			               "<name>zhangsan</name>"+
                         "<age>23</age>"+
			               "<sex>男</sex>"+
                         "</student>"+
			               "</students>";
		
		response.setContentType("text/xml;charset=utf-8");
	    response.getWriter().print(xml);
	}

Jquery Ajax

jquery是在js的基础上的进行封装，用起来更简单。使用jquery时必须导入它的js文件。

1.导入网络上的jquery

<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">

2.下载js文件，直接导入

通过jquery实现ajax,也可以发送http请求，get方式发送，post方式发送。

在发送数据时，可以发送文本，xml,json,它可以把这些数据载入到页面上。

Jquery Ajax的使用

jquery load()方法，简单但强大的方法

语法：

$(selector).load(URL,data,callback);

必需的 URL 参数，规定你希望加载的 URL。

可选的 data 参数，规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数，是 load() 方法，完成后所执行的函数名称。

<script type="text/javascript" src="js/jquery-3.5.1.min.js">
   </script>
   
</head>
<script>
   $(document).ready(function(){
   	$(".but01").click(function(){
   		$("#div").load("Jquery.txt")
   	})
   })
   
</script>
<body>
   <button class="but01">点击获取</button>
   <div id="div"></div>
</body>

load带参数传递到后端

可选的 callback 参数，规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

<script type="text/javascript" src="js/jquery-3.5.1.min.js">
    </script>
	
</head>
<script>
	$(document).ready(function(){
		$(".but01").click(function(){
			$("#div").load("/AjaxTest/JqueryAjax01?name=zll&password=1234",function(responseTxt,statusTxt,xhr){
				console.log(statusTxt)
				if(statusTxt=="success"){
					alert("请求成功，服务器返回");
				}
				if(statusTxt=="error"){
					alert("error"+xhr.status+"\t"+xhr.statusText);
			    }
			})
		})
	})
	
</script>
<body>
	<button class="but01">点击获取</button>
	<div id="div"></div>
</body>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("name");
		String password=request.getParameter("password");
		System.out.println(name+"\t"+password);
	}

ajax直接发送

<script type="text/javascript" src="js/jquery-3.5.1.min.js">
    </script>
	
</head>
<script>
	$(document).ready(function(){
		$("#but01").click(function(){
			htmlobj=$.ajax({   //服务器返回过来的数据
				type:"get",
				url:"/AjaxTest/JqueryAjax02?name=zll&password=6666",
				async:false 
			});
			$("#div").html(htmlobj.responseText);//后端具体的数据
		})
	})
	
</script>
<body>
	<button id="but01">提交数据</button>
	<div id="div"></div>
</body>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String name=request.getParameter("name");
		String password=request.getParameter("password");
		System.out.println(name+"\t"+password);
		response.getWriter().print(name+"\t"+password);
	}

async默认是 true，即为异步方式，$.ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
Zll0
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值