07-ajax

其他 2019-03-17 15:13:21 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/linzhaoliangyan/article/details/88618599

AJAX = Asynchronous JavaScript And XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下

* 开发步骤

 * 创建XMLHttpRequest（存在浏览器差异）

 var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }else{// ie5,ie6
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

* 发送请求

xmlHttp.open("GET/POST",url,true);// 第一个参数：请求方式（GET，POST）,
                                   // 第二参数url，第三个参数是否异步请求（一般都是true）
 xmlHttp.send();//send可以写参数（post请求使用）

* 处理响应结果

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                    alert(xmlHttp.responseText);
            }
        }

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

* AJAX 开发实战

    * Get请求

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function checkName(){
		// 1 获得XMLHttpRequest对象
			var xmlHttp;
			if(window.XMLHttpRequest){
				xmlHttp=new XMLHttpRequest();
			}else{//ie5,ie6
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
		// 2 发送请求
		var param =document.getElementById("iname").value;
		var url="${pageContext.request.contextPath}/check?username="+param;
		xmlHttp.open("GET",url,true);
		xmlHttp.send();
		// 3 处理响应结果
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				document.getElementById("sname").innerHTML = xmlHttp.responseText;
			}
		}
	}
</script>
</head>
<body>
	<input id="iname" type="text" name="username" onblur="checkName();"/>&nbsp;&nbsp;
		<span id="sname"></span>
</body>
</html>

* 备注：手动写ajax请求，假如出错使用chrome调试错误

protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 1 设置编码
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		// 2 获取参数
		String username = request.getParameter("username");
		if ("xiaohei".equals(username)) {
			response.getWriter().write("<font color='red'>您注册用户名，太受欢迎</font>");
		} else {
			response.getWriter().write("<font color='green'>可以放心注册</font>");
		}
	}

 * Post请求

var url="${pageContext.request.contextPath}/reg";
		var param ="username="+document.getElementById("iname").value;
		xmlHttp.open("POST",url,true);
        //设置请求头必须在调用open之后
		xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		xmlHttp.send(param);

* 使用ajax提交json数

function reg(){
		//alert("1");
		// 1 获得XMLHttpRequest对象
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{//ie5,ie6
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		// 2 发送请求
		var url="${pageContext.request.contextPath}/reg";
		xmlHttp.open("POST",url,true);
		xmlHttp.setRequestHeader("content-type","application/json");
		//var sendData={"username":"xiaohei","psw":"123"}
		var username=document.getElementById("iname").value;
		var psw=document.getElementById("ipsw").value;
		var sendData={"username":username,"psw":psw}
		xmlHttp.send(JSON.stringify(sendData));
		
		// 3 处理响应结果
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
					var content = JSON.parse(xmlHttp.responseText);
					if(content.result=="success"){
						window.location.href="http://localhost:8080/AjaxDemo/result.jsp";
					}else{
						window.location.href="http://localhost:8080/AjaxDemo/fail.jsp";
					}
			
			}
		}
	}

<body>
		用户名：<input id="iname" type="text" name="username" onblur="checkName();"/>&nbsp;&nbsp;
		<span id="sname"></span><br/>
		密码：<input id="ipsw" type="text" name="psw"/>&nbsp;&nbsp;<br/>
		<input type="button" value="注册" onclick="reg();"/>
</body>



protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 1 设置编码
		request.setCharacterEncoding("utf-8");
		response.setContentType("application/json;charset=utf-8");
        // 获取json数据       
		ServletInputStream is = request.getInputStream();
		byte[] buffer=new byte[1024];
		StringBuilder sb=new StringBuilder();
		while((is.read(buffer))!=-1) {
			sb.append(new String(buffer));
		}
		String json=sb.toString().trim();
		System.out.println(json);
		Gson gson=new Gson();
		User user=gson.fromJson(json, User.class);
		System.out.println(user);
		
		// 响应json结果
		RegResult result=new RegResult();
		result.setCode(101);
		result.setResult("success");
		String resultJson = gson.toJson(result);
		response.getWriter().write(resultJson);
	}

* ajax综合案例（了解）

