Ajax、Jquery-Ajax

一、了解ajax

1.理解

Ajax,是 Asynchronous JavaScript + XML 的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新),会带来更好的用户体验。一时间,席卷全球

Ajax:异步无刷新技术

2.核心XMLHttpRequest对象
1)获取xhr对象var xhr = new XMLHttpRequest();

onreadystatechange 监听readystate值变化的事件
readystate 数据响应的响应
​ 0=未初始化
​ 1=已经调用open方法,但未调用send方法
​ 2=调用send方法,但未开始响应
​ 3=响应部分响应
​ 4=完全响应数据,且可以使用
status 响应状态码
​ 200=响应成功
​ 500=服务器异常(报错)
​ 404=未找到资源
statusText 状态码的说明
responseText 响应的数据

2)Ajax实现流程
**1、创建**XMLHttpRequest对象**
**2、打开请求/准备请求**
		**xhr.open(参数1,参数2,参数3)**
			**参数1:请求的方式  (GET|POST)**
			**参数2:请求的路径  (请求地址,如果是GET请求,参数直接拼接在地址栏后面)**
			**参数3:是否异步	    (true|false。默认是true,表示异步)**
**3、发送请求**
		**xhr.send(参数)**
			**参数:要传递的数据(参数)**
			**如果是GET请求:send(null);**
			**如果数POST请求:有参数,则设置参数,无参数则设置为null**
**4、接收响应**
			**如果响应成功,接收数据**
				**status==200**
					xhr.responseText**
<script type="text/javascript">
		
		// 1、创建XMLHttpRequest对象
		var xhr = new  XMLHttpRequest();
		console.log(xhr);
		
		// 2、打开请求/准备请求     xhr.open("请求类型GET|POST","请求路径","是否异步true|false")
		xhr.open("GET","js/data.json",false); // 同步请求
		
		
		// 3、发送请求     xhr.send(参数)
		xhr.send(null);
		
		// 4、接收响应    xhr.responseText
		if (xhr.status == 200) {
			// 如果响应成功,接收数据
			console.log(xhr.responseText);
		}
	</script>

二、GET和POST

1.GET

 <button type="button" onclick="ajaxGet01()">同步请求</button>
 <button type="button" onclick="ajaxGet02()">异步请求</button>
 <script type="text/javascript">
		 	/**
			 * GET同步请求
			 * 
			 */
			function ajaxGet01(){
				//1.创建XMLHttpRequest
				var xhr=new XMLHttpRequest();
				//2.打开请求/准备请求
				xhr.open("GET","js/data.json?uname=zhangsan&upwd=1234",false);
				//3.发送请求
				xhr.send(null);
				//4.接收响应
				if(xhr.status==200){
					console.log(xhr.responseText);
				}
			}
			/**
			 * GET异步请求
			 * */
			 function ajaxGet02(){
				 //1.创建对象XMLHttpRequest
				 var xhr=new XMLHttpRequest();
				 //2.打开请求/准备请求
				xhr.open("GET","js/data.json?uname=zhangsan&upwd=1234",true);
				 //3.发送请求
				 xhr.send(null);
				 //4.接收响应
				 //监听数据是否完全响应 readstate
				 xhr.onreadystatechange=function(){
					 //判断readstate的值是否为4(数据已经完全响应)
					 if(xhr.readyState==4){
						 if(xhr.status==200){
						 	console.log(xhr.responseText);
						 }else{
							 console.log("失败状态码:"+xhr.status+",错误原因:"+xhr.statusText);
						 }
					 }
				 }
			 }
			 /**
			  * 封装GET请求
			  * 
			  * */
	
			var obj = {
				url:"js/data.json?aa=1", // 请求路径
				async:true, // 是否异步
				data:{	// 请求的参数数据   uname=zhangsan&upwd=1234
					uname:"zhangsan",
					upwd:"1234"
				}
			}
			
			// 调用ajax的get请求
			ajaxGet(obj);
			
			
			/**
			 * 封装GET请求
			 */
			function ajaxGet(obj) {
				// 默认GET请求
				// 1、创建XMLHttpRequest对象
				var xhr = new XMLHttpRequest();
				
				// 得到请求的参数     uname=zhangsan&upwd=1234
				var params = formatParams(obj.data);
				
				// 判断参数是否为空,不为空则拼接到地址后面
				if (params != null) {
					obj.url += (obj.url).indexOf("?") != -1  ?  "&" + params  : "?" + params;
				}
				
				// 2、打开请求/准备请求
				xhr.open("GET",obj.url,obj.async); 
				
				// 3、发送请求
				xhr.send(null);
				
				// 4、接收响应
				// 判断是否是异步请求
				if (obj.async) { // 异步请求
					// 监听数据是否完全响应  readystate
					xhr.onreadystatechange = function(){
						// 判断readyState的值是否为4(数据已经完全响应)
						if (xhr.readyState == 4) {
							// 4、接收响应
							callback();
						}
					}
				} else { // 同步请求
					// 4、接收响应
					callback();
				}
				
				
				/**
				 * 响应成功处理的结果
				 */
				function callback() {
					if(xhr.status == 200) {
						console.log(xhr.responseText);
					} else {
						console.log("失败状态码:" + xhr.status + ",错误原因:" + xhr.statusText);
					}
				}
			}
			
			
			/**
			 * 格式化参数数据,并返回给调用者
				{	   
					uname:"zhangsan",
					upwd:"1234"
				}
					|
					
				uname=zhangsan&upwd=1234
				
			 * @param {Object} data
			 */
			function formatParams(data){
				// 得到格式化好的参数数据
				var params = null;
				
				if (data != null  && data.length > 0) {
					// 定义数组,接收每个参数键值对
					var arr = [];
					// 遍历对象,得到对象中的键和值
					for (var k in data) {
						var name = k;
						var value = data[k];
						// 拼接键和值
						var param = name+"="+value;
						// 将键值对设置到数组中
						arr.push(param);
					}
					// 将数组转换成以指定符号分隔的字符串
					params = arr.join("&");
					console.log(params);
				}
				
				return params
			}
			
		 </script>
