Ajax 解释Ajax的XML和JSON格式,操作Ajax的几种封装方法案例+解释

Posted IT_Holmes

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax 解释Ajax的XML和JSON格式,操作Ajax的几种封装方法案例+解释相关的知识,希望对你有一定的参考价值。

1.Ajax同步的使用

一般在网页中,是不使用Ajax的同步的,因为同步,就必须依次执行,比较考验网络状况。这就像一个人在寄快递一样,同步,就必须把快递寄送完成,才能干其他事情,异步,再寄送完成前,就可以操作其他事情,就这么好理解。

下面,只是写一个和之前一样register.html中的username,只不过这里使用的是同步。

username.onblur = function(){
				var usernameValue = username.value;
				console.log(usernameValue);
				//这里比较用户名username和服务器数据库里面内容。
				//往后使用ajax来实现。
				var xhr = null;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.open("get","./server/checkUsername.php?uname="+usernameValue,false);
				xhr.send(null);
				console.log(xhr.readyState);
				xhr.onreadystatechange = function(){
					if (xhr.readyState==4) {
						if (xhr.status==200) {
							//responseText返回的是字符串
							//responseXML返回的是XML格式
							var result = xhr.responseText;
							console.log(result);
							var username_result = document.querySelector("#username_result");
							if (result == "NO") {
								username_result.innerText = "user已经注册!!";
							}else{
								username_result.innerText = "user可以使用。";
							}
						}
					}
				}
			};

onreadystatechange事件,只有readyState的值变化时,才会被执行。
上面代码,使用的是同步,但是却不执行回调函数,因为在xhr.send()的时候,这里是同步执行的,不会执行下面的onreadystatechange事件,一直到send()方法执行完,这里的xhr.readyState为4,就不会再执行onreadystatechange这个事件,因此用不到onreadystatechange事件。

将onreadystatechange事件去掉就可以正常运行了,如下:

username.onblur = function(){
				var usernameValue = username.value;
				console.log(usernameValue);
				//这里比较用户名username和服务器数据库里面内容。
				//往后使用ajax来实现。
				var xhr = null;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.open("get","./server/checkUsername.php?uname="+usernameValue,false);
				xhr.send(null);
				console.log(xhr.readyState);
				if (xhr.readyState==4) {
						if (xhr.status==200) {
							//responseText返回的是字符串
							//responseXML返回的是XML格式
							var result = xhr.responseText;
							console.log(result);
							var username_result = document.querySelector("#username_result");
							if (result == "NO") {
								username_result.innerText = "user已经注册!!";
							}else{
								username_result.innerText = "user可以使用。";
							}
						}
				}
			};

2.JS的单线程和事件队列

这里涉及到一个队列问题,因为JS是单线程的,开始有一个事件队列,事件队列的作用就是用来存放事件的函数,浏览器开始先执行完所有的代码,然后去事件队列,执行事件的函数,就像下图一样。

在这里插入图片描述

window.onload = function(){},这样类似的也是要放入到事件队列中,然后被执行。
注意:浏览器不是单线程的!!

2.Ajax的数据格式

1.XML数据格式

xml数据格式将数据以标签的方式进行组装,标签成对,开头有相应的xml版本,编码,例如:<?xml version=''1.0'' encoding="utf-8" ?>

缺点:体积太大,传递慢,元数据太多,解析不方便,目前使用很少。
例如:

<?xml version=''1.0'' encoding="utf-8" ?>
<students>
	<student>
			<name>张三</name>
			<age>19</age>
			<sex>男</sex>	
	</student>
	<student>
			<name>李四</name>
			<age>23</age>
			<sex>女</sex>	
	</student>
	<student>
			<name>王五</name>
			<age>12</age>
			<sex>男</sex>	
	</student>
</students>

2.JSON数据格式

Json数据格式类似于JS中的对象方式,key-value的形式组装。

相比较xml格式,体积小,传输快,解析方便。

