学习第三十天

最新推荐文章于 2022-11-16 21:30:18 发布

qq_46098221

最新推荐文章于 2022-11-16 21:30:18 发布

阅读量69

点赞数

本文链接：https://blog.csdn.net/qq_46098221/article/details/104364098

版权

一：
Ajax
异步无刷新技术

核心对象

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

二：
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事件监听readyState的值变化，当数据完全响应成功时，readyState的值为4
					判断readyState的值是否为4
						如果是，判断是否响应成功 status==200
							如果是，则获取响应数据  xhr.responseText

Ajax的GET请求[同步请求、异步请求]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>封装Ajax</title>
</head>
<body> 
</body>
<script type="text/javascript">

	var obj = {
		url:"js/data.json",
		type:"GET", // 请求类型 GET|POST
		async:true, // 是否异步请求  true|false
		data:{
			uname:"zhangsan",
			upwd:"123"
		},
		success:function(result){
			alert(result);
		}
	};
	
	ajax(obj);
	
	var obj2 = {
			url:"js/data.json",
			type:"GET", // 请求类型 GET|POST
			async:false, // 是否异步请求  true|false
			data:{
				uname:"zhangsan",
				upwd:"123"
			},
			success:function(result){
				console.log(result);
			}
		};
		
	ajax(obj2);
	
	
	ajax({
		url:"js/data.json",
		type:"GET", // 请求类型 GET|POST
		async:false, // 是否异步请求  true|false
		data:{
			uname:"zhangsan",
			upwd:"123"
		},
		success:function(result){
			console.log(result);
		}
	});
	
	/**
		封装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") {
			// GET请求，参数设置为null
			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;
	}
	  
	 var o = {
		uname:"zhangsan",
		uage:18,
		usex:true,
		cats:["小黑","小白"],
		dog:{
			name:"哈士奇",
			age:1
		},
		sayHello:function(userNme){
			console.log(userNme + " Hello...");
		}
	 }
	 
	/*  console.log(o.uname);
	 console.log(o.cats);
	 console.log(o.dog);
	 console.log(o.dog.name);
	 console.log(o.sayHello);
	 o.sayHello("张三"); */
	 
</script>

</html>

三：

$.ajax({
		type:"get", 
		url:"http://iservice.itshsxt.com/restaurant/find",
		dataType:"jsonp", // 允许跨域请求   （服务器也需要设置允许请求跨域）
		success:function(result){
			console.log(result);
		}
	});

// 有请求地址，无参数，无返回值
	$.get("data.json");
	
	// 有请求地址，有参数，无返回值
	$.get("data.json",{uanme:"zhangsan",upwd:"123"});
	
	
	// 有请求地址，无参数，有返回值
	$.get("data.json",function(result){
		console.log(result);
	});
	
	//  有请求地址，有参数，有返回值
	$.get("data.json",{uanme:"zhangsan",upwd:"123"},function(result){
		console.log(result);
	});

$.post("data.json",{uanme:"zhangsan",upwd:"123"},function(result){
		console.log(result);
	});

$.getJSON("data.txt",{uanme:"zhangsan",upwd:"123"},function(result){
		console.log(result);
	});

处理跨域请求

$.ajax({
		type:"get", 
		url:"http://iservice.itshsxt.com/restaurant/find",
		dataType:"jsonp", // 允许跨域请求   （服务器也需要设置允许请求跨域）
		success:function(result){
			console.log(result);
		}
	});