zoukankan      html  css  js  c++  java
  • Ajax

    Ajax

    2020/9/3 17:40:34


    Ajax简介

    一种用于网页异步请求的技术 ,  用于与服务器进行异步交互 , 以及 局部网页的刷新.
    

    ajax的GET请求使用步骤

    1.	创建一个用于异步请求的对象
    	var xhr = new XMLHttpRequest();
    
    2.	设置请求的方式 以及请求地址
    	xhr.open("GET","地址?参数列表");
    
    3.	设置请求结果产生时 的 处理函数 
    	(此函数在一次	请求中会执行多次 , 当请求状态每改变一次, 则触发一次)
    	xhr.onreadystatechange = function(){
    		4.	获取请求状态码, 根据状态码判断请求到了哪一步.
    			if(xhr.readyState == 4){
    				5.	判断响应的状态码 (404资源找不到 , 500服务器内部错误 , 200成功 等等)
    				if(xhr.status == 200){
    					6.	获取到响应体(xhr.responseText)
    				}else{
    					//错误的提示
    				}
    			}
    	}
    
    7.	将请求发送
    	xhr.send();
    
    
    Ajax的POST请求使用步骤 ***
    
    	1.	创建一个用于异步请求的对象
    		var xhr = new XMLHttpRequest();
    	2.	设置请求的方式 以及请求地址
    		xhr.open("POST","地址");
    	3.	设置请求结果产生时 的 处理函数 
    		(此函数在一次	请求中会执行多次 , 当请求状态每改变一次, 则触发一次)
    		xhr.onreadystatechange = function(){
    			4.	获取请求状态码, 根据状态码判断请求到了哪一步.
    				if(xhr.readyState == 4){
    					5.	判断响应的状态码 (404资源找不到 , 500服务器内部错误 , 200成功 等等)
    					if(xhr.status == 200){
    						6.	获取到响应体(xhr.responseText)
    					}else{
    						//错误的提示
    					}
    				}
    		}
    
    	7.	设置请求头部
    		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
    
    	8.	将请求发送 (参数列表格式: 与GET请求?后的格式一致)
    		xhr.send(参数列表);
    

    注意:
    	xhr.readyState	:
    		表示请求状态 , 值:
    			0	:	请求初始化中
    			1	:	请求正在发送
    			2	:	请求发送完毕
    			3	:	服务器开始响应
    			4	:	响应完毕 ,连接已断开, 回复的内容已经得到了
    

    Ajax跨域实现

    在servlet的代码中, 在响应之前加入如下两行代码, 即可实现:
    
    	response.addHeader("Access-Control-Allow-Origin","*");
    	response.addHeader("Access-Control-Allow-Methods","GET,POST");	
    

    通过GSON.jar 更快速的生成JSON格式字符串 .

    步骤:
    	1.	引入jar文件
    	2.	在需要将对象转为JSON字符串的位置, 加入如下格式代码即可:
    		String json = new Gson().toJSON(对象);
    
    对象:
    	String json2 = new Gson().toJson(u);
    
    集合:
    	ArrayList<User30> data = new ArrayList<>();
    	for(int i=0;i<100;i++) {
    		User30 u = new User30(1001+i, "dsg"+i, "123"+i);
    		data.add(u);
    	}
    	
    	String json = new Gson().toJson(data);
    	System.out.println(json);
    

    通过GSON.jar 将JSON格式字符串, 转换为对象, 并取出其中属性.

    前提条件:
    	1.	JSON格式的字符串, 格式必须正确.
    	2.	JSON字符串中的属性 必须要与 准备转换类型属性 一致.
    
    	例如:	
    		要将如下字符串转换为对象 , 必须存在属性匹配的类, 例如:
    			字符串:
    				{
    					"name":"xxx",
    					"age":18
    				}
    			类:
    				class 类名{
    					private String name;
    					private int age;
    					get/set...
    				}
    
    格式:
    	1.	引入Jar包
    	2.	在需要转换的位置, 加入如下代码:
    			对象名 = new Gson().fromJson(JSON字符串,对象类型.class);
    
    案例:
    	String json = "{"id":10001,"username":"zhangsan","password":"123456"}";
    	User30 u = new Gson().fromJson(json, User30.class);
    	System.out.println(u.getUsername());
    

    通过GSON.jar 将JSON数据, 转换为集合

    Map:
    	Map<String,Object> map = new Gson().fromJson(JSON字符串,Map.class);
    
    List 
    	List<Object> list = new Gson().fromJson(JSON字符串,List.class);	
    

    ajax-Jquery

    Jquery对ajax操作进行了封装 , 简化了ajax开发的流程 .实现了多浏览器的兼容.
    
    ajax函数
    
    	函数名称:	$.ajax
    	参数列表:	长度为1 , 需要传递一个对象.
    
    	通常传递到参数1的对象,  我们使用JSON格式传输, 属性与值描述如下:
    		{
    			url:"请求的地址",
    			type:"请求方式GET/POST...",
    			async:"默认true,表示异步请求",
    			data:"请求的参数,格式与网址?后的格式一致",
    			dataType:"TEXT/JSON",//表示服务器返回的数据类型.如果编写JSON , 我们接收到的数据 就是一个对象
    			success:function(data){
    				//当服务器请求成功时, 这里执行
    				//参数data就是响应的内容.
    				//	当dataType的值为TEXT时,  data是一个string类型的数据
    				//	当dataType的值为JSON时,  data是一个对象.
    			},
    			error:function(){
    				//当服务器返回的状态码不再200-299的范围 , 则表示失败, 这里执行
    			}
    		}
    
    get函数与post函数
    
    两个函数的格式, 完全一致, 一个用于GET请求, 一个用于POST请求.
    
    	函数名称:	$.get     $.post
    	参数列表:
    			列表长度为4:
    			参数1.	url	:	请求地址
    			参数2.	data:	请求时携带的参数 , 与网址?后的参数格式一致.
    			参数3.	success:	当请求成功时 , 处理的函数
    			参数4.	响应的数据类型:	TEXT/JSON
    
    	格式示例:
    		$.get("s1.do","",function(data){
    
    		},"JSON");
    
    getJSON函数
    
    	函数名称:	$.getJSON
    	参数列表:
    			参数列表长度为3
    			参数1.	url	:	请求地址
    			参数2.	data:	请求时携带的参数, 与网页?后的参数格式一致
    			参数3.	success:	当请求成功时, 处理的函数.
    
    	案例:
    		<h3>快递查询2</h3>
    		<input placeholder="请输入快递单号"><button onclick="x1()">查询</button>
    		<script type="text/javascript">
    			function x1(){
    				$("#ul1").html("");
    				//1.	得到用户输入的快递单号
    				var number = $("input").val();
    				//2.	发送ajax请求
    				layer.msg("拼命查询中...",{icon:16,shade:0.01});
    				$.getJSON("s2.do","number="+number,function(data){
    					if(data.status == 0){
    						//查询成功
    						var arr = data.result.list;
    						for(var i=0;i<arr.length;i++){
    							var $li = $("<li>时间:"+arr[i].time+"<br>进度:"+arr[i].status+"</li>");
    							$("#ul1").append($li);
    						}
    					}else{
    						//查询失败
    						layer.msg("很遗憾, 查询失败了");
    					}
    				});
    			}
    		</script>
    		<ul id="ul1">
    		
    		</ul>
    
    
    load函数 熟悉
    
    	与其他的ajax函数不同, 它是使用jquery对象调用的. 
    	作用是 , 将一个网址的响应体, 加载到调用方法的元素内部.
    
    
    	函数名称: $obj.load
    	参数列表:
    			参数列表长度为3
    			参数1.	url	:	请求地址
    			参数2.	[data]:	传递的参数
    			参数3.	[success]:	请求成功时的处理函数.
    

    	案例:
    	<style type="text/css">
    		#content{
    			1170px;
    			margin: 0 auto;
    			text-align: center;
    		}
    		.item{
    			200px;
    			text-align: center;
    			height:300px;
    			line-height: 300px;
    			border:2px solid #999;
    			box-shadow:0px 0px 3px 2px #aaa;
    			display: inline-block;
    			margin: 10px;
    		}
    	</style>
    	<script type="text/javascript" src="js/jquery.js"></script>
    	<script type="text/javascript" src="layer/layer.js"></script>
    	</head>
    	<body>
    	<h3>JD商品</h3>
    		<script type="text/javascript">
    			//表示当前页数
    			var count = 1;
    			function x1(i){
    				if(count==1 && i==-1){
    					layer.msg("已经是第一页了");
    					return;
    				}
    				count+=i;
    				//发起ajax, 请求页面.得到新的商品内容
    				$("#content").load("page.jsp","count="+count);
    				$("#count").html(count);
    			}
    		</script>
    		
    		
    		<div>
    			<button onclick="x1(-1)">上一页</button>
    			<span id="count">1</span>
    			<button onclick="x1(1)">下一页</button>
    		</div>
    		<div id="content">
    			<div class="item">
    				商品1 ,图片请自行脑补
    			</div>
    			<div class="item">
    				商品2 ,图片请自行脑补
    			</div>
    			<div class="item">
    				商品3 ,图片请自行脑补
    			</div>
    			<div class="item">
    				商品4 ,图片请自行脑补
    			</div>
    			<div class="item">
    				商品5 ,图片请自行脑补
    			</div>
    			<div class="item">
    				商品6 ,图片请自行脑补
    			</div>
    			<div class="item">
    				商品7 ,图片请自行脑补
    			</div>
    			<div class="item">
    				商品8 ,图片请自行脑补
    			</div>
    			<div class="item">
    				商品9,图片请自行脑补
    			</div>
    			<div class="item">
    				商品10 ,图片请自行脑补
    			</div>
    		
    		</div>
    	</body>
    

    ajax-Vue

    除了需要引入vue.js文件以外, 还需要引入: vue-resource.js
    
    基于全局的  Ajax
    
    	GET请求格式:
    		Vue.http.get("请求地址",[传递的参数]).then(success,error);
    
    	POST请求格式:
    		Vue.http.post("请求地址",[传递的参数],{"emulateJSON":true}).then(success,error);
    
    
    在Vue实例中使用的ajax
    
    	GET请求格式:
    		this.$http.get("请求地址",[传递的参数]).then(success,error);
    
    	POST请求格式:
    		this.$http.post("请求地址",[传递的参数],{"emulateJSON":true}).then(success,error);
    
    GET请求参数传递的格式
    
    	{params:{键1:值1,键2:值2...键n:值n}}
    
    POST请求参数传递的格式
    
    	{键1:值1,键2:值2...键n:值n}
    
    success函数 与 error函数 :
    这两个函数都存在一个参数: response , 指的是响应对象.
    
    响应对象的属性:
    	1.	url	:	请求的网址
    	2.	body:	服务器返回的响应体, 如果是JSON格式, 则body为对象, 如果不是JSON格式 ,则body为string
    	3.	ok	:	boolean值, 如果响应码为200-299之间 值为true , 表示成功.
    	4.	status:	服务器响应的状态码 ,例如: 200 , 404 ,500 ...
    	5.	statusText: 响应状态码对应的文字, 例如status==200时, 则statusText=ok.
    	
    响应对象的函数:
    	1.	text()	:	以字符串形式, 返回响应体.
    	2.	json()	:	以对象形式, 返回响应体.
    	3.	blob()	:	以二进制Blob对象形式, 返回相应内容
    

    Vue ajax 案例1 . 全局GET

    <h3>天气查询</h3>
    <input id="input1" placeholder="请输入查询的城市"><button onclick="x1()">查询</button>
    <div id="div1"></div>
    <script type="text/javascript">
    	function x1(){
    		var div1 = document.getElementById("div1");
    		div1.innerHTML = "";
    		var city = document.getElementById("input1").value;
    		//s3.do?city=输入框内容
    		Vue.http.get("s3.do",{params:{"city":city}}).then(function(res){
    			var date = res.body.result.date;
    			var week = res.body.result.week;
    			var weather = res.body.result.weather;
    			var temp = res.body.result.temp;
    			var templow = res.body.result.templow;
    			var temphigh = res.body.result.temphigh;
    			div1.innerHTML = 
    			"日期:"+date+"&nbsp;&nbsp;&nbsp;"+week+"<br><br>"
    			+"天气情况:"+weather
    			+"<br>当前温度:"+temp+"<br>"
    			+"今天温度区间: "+templow+" ~ "+temphigh;
    			;
    			
    		},function(res){
    			div1.innerHTML = "很遗憾, 查询失败";
    		});
    	}
    </script>
    

    Vue ajax 案例2 . 全局POST

    <h3>天气查询</h3>
    <input id="input1" placeholder="请输入查询的城市"><button onclick="x1()">查询</button>
    <div id="div1"></div>
    <script type="text/javascript">
    	function x1(){
    		var div1 = document.getElementById("div1");
    		div1.innerHTML = "";
    		var city = document.getElementById("input1").value;
    		//s3.do?city=输入框内容
    		Vue.http.post("s3.do",{"city":city},{"emulateJSON":true}).then(function(res){
    			var date = res.body.result.date;
    			var week = res.body.result.week;
    			var weather = res.body.result.weather;
    			var temp = res.body.result.temp;
    			var templow = res.body.result.templow;
    			var temphigh = res.body.result.temphigh;
    			div1.innerHTML = 
    			"日期:"+date+"&nbsp;&nbsp;&nbsp;"+week+"<br><br>"
    			+"天气情况:"+weather
    			+"<br>当前温度:"+temp+"<br>"
    			+"今天温度区间: "+templow+" ~ "+temphigh;
    			;
    			
    		},function(res){
    			div1.innerHTML = "很遗憾, 查询失败";
    		});
    	}
    </script>
    

    Vue ajax 案例3 . Vue实例中GET

    <h3>天气查询</h3>
    <div id="main">
    	<input id="input1" placeholder="请输入查询的城市" v-model="city"><button @click="x1">查询</button>
    	<div><br><br>
    		日期:{{time}}&nbsp;&nbsp;&nbsp;&nbsp;{{week}}<br><br>
    		天气:{{weather}}<br>
    		当前温度:{{temp}}<br>
    		当天温度区间:{{templow}} ~ {{temphigh}}<br>
    	</div>
    
    </div>
    <script type="text/javascript">
    	var vue = new Vue({
    		el:"#main",
    		data:{
    			city:"",
    			time:"",
    			week:"",
    			weather:"",
    			temp:"",
    			templow:"",
    			temphigh:"",
    		},
    		methods:{
    			x1:function(){
    				this.$http.get("s3.do",{params:{"city":this.city}}).then(function(res){
    					this.time = res.body.result.date;
    					this.week = res.body.result.week;
    					this.weather = res.body.result.weather;
    					this.temp = res.body.result.temp;
    					this.templow = res.body.result.templow;
    					this.temphigh = res.body.result.temphigh;
    				},function(res){
    					
    				});
    			}
    		}
    	});
    </script>
    

    Vue ajax 案例4 . Vue实例中POST

    <h3>天气查询</h3>
    <div id="main">
    	<input id="input1" placeholder="请输入查询的城市" v-model="city"><button @click="x1">查询</button>
    	<div><br><br>
    		日期:{{time}}&nbsp;&nbsp;&nbsp;&nbsp;{{week}}<br><br>
    		天气:{{weather}}<br>
    		当前温度:{{temp}}<br>
    		当天温度区间:{{templow}} ~ {{temphigh}}<br>
    	</div>
    
    </div>
    <script type="text/javascript">
    	var vue = new Vue({
    		el:"#main",
    		data:{
    			city:"",
    			time:"",
    			week:"",
    			weather:"",
    			temp:"",
    			templow:"",
    			temphigh:"",
    		},
    		methods:{
    			x1:function(){
    				this.$http.post("s3.do",{"city":this.city},{"emulateJSON":true}).then(function(res){
    					this.time = res.body.result.date;
    A					this.week = res.body.result.week;
    					this.weather = res.body.result.weather;
    					this.temp = res.body.result.temp;
    					this.templow = res.body.result.templow;
    					this.temphigh = res.body.result.temphigh;
    				},function(res){
    					
    				});
    			}
    		}
    	});
    </script>
  • 相关阅读:
    Oracle 11g SQL Fundamentals Training Introduction02
    Chapter 05Reporting Aggregated data Using the Group Functions 01
    Chapter 01Restriicting Data Using The SQL SELECT Statemnt01
    Oracle 11g SQL Fundamentals Training Introduction01
    Chapter 04Using Conversion Functions and Conditional ExpressionsConditional Expressions
    Unix时代的开创者Ken Thompson (zz.is2120.bg57iv3)
    我心目中计算机软件科学最小必读书目 (zz.is2120)
    北京将评估分时分区单双号限行 推进错时上下班 (zz)
    佳能G系列领军相机G1X
    选购单反相机的新建议——心民谈宾得K5(转)
  • 原文地址:https://www.cnblogs.com/lzy1212/p/13608941.html
Copyright © 2011-2022 走看看