例如:

{
	"student":[
		{
			"name":"张三",
			"age":"19",
			"sex":"男"
		},
		{
			"name":"李四",
			"age":"23",
			"sex":"女"
		},
		{
			"name":"王五",
			"age":"12",
			"sex":"男"
		}
	]
}

这里说一下eval函数,evaluate意思评估。
eval() 函数使用的是 javascript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval ("(" + txt + ")");

在网页中使用 JavaScript 对象:

var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.djznrobot.com" },' +
'{ "name":"google" , "url":"www.djznrobot.com" },' +
'{ "name":"微博" , "url":"www.djznrobot.com" } ]}';

var obj = eval ("(" + txt + ")");

document.getElementById("name").innerHTML=obj.sites[0].name
document.getElementById("url").innerHTML=obj.sites[0].url

3.如何处理XML数据格式案例

注意:在php文件中,xml代码和php代码中间一定不要有多余的换行,否则不能执行!!!

写一个案例,创建一个booklist.html文件:

<!DOCTYPE html>
<html>
<head>
	<title>
		书籍列表案例
	</title>
	<style type="text/css">
		div{
			width: 800px;
			margin: 20px auto;
		}
		table{
			width: 800px;
			margin: 20px auto;
			border-collapse: collapse;
		}
		th{
			background-color: #0094ff;
			color: white;
			font-size: 16px;
			padding: 5px;
			text-align: center;
			border: 1px solid black;
		}
		td{
			padding: 5px;
			text-align: center;
			border: 1px solid black;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var xhr = new XMLHttpRequest();
			xhr.open("get","./server/getBooks.php",true);
			xhr.send(null);
			xhr.onreadystatechange = function(){
				if (xhr.readyState == 4) {
					if (xhr.status == 200) {
						var result = xhr.responseXML;
						var books = result.getElementsByTagName("booklist")[0].getElementsByTagName("book");
						var newHtml = document.getElementById("bookContaintor").innerHTML;
						for(var i=0;i<books.length;i++){
							var index = books[i];
							var name = index.getElementsByTagName("name")[0].textContent;
							var author = index.getElementsByTagName("author")[0].textContent;
							var desc = index.getElementsByTagName("desc")[0].textContent;
							var tempHTML = "<tr><td>"+name+"</td>"+"<td>"+author+"</td>"+"<td>"+desc+"</td></tr>";
							newHtml += tempHTML;
						}
						document.getElementById("bookContaintor").innerHTML = newHtml;
					}
				}
			}
		}
	</script>
</head>
<body>
	<div>
		<table id="bookContaintor">
			<tr>
				<th>书名</th>
				<th>作者</th>
				<th>描述</th>
			</tr>
		</table>
	</div>
</body>
</html>

再在server下创建一个getBooks.php文件:

<?php 
	//这里设置响应头信息,保证浏览器可以把相应内容识别为xml文件类型。
	header("Content-Type:text/xml;");
	$arr = array();
	$arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀戮的时代!");
	$arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事。");
	$arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教的斗争。");
	$arr[3] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影。");?>
<?xml version="1.0" encoding="utf-8" ?>
<booklist>
	<?php foreach ($arr as $key => $value) { ?>
	<book>
		<name><?php echo $value['name'] ?></name>
		<author><?php echo $value['author'] ?></author>
		<desc><?php echo $value['desc'] ?></desc>
	</book>
	<?php } ?>
</booklist>

结果如下:

在这里插入图片描述

4.如何处理JSON数据格式案例

注意:除了XML格式,其他的都是用responseText方法,responseText方法获得字符串形式的响应数据。。

3.Ajax的封装

将Ajax的四个操作步骤封装在一个函数当中,通过调用函数来实现Ajax调用。