2.POST
<button onclick="ajaxPost1()">同步请求</button> &nbsp; &nbsp; &nbsp;
	  <button onclick="ajaxPost2()">异步请求</button>
	  <script type="text/javascript">
		  	/**
		  		Ajax Post请求 同步请求
		  	*/
		  	
	  		function ajaxPost1(){
		  		//1.创建XMLHttpRequest对象
		  		var xhr=new XMLHttpRequest();
		  		//2.打开请求/准备请求
		  		xhr.open("POST","js/data.json",false);
		  		// 向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。
		  		//因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
		  		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		  		//3.发送请求
		  		xhr.send("uname=zhangsan&upwd=1234");
		  		//4.接收响应
		  		if(xhr.status==200){
		  			console.log(xhr.responseText);
		  		}
		  	}
	  		
		  	/**
		  		Ajax Post请求 异步请求
		  	*/
	  		function ajaxPost2(){
		  		//1.创建XMLHttpRequest对象
		  		var xhr=new XMLHttpRequest();
		  		//2.打开请求/准备请求
		  		xhr.open("POST","js/data.json",true);
		  		// 向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。
		  		//因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
		  		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		  		//3.发送请求
		  		xhr.send("uname=zhangsan&upwd=1234");
		  		//4.接收请求
		  		xhr.onreadystatechange=function(){
		  			//判断readyState的值是否为4,数据完全响应
		  			if(xhr.readyState==4){
		  				if(xhr.status == 200) {
							console.log(xhr.responseText);
						}else{
		  				console.log("失败状态码:" + xhr.status + ",错误原因:" + xhr.statusText);
		  				}
		  			}
		  		}
		  	}
		  	
		  	var obj={
		  			url:"js/data.json",   //请求路径
		  			async:true,  //是否异步
		  			data:{				//请求的参数数据
		  				uname:"zhangsan",
		  				upwd:"1234"
		  			}
		  	}
		  	//调用ajax的post方法
		  	ajaxPost(obj);
		  	
		  	/**
		  		封装Ajax的Post请求
		  	*/
		  	function ajaxPost(){
		  		//默认post请求
		  		//1.创建XMLHttpRequest对象
		  		var xhr =new XMLHttpRequest();
		  		//2.打开请求/准备请求
		  		xhr.open("POST",obj.url,obj.async);
		  		// 向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。
		  		//因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		  		//格式化后的参数
		  		var params=formatParams(obj.data);
		  		//3.发送请求
		  		//判断是否存在参数
		  		if(params!=null){
		  			xhr.send(params);
		  		}else{
		  			xhr.send(null);
		  		}
		  		//判断是否异步请求
		  		if(obj.async){  //异步请求
		  			//监听是否完全响应
		  			xhr.onreadystatechange=function(){
		  				if(xhr.readyState==4){
		  					//接收响应
		  					callback();
		  				}
		  			}
		  		}else{   //同步请求
		  			//接收响应
		  			callback();
		  		}
		  		//响应成功处理的结果
			  	function callback(){
			  		if(xhr.status == 200) {
						console.log(xhr.responseText);
					} else {
						console.log("失败状态码:" + xhr.status + ",错误原因:" + xhr.statusText);
					}
			  	}
		  	}
		  
		  	//格式化参数数据,返回给调用者
		  	function formatParams(data){
		  		//得到格式化好的参数数据
		  		var params=null;
		  		if(data!=null && data.length>0){
		  			//定义数组,接收每个参数键值对
		  			for(var k in data){
		  				var name=k;
		  				var value=data[k];
		  				//拼接键值对
		  				var param=name+"="+value;
		  				//将键值对设置到数组中
		  				arr.push(param);
		  			}
		  			//将数组转换成指定符号分隔的字符串
		  			params=arr.join("&");
		  			console.log(params);
		  		}
		  		return params;
		  	}
	  </script>

