jQuery 中的 Ajax

来源：互联网发布：python 网页自动签到编辑：程序博客网时间：2024/06/07 13:45

•jQuery对 Ajax操作进行了封装,在 jQuery中最底层的方法时 $.ajax(),第二层是 load(), $.get() 和 $.post(), 第三层是$.getScript() 和$.getJSON()

•load() 方法是jQuery 中最为简单和常用的Ajax 方法, 能载入远程的 HTML代码并插入到DOM中.它的结构是: load(url[, data][,callback])

•程序员只需要使用 jQuery选择器为 HTML片段指定目标位置,然后将要加载的文件的 url 做为参数传递给load() 方法即可

•如果只需要加载目标 HTML页面内的某些元素,则可以通过 load()方法的 URL参数来达到目的.通过URL参数指定选择符, 就可以方便的从加载过来的HTML 文档中选出所需要的内容. load() 方法的URL 参数的语法结构为“url selector”(注意: url 和选择器之间有一个空格)

•传递方式:load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递,采用GET 方式传递,否则采用POST 方式

•对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的data;代表请求状态的 textStatus对象和XMLHttpRequest对象

•$.get() 方法使用GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);

•$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

•$.get() 和 $.post()方法时 jQuery 中的全局函数, 而find() 等方法都是对jQuery对象进行操作的方法

<script type="text/javascript" src="../js/jquery-1.7.2.js"></script><script>$(function(){$("a").click(function(){var url=this.href+" h2";var args={"time":new Date()};$("#details").load(url,args);return false;})})/*window.onload = function() {var aNodes = document.getElementsByTagName("a");for (var i = 0; i < aNodes.length; i++) {aNodes[i].onclick = function() {var request = new XMLHttpRequest();var method = "GET";var url = this.href;request.open(method, url);request.send(null);request.onreadystatechange = function() {if (request.readyState == 4) {if (request.status == 200 || request.status == 304) {document.getElementById("details").innerHTML = request.responseText;}}}return false;}}}*/</script>

<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>  <script type="text/javascript">  $(function(){  $("a").click(function(){var url=this.href;var args={"time":new Date()};$.post(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;  });  });  /*window.onload = function() {var aNodes = document.getElementsByTagName("a");for (var i = 0; i < aNodes.length; i++) {aNodes[i].onclick = function() {var request = new XMLHttpRequest();var method = "GET";var url = this.href;request.open(method, url);request.send(null);request.onreadystatechange = function() {if (request.readyState == 4) {if (request.status == 200 || request.status == 304) {//结果为xml格式，所以需要使用responseXML来获取var result=request.responseXML;//结果不能直接使用，必须先创建对应的节点，再把节点加入到#details中var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;//alert(name);//alert(website);//alert(email);//<h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>//<a href="http://andybudd.com/">http://andybudd.com/</a>var aNode=document.createElement("a");aNode.appendChild(document.createTextNode(name));aNode.href="mailto:"+email;var h2Node=document.createElement("h2");h2Node.appendChild(aNode);var aNode2=document.createElement("a");aNode2.appendChild(document.createTextNode(website));aNode2.href=website;var detailsNode=document.getElementById("details");detailsNode.innerHTML="";detailsNode.appendChild(h2Node);detailsNode.appendChild(aNode2);}}}return false;}}}  */</script>

0 0