自己封装Ajax-lib小工具

最新推荐文章于 2024-07-12 15:51:39 发布

AKA 404 Not Found

最新推荐文章于 2024-07-12 15:51:39 发布

阅读量145

点赞数

分类专栏： Ajax 文章标签： java ajax js javascript json

本文链接：https://blog.csdn.net/qq_45693287/article/details/105335797

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ajaxutils.js

//创建XMLHttpRequest对象
function createXMLHttpRequest() {
			try {
				return new XMLHttpRequest();//大多数浏览器都支持
			} catch (e) {
				try {
					return new ActiveXObject("Msxml2.XMLHTTP");//IE6.0支持
				} catch (e) {
					try {
						return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5以及更早的版本支持
					} catch (e) {
						alert("大哥，你到底用的什么浏览器！");
						throw e;
					}
				}
			}
		}
/*
 * var option ={
 * 	method   请求方式，不传值，默认为GET
 * 	url      请求的url，必须给
 * 	asyn     是否是异步请求，默认为true
 * 	params   请求体，不传默认为GET请求的null
 * 	callback  回调方法，返回服务器响应的数据data
 * 	type      服务器响应的数据转换为什么类型:text,xml,json
 * 
 * };
 * */
function ajax(option) {
	//创建XMLHtppRequest对象
	var xmlHttp = createXMLHttpRequest();
	if(!option.method) {//如果不传POST，默认为GET
		option.method="GET";
	}
	if(option.asyn==undefined) {//如果不传false,默认为true，即异步请求
		option.asyn=true;
	}
	//打开与服务器的连接
	xmlHttp.open(option.method, option.url, option.asyn);
	if(option.method=="POST") {//如果为POST请求，要添加响应头
		xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	}
	//发送请求
	xmlHttp.send(option.params);
	//注册状态改变监听
	xmlHttp.onreadystatechange = function() {
		if(xmlHttp.readyState==4 && xmlHttp.status==200) {//双重判断
			var data;
			if(!option.type) {//如果不指定获取的格式，就默认为Text
				data = xmlHttp.responseText;
			} else if(option.type == "text") {
				data = xmlHttp.responseText;
			}else if(option.type == "xml") {
				data = xmlHttp.responseXML;
			} else if(option.type == "json") {
				var text = xmlHttp.responseText;
				//如果需要json类型的数据，需要解析这个json串为JavaScript对象
				data = eval("(" + text + ")");
				console.log(data.name);
			}
			//调用回调函数，进行数据返回
			option.callback(data);
		}	
	}
}

AServlet.java

public class AServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String person = "{\"name\":\"zhangShan\",\"age\":18,\"sex\":\"male\"}";
		System.out.println(person);
		response.getWriter().print(person);
		
	}

}

json.jsp中的核心代码

<script type="text/javascript" src="<c:url value='/ajax-lib/ajaxutils.js'/>"></script>
	<script type="text/javascript">
	window.onload = function() {
		var btn = document.getElementById("btn");
		btn.onclick = function() {
			ajax(
				{
					url:"<c:url value='/AServlet'/>",
					type:"json",
					callback:function(data) {
						
						document.getElementById("h3").innerHTML=data.name+ "," + data.age + "," + data.sex;
						//console.log(data.name);
					}
				}	
			);
		};
	}	
	</script>
  </head>
  <body>
    <h1>测试自己封装的ajax-lib小工具</h1>
    <button id="btn">点击这里</button>
    <h3 id="h3"></h3>
  </body>

测试结果
在这里插入图片描述

AKA 404 Not Found

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己封装Ajax-lib小工具

ajaxutils.js//创建XMLHttpRequest对象function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器都支持 } catch (e) { try { return new ActiveXObject("Msxml2.XMLHTTP");//IE...
复制链接

扫一扫