<li onmouseover="getData(this);">
						<a href="">手机</a>
						<a href="">电话卡</a>
						<div class="pop">
							<div class="left fl">
								
							</div>
							<div class="right fl">
								
							</div>
							<div class="clear"></div>
						</div>
					</li>




<script type="text/javascript">
			var flag=false;
			function getData(item){
				if(!flag){
					// 获得a标签的内容
					var phone=item.getElementsByTagName("a")[0].innerHTML;
					var card=item.getElementsByTagName("a")[1].innerHTML;
					var xmlHttp;
					if(window.XMLHttpRequest){
						xmlHttp=new XMLHttpRequest();
					}else{//ie5,ie6
						xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
					}
					// 2 发送请求
					var url="${pageContext.request.contextPath}/getData";
					xmlHttp.open("POST",url,true);
					xmlHttp.setRequestHeader("content-type","application/json;charset=utf-8");
					var sendData={"phone":phone,"card":card}
					xmlHttp.send(JSON.stringify(sendData));
					
					// 3 处理响应结果
					xmlHttp.onreadystatechange=function(){
						if(xmlHttp.readyState==4 && xmlHttp.status==200){
								var content = JSON.parse(xmlHttp.responseText);
								// 获得json内容之后，根据json创建div
								//alert(content.goodResults['phone'][0].name);
								var phones=content.goodResults['phone'];
								var cards=content.goodResults['card'];
								// 获得popDiv
								var popDiv=item.getElementsByTagName("div")[0];
								var leftDiv=popDiv.getElementsByTagName("div")[0];
								var rightDiv=popDiv.getElementsByTagName("div")[1];
								// 左边
								createDiv(phones,leftDiv);
								// 右边
								createDiv(cards,rightDiv);
								
						}
					}
					
					flag=true;
				}
				
			}
			
			function createDiv(type,div){
				for(var i=0;i<type.length;i++){
					var pDiv=document.createElement("div");
					// 产生左边标签
					var ddiv1=document.createElement("div");
					ddiv1.className="xuangou_left fl";
					var la=document.createElement("a");
					la.href="";
					
					var adiv1=document.createElement("div");
					adiv1.className="img fl";
					
					var dimg=document.createElement("img");
					dimg.src=type[i].imageUrl;
					
					var dspan=document.createElement("span");
					dspan.className="fl";
					dspan.innerHTML=type[i].name;
					
					var adiv2=document.createElement("div");
					adiv2.className="clear";
					
					
					var ddiv2=document.createElement("div");
					ddiv2.className="xuangou_right fr";
					
					var div2la=document.createElement("a");
					div2la.href="./image/hm4-80.jpg";
					div2la.target="_blank";
					div2la.innerHTML="选购";
					
					var ddiv3=document.createElement("div");
					ddiv3.className="clear";
					
					//div class="xuangou_left fl"
					div.appendChild(pDiv);
					pDiv.appendChild(ddiv1);
					ddiv1.appendChild(la);
					la.appendChild(adiv1);
					adiv1.appendChild(dimg);
					la.appendChild(dspan);
					la.appendChild(adiv2);
					
					//div class="xuangou_right fr"
					pDiv.appendChild(ddiv2);
					ddiv2.appendChild(div2la);
					//div class="xuangou_right fr"
					pDiv.appendChild(ddiv3);
				}
			}
		</script>


protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 1 设置编码
		request.setCharacterEncoding("utf-8");
		response.setContentType("application/json;charset=utf-8");
		ServletInputStream is = request.getInputStream();
		byte[] buffer=new byte[1024];
		StringBuilder sb=new StringBuilder();
		while((is.read(buffer))!=-1) {
			sb.append(new String(buffer,"utf-8"));
		}
		String json=sb.toString().trim();
		System.out.println(json);
		Gson gson=new Gson();
		GoodsType goodType=gson.fromJson(json, GoodsType.class);
		System.out.println(goodType);
		// 通过goodType查询数据库，获得数据
		GoodsResult goodsResult=new GoodsResult();
		goodsResult.setCode(606);
		Map<String, List<Goods>> map=new HashMap<String, List<Goods>>();
		goodsResult.setGoodResults(map);
		List<Goods> phones=new ArrayList<Goods>();
		Goods goods1=new Goods();
		goods1.setName("小米5");
		goods1.setImageUrl("./image/xmNOTE2-80.jpg");
		
		Goods goods2=new Goods();
		goods2.setName("小米6");
		goods2.setImageUrl("./image/xmNOTE2-80.jpg");
		
		Goods goods3=new Goods();
		goods3.setName("小米8");
		goods3.setImageUrl("./image/xmNOTE2-80.jpg");
		phones.add(goods1);
		phones.add(goods2);
		phones.add(goods3);
		map.put("phone", phones);
		
		List<Goods> cards=new ArrayList<Goods>();
		Goods card1=new Goods();
		card1.setName("移动卡");
		card1.setImageUrl("./image/compare.jpg");
		
		Goods card2=new Goods();
		card2.setName("联通卡");
		card2.setImageUrl("./image/compare.jpg");
		
		Goods card3=new Goods();
		card3.setName("电信卡");
		card3.setImageUrl("./image/compare.jpg");
		
		cards.add(card1);
		cards.add(card2);
		cards.add(card3);
		
		map.put("card", cards);
		