三、封装Ajax

<!-- 
		封装Ajax实现过程:
			1.创建XMLHttpRequest对象
				var xhr=new XMLHttpRequest();
			2.准备请求/打开请求
				xhr.open(参数1,参数2,参数3);
					参数1:请求的方式(GET|POST)
					参数2:请求的路径(请求地址:如果是GET请求,参数直接拼接在地址栏后面)
					参数3:是否异步 (true|false 默认是true,表示异步)
			3.发送请求
				xhr.send(参数);
				如果是GET请求,则send(null);参数会直接设置在请求的地址后面;
				如果是POST
				向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。
				因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					如果有参数,则send(参数);如果没有参数,则send(null)
			4.接收响应
				如果是同步请求:
					判断是否响应成功 status==200
						如果是,则获取响应数据 xhr.responseText
				如果是异步请求:
					通过onreadystatechange事件监听readyStatus的值变化,当数据完全响应成功时,readyState的值为4
						判断readyState的值是否为4
							如果是,判断是否响应成功status==20
								如果是,则获取响应数据 xhr.responseText
	 -->
	 <script type="text/javascript">
	 	//准备数据
	 	var obj={
	 			url:"js/data.json",
	 			type:"GET",  //请求类型 GET|POST
	 			async:true,  //是否异步请求 true|false
	 			data:{
	 				uname:"zhangsan",
	 				upwd:"1234"
	 			},
	 			success:function(result){
	 				alert(result);
	 			}	
	 	};
	 	//调用
	 	ajax(obj);
	 	/**
	 		封装Ajax
	 	*/
	 	function ajax(obj){
	 		//1.创建XMLHttpRequest对象
	 		var xhr=new XMLHttpRequest();
	 		//将对象格式的参数转换成键值对字符串格式
	 		var params=formatParams(obj.data);
	 		//判断是否是GET请求
	 		if((obj.type).toUpperCase()=="GET"){
	 			//将参数拼接到地址后面
	 			obj.url += (obj.url).indexOf("?") != -1  ? "&"+params : "?"+params;
	 		}
	 		//2.准备请求/打开请求
	 		xhr.open(obj.type,obj.url,obj.async);
	 		//3.发送请求 xhr.send(参数);
	 		if((obj.type).toUpperCase()=="GET"){
	 			xhr.send(null);
	 		}else{
	 			//POST请求
	 			// 向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。
	 			//因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
	 			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	 			//如果有参数,则send(参数);如果没有参数,则send(null)
	 			xhr.send(params);
	 		}
	 		//4.接收响应
	 		if(obj.async){   //如果是异步请求
	 			//通过onreadystatechange事件监听readyState的值变化,当完全响应成功,readyState的值为4
	 			xhr.onreadystatechange=function(){
	 				//判断readyState的值是否为4
	 				if(xhr.readyState==4){
	 					//判断是否响应status==200,如果是,则获取响应数据 xhr.responseText
	 					callback();
	 				}
	 			}
	 			
	 		}else{   //同步请求
	 			//判断是否响应status==200,如果是,则获取响应数据 xhr.responseText
	 			callback();
	 		}
	 		/*
			回调函数
		*/
			function callback() {
			// 判断是否响应成功 status==200;如果是,则获取响应数据  xhr.responseText
				if (xhr.status == 200) {
				// console.log(xhr.responseText);
				obj.success(xhr.responseText);
				}
			}
	 	}
	 
	 	/**
		 * 格式化参数数据,并返回给调用者
		 * @param {Object} data
		 */
		function formatParams(data){
			// 得到格式化好的参数数据
			var params = null;
			if (data != null  && data.length > 0) {
				// 定义数组,接收每个参数键值对
				var arr = [];
				// 遍历对象,得到对象中的键和值
				for (var k in data) {
					// 拼接键和值
					var param = k + "=" + data[k];
					// 将键值对设置到数组中
					arr.push(param);
				}
				// 将数组转换成以指定符号分隔的字符串
				params = arr.join("&");
			}
			return params;
		}
	 </script>