下面我们就在之前的register.html,进行修改,建立一个myAjax的函数,来进行封装:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>register</title>
	<script type="text/javascript">

		function myAjax(type,url,params,dateType,callback){
			var xhr = null;
			if (window.XMLHttpRequest) {
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}

			if (type == "get") {
				url += "?" + params;
			}

			xhr.open(type,url,true);
			if (type == "get") {
				xhr.send(null);
			} else if (type == "post") {
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				xhr.send(params);
			}
			xhr.onreadystatechange = function(){
				if (xhr.readyState == 4 && xhr.status == 200) {
					var result = null;

					if (dateType == "json") {
						result = xhr.responseText;
						result = JSON.parse(result);
					}else if(dateType == "xml"){
						result = xhr.responseXML;
					}else{
						result = xhr.responseText;
					}

					callback(result);
				}
			}			
		}

		window.onload = function(){
			var username = document.querySelector("#username");
			var email = document.querySelector("#email");
			var phone = document.querySelector("#phone");

			username.onblur = function(){
				var usernameValue = username.value;
				var type = "get";
				var url = "./server/checkUsername.php";
				var params = "uname="+usernameValue;
				var dateType = "text";

				myAjax(type,url,params,dateType,function(result){
					var username_result = document.querySelector("#username_result");
					if (result == "NO") {
						username_result.innerText = "user已经注册!!";
					}else{
						username_result.innerText = "user可以使用。";
					}
				});
			}

			email.onblur = function(){
				var emailValue = email.value;

				var type = "post";
				var url = "./server/checkEmail.php";
				var params = "e="+ emailValue;
				var dateType = "text";

				myAjax(type,url,params,dateType,function(result){
					var email_result = document.querySelector("#email_result");
					if (result==0) {
						email_result.innerText = "邮箱可用";
					}else{
						email_result.innerText = "邮箱不可用";
					}
				});
			}

			phone.onblur = function(){
				var phoneValue = phone.value;
				var type = "post";
				var url = "./server/checkPhone.php";
				var params = "phonenumber="+phoneValue;
				var dateType = "json";

				myAjax(type,url,params,dateType,function(result){
					var phone_result = document.querySelector("#phone_result")
					if (result.status == 0 ) {
						//代表手机号码可用
						phone_result.innerText = result.message.tips+","+result.message.phonefrom;
					}else if (result.status == 1) {
						//代表手机号码不可用
						phone_result.innerText = result.message;
					}
				});
			}
		}
	</script>
</head>
<body>
	<h1>注册界面</h1>
	<form action="">
		用户名:<input type="text" id="username"><span id="username_result"></span><br>

		邮箱:<input type="text" id="email"><span id="email_result"></span><br>

		手机号码:<input type="text" id="phone"><span id="phone_result"></span>
	</form>
</body>
</html>

上面的myAjax()函数方法就是封装后的。不要忘记之前的三个php后台文件。

4.Ajax使用对象和外部JS文件

创建一个myutils.js文件,将封装起来的Ajax存入到里面:

里面通过使用对象解决了参数的顺序问题。

function myAjax2(obj){
	//使用对象来解决参数的顺序问题。
	//data就是要传递的参数,也就是之前的params,这里写成了对象的形式。
	//这里的参数形式差不多为,uname=zhangsan&age=18
	var defaults = {
		type:"get",
		url:"#",
		dataType:"json",
		data:{},
		async:true,
		success:function(result){
			console.log(result);
		}
	};

	//将obj的属性,覆盖到defaults中的属性。
	//既可以设置了默认值,又可以传递属性的值,一举两得。
	for(var key in obj){
		defaults[key] = obj[key];
	}

	var xhr = null;
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// data = {
	// 	uname:"zhangsan",
	// 	age:18
	// }
	// 参数形式差不多为,uname=zhangsan&age=18
	// 按照上面的格式来写出params。
	var params = "";
	for(var attr in defaults.data){
		params += attr + "=" + defaults.data[attr]+"&";
	}
	if (params) {
		params = params.substring(0,params.length-1);
	}
	if (defaults.type == "get") {
		defaults.url += "?" + params;
	}

	xhr.open(defaults.type,defaults.url,defaults.async);

	if (defaults.type == "get") {
		xhr.send(null);
	}else if (defaults.type == "post") {
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(params);
	}

	if (defaults.async) {
		xhr.onreadystatechange = function(){
			if (xhr.readyState == 4 && xhr.status == 200) {
				if (defaults.dataType == "json") {
					result = xhr.responseText;
					result = JSON.parse(result);
				}else if (defaults.dataType == "xml") {
					result = xhr.responseXML;
				}else{
					result = xhr.responseText;
				}
				defaults.success(result);
			}
		}
	}else{
		if (xhr.readyState == 4 && xhr.status == 200) {
			if (defaults.dataType == "json") {
				result = xhr.responseText;
				result = JSON.parse(result);
			}else if (defaults.dataType == "xml") {
				result = xhr.responseXML;
			}else{
				result = xhr.responseText;
			}
			defaults.success(result);
		}
	}

}

