文章目录3.Ajax的封装4.Ajax使用对象和外部JS文件
1.Ajax同步的使用
一般在网页中，是不使用Ajax的同步的，因为同步，就必须依次执行，比较考验网络状况 。这就像一个人在寄快递一样，同步，就必须把快递寄送完成，才能干其他事情，异步，再寄送完成前，就可以操作其他事情，就这么好理解 。
下面，只是写一个和之前一样.html中的，只不过这里使用的是同步 。
username.onblur = function(){var usernameValue = http://www.kingceram.com/post/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可以使用 。";}}}}};
事件，只有的值变化时，才会被执行 。
上面代码，使用的是同步，但是却不执行回调函数，因为在xhr.send()的时候，这里是同步执行的，不会执行下面的事件，一直到send()方法执行完，这里的xhr.为4，就不会再执行这个事件，因此用不到事件 。
将事件去掉就可以正常运行了，如下：
username.onblur = function(){var usernameValue = http://www.kingceram.com/post/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是单线程的，开始有一个事件队列，事件队列的作用就是用来存放事件的函数，浏览器开始先执行完所有的代码，然后去事件队列，执行事件的函数，就像下图一样 。
. = (){},这样类似的也是要放入到事件队列中，然后被执行 。
注意：浏览器不是单线程的！！
2.Ajax的数据格式 1.XML数据格式
xml数据格式将数据以标签的方式进行组装，标签成对，开头有相应的xml版本，编码，例如： 。
缺点：体积太大，传递慢，元数据太多，解析不方便，目前使用很少 。
例如：
>>张三19>男 >李四23>女 >王五12>男
2.JSON数据格式
Json数据格式类似于JS中的对象方式，key-value的形式组装 。
相比较xml格式，体积小，传输快，解析方便 。
例如：
{"student":[{"name":"张三","age":"19","sex":"男"},{"name":"李四","age":"23","sex":"女"},{"name":"王五","age":"12","sex":"男"}]}