//		// 响应json结果
		String resultJson = gson.toJson(goodsResult);
		System.out.println(resultJson);
		response.getWriter().write(resultJson);
	}


public class Goods {
	private String name;
	private String imageUrl;
	private String goodUrl;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getImageUrl() {
		return imageUrl;
	}
	public void setImageUrl(String imageUrl) {
		this.imageUrl = imageUrl;
	}
	public String getGoodUrl() {
		return goodUrl;
	}
	public void setGoodUrl(String goodUrl) {
		this.goodUrl = goodUrl;
	}
	@Override
	public String toString() {
		return "Goods [name=" + name + ", imageUrl=" + imageUrl + ", goodUrl=" + goodUrl + "]";
	}
	
	
}

public class GoodsResult {
	private int code;
	private Map<String,List<Goods>> goodResults;
	public int getCode() {
		return code;
	}
	public void setCode(int code) {
		this.code = code;
	}
	public Map<String, List<Goods>> getGoodResults() {
		return goodResults;
	}
	public void setGoodResults(Map<String, List<Goods>> goodResults) {
		this.goodResults = goodResults;
	}
	@Override
	public String toString() {
		return "GoodsResult [code=" + code + ", goodResults=" + goodResults + "]";
	}
	
}

public class GoodsType {
	private String phone;
	private String card;
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getCard() {
		return card;
	}
	public void setCard(String card) {
		this.card = card;
	}
	@Override
	public String toString() {
		return "GoodsType [phone=" + phone + ", card=" + card + "]";
	}
	
}

* JQuery中Ajax

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能
* get请求

$.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	function checkName(){
		//var param =document.getElementById("iname").value;
		var param=$("#iname").val();// 取表单元素的值
		var url="${pageContext.request.contextPath}/check?username="+param;
		$.get(url,function(data,status){
			if(status=="success"){
				//document.getElementById("sname").innerHTML = data;
				$("#sname").html(data);
			}
		});
	}
	$(function(){
		$("#iname").blur(checkName);
	})
	
	
</script>
</head>
<body>
		<input id="iname" type="text" name="username"/>&nbsp;&nbsp;
		<span id="sname"></span>
</body>
</html>

* post请求

jQuery $.post() 方法
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
 

$(function(){
		$("#iname").blur(function(){
			var param=$("#iname").val();
			var url="${pageContext.request.contextPath}/check";
			$.post(url,{"username":param},function(data,status){
				if(status=="success"){
					$("#sname").html(data);
				}
			})
		});
	})

用户名：<input id="iname" type="text" name="username"/>&nbsp;&nbsp;
		<span id="sname"></span><br/>

* ajax方法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
$.ajax({name:value, name:value, ... })

	// 传递json数据
		$("#btn").click(function(){
			var username=$("#iname").val();
			var psw=$("#ipsw").val();
			var sendData={"username":username,"psw":psw}
			$.ajax({
				type:"POST",
				url:"${pageContext.request.contextPath}/reg",
				contentType:"application/json;charset=utf-8",
				dataType:"json",
				data:JSON.stringify(sendData),
				processData:false,//默认是true，是否转换为查询字符串
				success:function(result,status){
					alert(status);
					if(status=="success"){
						window.location.href="http://localhost:8080/AjaxDemo/result.jsp";
					}else{
						window.location.href="http://localhost:8080/AjaxDemo/fail.jsp";
					}
				},
				error:function(result){
					alert("请求数据失败")
				}
			});
		});