四、Jquery-Ajax

1.$.ajax()
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	$.ajax({
		type:"get",//请求类型GET|POST
		url:"data.txt",//请求地址
		data:{
			
		},
		dataType:"json",//预期服务器返回的数据类型是JSON格式,浏览器接收后会自动封装成json对象
		success:function(result){  //回调函数:用来接收ajax请求后返回的结果
			console.log(result);
			//添加到页面上
			var ul=$("<ul></ul>");
			//遍历
			for(var i=0;i<result.length;i++){
				var li="<li>"+result[i].uname+"</li>";
				//将追加到ul中
				ul.append(li);
			}
			//将ul追加到body中
			$("body").append(ul);
		}
	});
</script>
2.$.get()
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	//有请求地址,无参数,无返回值
	$.get("data.json");
	//有请求地址,有参数,无返回值
	$.get("data.json",{uname:"zhangsan",upwd:"123"});
	//有请求地址,没有参数,有返回值
	$.get("data.json",function(result){
		console.log(result);
	});
	//有请求地址,有参数,有返回值
	$.get("data.json",{uname:"zhangsan",upwd:"1234"},function(result){
		console.log(result);
	});
</script>
3.$.post()
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	//有请求地址,无参数,无返回值
	$.post("data.json");
	//有请求地址,有参数,无返回值
	$.post("data.json",{uname:"zhangsan",upwd:"1234"});
	//有请求地址,无参数,有返回值
	$.post("data.json",function(result){
		console.log(result);
	});
	//有请求地址,有参数,有返回值
	$.post("data.json",{uname:"zhangsan",upwd:"1234"},function(result){
		console.log(result);
	});
</script>
4.$.getJSON()
//表示请求返回的数据类型是 JSON 格式的 ajax 请求 
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	//有请求地址,无参数,无返回值
	$.getJSON("data.json");
	//有请求地址,有参数,无返回值
	$.getJSON("data.json",{uname:"zhangsan",upwd:"1234"});
	//有请求地址,无参数,有返回值
	$.getJSON("data.json",function(result){
		console.log(result);
	});
	//有请求地址,有参数,有返回值
	$.getJSON("data.txt",{uname:"zhangsan",upwd:"1234"},function(result){
		console.log(result);
	});
</script>
5.jsonp

**远程跨域时,**如果有两个域名,从其中一个域名去访问另一个域名时,使用普通的 ajax 方

法是获取不到数据的,那么就可以使用 jsonp 方式发送请求。

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
	$.ajax({
		type:"get",
		url:"http://iservice.itshsxt.com/restaurant/find",
		dataType:"jsonp",//允许跨域请求(服务器也需要设置允许请求跨域)
		success:function(result){
			console.log(result);
		}
	});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值