• 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>
  • 相关阅读:
    Atitit  基于meta的orm,提升加速数据库相关应用的开发
    Atitit机器学习原理与概论book attilax总结
    Atitti 文本分类  以及 垃圾邮件 判断原理 以及贝叶斯算法的应用解决方案
    Atitit 贝叶斯算法的原理以及垃圾邮件分类的原理
    Atiti  qq空间破解(3)------------gui图形化通用cli执行器atiuse
    Atitit dsl对于数组的处理以及main函数的参数赋值
    Atitit main函数的ast分析  数组参数调用的ast astview解析
    Atiti 重定向标准输出到字符串转接口adapter stream流体系 以及 重定向到字符串
    Atititcmd cli环境变量的调用设置与使用
    如何有效使用Project(2)——进度计划的执行与监控
  • 原文地址:https://www.cnblogs.com/lzy1212/p/13608941.html
Copyright © 2020-2023  润新知