修改之前的register.html,并导入上面的myutils.js,如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>register</title>
	<script type="text/javascript" src="myutils.js"></script>
	<script type="text/javascript">

		window.onload = function(){
			var username = document.querySelector("#username");
			var email = document.querySelector("#email");
			var phone = document.querySelector("#phone");

			username.onblur = function(){
				var usernameValue = username.value;
				var type = "get";
				var url = "./server/checkUsername.php";
				var params = "uname="+usernameValue;
				var dateType = "text";

				myAjax2({
					url:url,
					data:{uname:usernameValue},
					dataType:"text",
					success:function(result){
						var username_result = document.querySelector("#username_result");
						if (result == "NO") {
							username_result.innerText = "user已经注册!!";
						}else{
							username_result.innerText = "user可以使用。";
						}
					}
				});
			}

			email.onblur = function(){
				var emailValue = email.value;

				var type = "post";
				var url = "./server/checkEmail.php";
				var params = "e="+ emailValue;
				var dataType = "text";


				myAjax2({
					type:type,
					url:url,
					data:{e:emailValue},
					dataType:"text",
					success:function(){
						var email_result = document.querySelector("#email_result");
						if (result==0) {
							email_result.innerText = "邮箱可用";
						}else{
							email_result.innerText = "邮箱不可用";
						}
					}
				});
			}

			phone.onblur = function(){
				var phoneValue = phone.value;
				var type = "post";
				var url = "./server/checkPhone.php";
				var params = "phonenumber="+phoneValue;
				var dataType = "json";

				myAjax2({
					type:type,
					url:url,
					data:{phonenumber:phoneValue},
					dataType:"json",
					success:function(){
						var phone_result = document.querySelector("#phone_result")
						if (result.status == 0 ) {
							//代表手机号码可用
							phone_result.innerText = result.message.tips+","+result.message.phonefrom;
						}else if (result.status == 1) {
							//代表手机号码不可用
							phone_result.innerText = result.message;
						}
					}
				});
			}

		}
	</script>
</head>
<body>
	<h1>注册界面</h1>
	<form action="">
		用户名:<input type="text" id="username"><span id="username_result"></span><br>

		邮箱:<input type="text" id="email"><span id="email_result"></span><br>

		手机号码:<input type="text" id="phone"><span id="phone_result"></span>
	</form>
</body>
</html>

不要忘记了,三个php文件和之前一样,没有变化。

提示出现这种错误:Uncaught SyntaxError: Unexpected identifier,一般都是JS对象中少加了一个","号。

以上是关于Ajax 解释Ajax的XML和JSON格式,操作Ajax的几种封装方法案例+解释的主要内容,如果未能解决你的问题,请参考以下文章

Ajax和Json

json和xml以及ajax的数据格式用法

谈JSON在Ajax中的使用

Ajax数据格式,html,xml,json

ajax ---- json 和 xml 区别

Ajax —— Ajax接收JSON数据