1200字范文 > Ajax 解释Ajax的XML和JSON格式操作Ajax的几种封装方法【案例+解释】（二）

Ajax 解释Ajax的XML和JSON格式操作Ajax的几种封装方法【案例+解释】（二）

时间：2018-10-03 09:47:51

文章目录

1.Ajax同步的使用2.JS的单线程和事件队列2.Ajax的数据格式1.XML数据格式2.JSON数据格式3.如何处理XML数据格式案例4.如何处理JSON数据格式案例 3.Ajax的封装4.Ajax使用对象和外部JS文件

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":"" },' +'{ "name":"google" , "url":"" },' +'{ "name":"微博" , "url":"" } ]}';var obj = eval ("(" + txt + ")");document.getElementById("name").innerHTML=obj.sites[0].namedocument.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存入到里面：

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

修改之前的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对象中少加了一个"，"号。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。