<body>
		用户名：<input id="iname" type="text" name="username"/>&nbsp;&nbsp;
		<span id="sname"></span><br/>
		密码：<input id="ipsw" type="text" name="psw"/>&nbsp;&nbsp;<br/>
		<input id="btn" type="button" value="注册""/>
</body>

 * ajax 高级实例的Jquery请求的形式（了解）

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var flag=false;
				$("#liId").mouseenter(function(){
					if(!flag){
						//var phone=$($("#liId").eq(0)).text().trim();//这个过滤有问题
						//var card=$("#liId").eq(1).text().trim();
						//$("#liId").children().get(0) 获得是dom对象
						//$($("#liId").children().get(0)) 获得是jquery对象
						//var phone=$($("#liId").children().get(0)).text().trim();
						//var card=$($("#liId").children().get(1)).text().trim();
						var item=document.getElementById("liId");
						var phone=item.getElementsByTagName("a")[0].innerHTML;
						var card=item.getElementsByTagName("a")[1].innerHTML;
						var sendData={"phone":phone,"card":card}
						$.ajax({
							type:"POST",
							url:"${pageContext.request.contextPath}/getData",
							contentType:"application/json;charset=utf-8",
							dataType:"json",
							data:JSON.stringify(sendData),
							processData:false,//默认是true，是否转换为查询字符串
							success:function(result,status){
								//alert(status);
								//alert(result);
							    var content = JSON.parse(JSON.stringify(result));
							    var phones=content.goodResults['phone'];
								var cards=content.goodResults['card'];
								
								var popDiv=item.getElementsByTagName("div")[0];
								//var $popDiv=$($($("#liId").children().get(3)).get(0));
								//alert($popDiv)
								var leftDiv=popDiv.getElementsByTagName("div")[0];
								var rightDiv=popDiv.getElementsByTagName("div")[1];
								// 左边
								createDiv(phones,leftDiv);
								// 右边
								createDiv(cards,rightDiv);
								//alert(content);
								//alert(content.goodResults['phone'][0].name);
							},
							error:function(result){
								alert("请求数据失败")
							}
						});
						flag=true;
					}
				});	
			});
			
			function createDiv(type,div){
				for(var i=0;i<type.length;i++){
					var pDiv=document.createElement("div");
					// 产生左边标签
					var ddiv1=document.createElement("div");
					ddiv1.className="xuangou_left fl";
					var la=document.createElement("a");
					la.href="";
					
					var adiv1=document.createElement("div");
					adiv1.className="img fl";
					
					var dimg=document.createElement("img");
					dimg.src=type[i].imageUrl;
					
					var dspan=document.createElement("span");
					dspan.className="fl";
					dspan.innerHTML=type[i].name;
					
					var adiv2=document.createElement("div");
					adiv2.className="clear";
					
					
					var ddiv2=document.createElement("div");
					ddiv2.className="xuangou_right fr";
					
					var div2la=document.createElement("a");
					div2la.href="./image/hm4-80.jpg";
					div2la.target="_blank";
					div2la.innerHTML="选购";
					
					var ddiv3=document.createElement("div");
					ddiv3.className="clear";
					
					//div class="xuangou_left fl"
					div.appendChild(pDiv);
					pDiv.appendChild(ddiv1);
					ddiv1.appendChild(la);
					la.appendChild(adiv1);
					adiv1.appendChild(dimg);
					la.appendChild(dspan);
					la.appendChild(adiv2);
					
					//div class="xuangou_right fr"
					pDiv.appendChild(ddiv2);
					ddiv2.appendChild(div2la);
					//div class="xuangou_right fr"
					pDiv.appendChild(ddiv3);
				}
			}
		</script>

* load

语法：
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

<%@ 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>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		function clikeMe() {
			$("#div1").load("${pageContext.request.contextPath }/helloajax");
		}
	</script>
</head>
<body>
	<div id="div1">hello jquery ajax</div>
	<button id="btn" onclick="clikeMe()">测试</button>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/linzhaoliangyan/article/details/88618599
07
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022