AJAX总结
艾瑞宝迪，早上好，前端小菜鸟最近想更深入的了解ajax，无奈网上都没有看到合适系统的总结，于是心血来潮开始自己在博客园上的处女作，方便自己以后查看，也可以和大家一起交流😄 废话完毕。。。loading。。。
Ajax工作原理：通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。XMLHttpRquest是Ajax的核心机制，是一种支持异步请求的技术，简单地说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户，达到无刷新的效果。
Ajax作用：从某个文件中找相关的数据，然后利用这些数据，分析数据，做我们要的效果。
一、原生Ajax
服务器我们通过node开启，百度npm安装就好。文件目录结构如下：
首先建立app.js，用于使ajax运行在服务器环境（现在有很多傻瓜式的建立服务器的软件，eg：Windows下的WAMP、Mac下的Mamp只需要把文件扔到对应的文件夹下。。。start。。。搞定，就可以访问你的localhost了）。
var express=require("express"); var app=express(); app.use(express.static("public")); app.get("/getdata",function(req,res){ res.send("helow ajax"); }) app.listen(3000); console.log("启动");
再建立index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>首页</h1> <input type="button" value="获取请求" id="btn"> <script type="text/javascript" src="script/myAjax.js"></script> <script> var oGet=document.getElementById("btn"); oGet.onclick=function(){ // 不用封装函数做法 var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("MicroSoft.XMLHttp"); } var oGet=document.getElementById("btn"); oGet.onclick=function(){ xhr.open("get","/getdata",true); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ alert(xhr.responseText) } } } } </script> </body> </html>
运行结果如图所示：
二、Jquery中的Ajax
原生的Ajax比较繁琐，Jquery已经为我们封装好了现成的，主要有三种方法：load()、get()/post()、getJSON()三种方法。
Ajax传输数据的方式也分为三种方式：
1）XML:笨重，解析困难，但XML是通用的数据交换格式。
2）HTML：不需要解析可以直接放到文档中，若仅更新一部分区域，但传输的数据不是很方便，且HTML代码需要拼装完成。
3）JSON：小巧，有面向对象的特征，且有很多第三方的jar包可以把Java对象或集合转为JSON字符串。下面分别记录Jquery下的三种方法：
1.$.load()方法：可以用于HTML文档的元素节点，把结果直接加在对应的子元素，通常而言，load方法加载后的数据是一个HTML片段。说了这么多，上代码了😋，建立如下的文档结构：
建立test1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> <h1>people</h1> <ul> <li><a href="files/andy.xml">Andy</a></li> <li><a href="files/richard.xml">Rrichard</a></li> <li><a href="files/jeremy.xml">Jeremy</a></li> </ul> <div id="details"></div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script> $(function(){ $("a").click(function(){ var url=this.href+" h2 a"; console.log(url); var args={"time":new Date()};//防止产生缓存,args为json对象 // 任何一个html节点，都可以使用load方法来加载ajax，结果将直接插入html节点 $("#details").load(url,args); return false; }) }) </script> </body> </html>
注意使用load方法,可以加载页面中的部分内容，例如，只想选择h2>a，只需将load中的url地址后面+“ h2 a"即可（其中包含了两个空格呦!!!）
<?xml version="1.0" encoding="UTF-8"?> <h2 id="a"><a href="">andy</a></h2> <a href="">book</a>
运行结果如图所示
2、$.get()/post()方法
test2-get.html中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>people</h1> <ul> <li><a href="files/andy.html">Andy</a></li> <li><a href="files/richard.html">Rrichard</a></li> <li><a href="files/jeremy.html">Jeremy</a></li> </ul> <div id="details"></div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script> $(function(){ $("a").click(function(){ var url=this.href; console.log(url); var args={"time":new Date()}; // url：目标 // args： json格式 //function：回调函数：当响应结束时 ，回调函数被触发，相应结果在data中 // 返回的data是xml格式，$(data)则转为jquery对象，find方法找name、email节点，再找文本值 $.get(url,args,function(data){ var name=$(data).find("name").text(); var email=$(data).find("email").text(); var website=$(data).find("website").text(); $("#details").empty() .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>") .append("<a href='"+ website +"'>"+website+"</a>"); }); return false; }); }) </script> </body> </html>
在andy,html中
<?xml version="1.0" encoding="UTF-8"?> <details> <name>Andy Budd</name> <website>http://andybudd.com</website> <email>andy@clearleft.com</email> </details> <h2 id="a"><a href="">andy</a></h2> <a href="">book</a>
3、$.getJSON()方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>people</h1> <ul> <li><a href="files/andy.json">Andy</a></li> <li><a href="files/richard.html">Rrichard</a></li> <li><a href="files/jeremy.html">Jeremy</a></li> </ul> <div id="details"></div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script> $(function(){ $("a").click(function(){ var url=this.href; console.log(url); var args={"time":new Date()}; // 两种方法可以获得到JSON数据，一种是通过getJSON，另一种是通过$.get(url,args,function(data){},"JSON")，均能得出和上例一样的结果。 // $.getJSON(url,args,function(data){ // var name=data.person.name; // var email=data.person.email; // var website=data.person.website; // $("#details").empty() // .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>") // .append("<a href='"+ website +"'>"+website+"</a>"); // }); $.get(url,args,function(data){ var name=data.person.name; var email=data.person.email; var website=data.person.website; $("#details").empty() .append("<h2><a href='mailto:"+email+"'>"+name+"</a></h2>") .append("<a href='"+ website +"'>"+website+"</a>"); },"JSON"); return false; }); }) </script> </body> </html>
在andy.json中
{
"person":{
"name":"anndy",
"website":"http://anndy.com/",
"email":"anndyleft,com"
}
}
三、总结
$.get()/post()方法、$.geJSON方法更加灵活，除去使用load方法的情况，大部分时候都使用这3个方法
I、基本的使用
url:Ajax请求的目标URL;args:传递的参数：JSON类型;data:Ajax响应成功后的数据,可能是XML,HTML,JSON
$.get(url,args,function(data){
})
II、请求JSON数据
$.get(url,args,function(data){},"JSON");
$.post(url,args,function(data){},"JSON");
$.getJSON(url,args,function(data){});
终于完事了，战线拉得有点长，欢迎大神们进行指点、完善！！！
