Ajax

最新推荐文章于 2024-07-09 16:46:46 发布

加加大了

最新推荐文章于 2024-07-09 16:46:46 发布

阅读量112

点赞数

分类专栏： java框架文章标签： java ajax

本文链接：https://blog.csdn.net/qq_33700236/article/details/103558467

版权

java框架专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Ajax总结

概念：交互式网页应用的网页开发技术，ajax是前端的技术，由浏览器进行解析执行。
需求：需要将本次的响应结果和前面的响应结果内容在同一页面中展示。
解决：
1.在后台服务器端将多次响应内容重新拼成一个jsp页面，该方法会造成很多响应内容重复被响应。
2.使用ajax技术。
原理：
请求由ajax引擎对象发送，响应数据，浏览器不会直接处理，而是流转给发请求的ajax引擎对象通过操作ajax引擎对象变相实现在页面中显示新的响应资源。这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。
本质：
js的DOM操作中的数据由程序员自己写死声明，变成从服务器动态的获取。
基本流程：
1.创建ajax引擎对象
2.复写onreeadystatement函数–>判断ajax状态码—>判断响应状态码—>获取响应内容—>处理
3.发送请求
ajax的异步和同步：
ajax.open(method,url,async)
asyns:设置同步代码执行还是异步执行。
ajax的状态码：
0：xmlhttpRequest已建立，还未初始化，尚未调用open方法。
1：open方法已经调用，未调用send方法。
2：send方法已调用，其他数据未知。
3：请求已经成功发送，正接受数据。
4：响应内容更成功接受。
响应状态码：
200：请求成功
404：资源未找到
500：内部服务器错误
使用步骤：
1.创建ajax引擎对象：

 var ajax; 
 	if(window.XMLHttpRequest){
		ajax=new XMLHttpRequest//火狐 谷歌 }
	else if(window.ActiveXObject){ 
		ajax=new ActiveXObject("Msxml2.XMLHTTP");//ie 
		}

2.复写onreadystatement函数：

ajax.onreadystatechange=functio(){
	if(ajax.readystate=4){//判断ajax状态码
		if(ajax.status=200){//判断响应状态码
			var result=ajax.responseText;//响应内容获取
			var showdiv=document.getElementById("showdiv");//获取元素对象
			showdiv.innerHTML=result;
			}else if(ajax.status=404){
				var showdiv=document.getElementById("showdiv");
				showdiv.innerHTML="资源不存在";
				}else if(ajax.status=500){
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="服务器错误";
					}
				}else{
					var showdiv=document.getElementById("showdiv");
					showdiv.innerHTML="< img src='img/...',width='100px' ,heigh='100px'
					}
				}

3.发送请求
ajax.open(method,url,async);
ajax.send(“请求数据”)
注意：
method：表示请求的方式，值为get/post
url:表示请求地址，一般为要请求的servlet的别名。
async:表示异步还是同步请求，true表示异步，false表示同步，默认为异步。
如果请求方式是get方式，则请求数据需要拼接在url的后面，以？隔开，键值对。并且send中要写null。
如果是post请求方式，则在send方法中书写请求数据即可。并且要声明数据的提交格式为键值对。
示例：
//使用get方式 ajax.open(“get”,“user?uname=”+uname,true); ajax.send(null);
//post方式 ajax.open(“post”,“user”, true);
//设置请求数据的格式 ajax.setRequestHeader(“Content-Type”,"application/x-www-form-urlencoded "); ajax.send(“un=”+uname);

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 
	Ajax请求学习

 -->
<!-- 声明js代码域 -->
<script type="text/javascript">
	function ajaxReq(){
		//获取用户请求数据
		var uname=document.getElementById("uname").value;
		var data="name="+uname;
		//创建ajax引擎对象
		var ajax;
		if(window.XMLHttpRequest){
			ajax=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
		//复写onreadystatechange函数
		ajax.onreadystatechange=function(){
			//判断ajax状态码
			if(ajax.readyState==4){
				//判断响应状态码
				if(ajax.status==200){
					//获取响应内容
					var result=ajax.responseText;
					//处理响应内容
					alert(result);
				}	
			}	
		}
		//发送请求
			//get方式:请求实体拼接在URL后面
				/* ajax.open("get","ajax?"+data);
				ajax.send(null); */
			//post方式：请求实体需要单独的发送
				ajax.open("post", "ajax");
				ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				ajax.send("name=张三&pwd=123");
	}
</script>
<style type="text/css">
	#showdiv{
		border:solid 1px;
		width:200px;
		height:100px; 
	}
</style>
</head>
<body>
	<form action="" enctype="application/x-www-form-urlencoded"></form>
	<h3>欢迎登录403峡谷</h3>
	<hr>
	<input type="text" name="uname" id="uname"  value=""/>
	<input type="button" value="测试 " onclick="ajaxReq()"/>
	<div id="showdiv"></div>
</body>
</html>

ajax的响应数据格式：
普通文本：后台在接收到ajax请求后，处理后直接响应普通字符串给ajax。
josn数据：后台在接收到ajax请求后，处理后响应json格式的字符串给 ajax ajax处理代码中使用eval()方法将json数据转换为js对的对象，将对象中的数据通过js的dom操作显示到页面中。
注意：json格式：var 对象名={ 键名:值, 键名:值, … }
xml数据：后台在接收到ajax请求后，处理后响应xml格式的字符串给 ajax。前台使用ajax.responseXML进行数据接收，返回的是xml文档对象(document)。使用document对象将xml中取出并显示到页面中即可。
注意：
后台的响应数据格式必须设置成xml格式：
resp.setContentType(“text/xml;charset=utf-8”);

加加大了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax

Ajax总结概念：交互式网页应用的网页开发技术，ajax是前端的技术，由浏览器进行解析执行。需求：需要将本次的响应结果和前面的响应结果内容在同一页面中展示。解决：1.在后台服务器端将多次响应内容重新拼成一个jsp页面，该方法会造成很多响应内容重复被响应。2.使用ajax技术。原理：请求由ajax引擎对象发送，响应数据，浏览器不会直接处理，而是流转给发请求的ajax引擎对象通过操作a...
复制链接

扫一扫