jQuery入门笔记之（五）jQuery中的Ajax

$('button').click(function () {      $('#box').load('test.php', {url : 'guowen'});  });

在控制台可以看到请求为POST，（注意：这里第二个参数若是字符串的情况，例如”url=guowen”，请求仍然为GET。）

所以服务器端php文件应该如此设置：

<?php  if ($_POST["url"] == "guowen") {//get请求把POST更改一下就好了      echo "<a href='http://guowenfh.github.io/'>三省吾身丶丶</a>";  } else {      echo "其他网站";  }  ?>

关于XHR对象上的属性，和HTTP状态码，参考我原来的博客。

$.get()和$.post()

$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml、html、script、json、jsonp和text。第一个参数为必选参数，后面三个为可选参数

GET方式请求会直接在html后以 ?Key=value 跟随，所以，有三种形式请求数据，

1. 直接跟在url后
2. 字符串形式的 "url=guowen"
3. 键值对形式的 {url:"guowen"}

POST请求方式除去不能直接跟在url后之外，剩余两个，使用方法一样

注意:与 .load() 方法不同的是： .load() 方法根据第二个参数的不同类型，请求方式会改变，但这里已经是两个独立的方法了，所以请求类型不会进行转换。

第四个参数一般都不进行设置，jQuery会自动转换其类型。强制设置时，有可能会连标签一起返回。

至于POST与GET方式请求的差别，在我原来的博客中也有写到，这里就不赘述了。

$.getScript() 和 $.getJSON()

jQuery提供了一组用于特定异步加载的方法： $.getScript() ，用于加载特定的JS文件； $.getJSON() ，用于专门加载JSON文件。

$.getJSON() 方法与之前的使用方法类似，就是把第四个参数，类型强制设置成了JSON。

有时我们希望能够特定的情况再加载JS文件，而不是一开始把所有JS文件都加载了，这时就可以使用 $.getScript() 方法。

//点击按钮后再加载 JS 文件  $('input').click(function () {      $.getScript('test.js');  });

$('button').click(function () {      $.ajax({          type : 'POST', //这里可以换成 GET          url : 'test.php',          data : {              url : 'guowen'          },          success : function (response, stutas, xhr) {              $('#box').html(response);          }      });  });

$('form input[type=button]').click(function () {      $.ajaxSetup({//初始化多个ajax方法相同部分参数，后面再写ajax的时候，就不用在写了。          type : 'POST',          url : 'test.php',          data : $('form').serialize()//表单序列化      });      $.ajax({          success : function (response, status, xhr) {                      alert(response);                  }      });  });

$(document).ajaxStart(function(){      $(".loading").show();  }).ajaxStop(function(){      $(".loading").hide();  });

$.ajax({      //…………      timeout : 500,//如果请求时间太长，可以设置超时      global : false,//如果某个 ajax 不想触发全局事件，可以设置取消      error : function(xhr,errorText,errorType){//一般都直接用xhr对象                  alert("发生错误："+xhr.status);//返回错误状态码              }  });

//遍历 settings 对象的属性  $(document).ajaxSuccess(function (event, xhr, settings) {      for (var i in settings) {          console.log(i);      }  });

<?php      $_arr= array('a'=>1,'b'=>2,'c'=>3);      $_result = json_encode($_arr);      echo $_result;  ?>

$.ajax({      type:"post",      url:"test.php",      dataType:"json",//因为文件类型是php。但是返回的数据是json，所以必须设置类型，否则返回字符串      success:function(response,staus,xhr){          console.log(response.a);//打印出来1      }  });

<?php      $_arr= array('a'=>1,'b'=>2,'c'=>3);      $_result = json_encode($_arr);      $_callback = $_GET['callback'];//关键在这。配合客户端JS使用      echo $_callback."($_result)";//php用点号实现字符串拼接  ?>

$.ajax({//我本地地址为http://127.0.0.1:8020/ajax.html      type:"GET",      url:"http://localhost/test.php?callback=?",//这样就可以实现跨域资源的访问了，最后的？号，jQuery会自动转化成字符串      dataType:"json",//若这里使用JSONP的话，可以删除上面url的“?callback=?”，jQuery会自动处理。      success:function(response,staus,xhr){          alert(response.a);          console.log(response)      }  });

//获取 jqXHR 对象，查看属性和方法  var jqXHR = $.ajax({      type : 'POST',      url : 'test.php',      data : $('form').serialize()  });  for (var i in jqXHR) {      document.write(i + '<br />');  }

//成功后回调函数  jqXHR.done(function (response) {      $('#box').html(response);  });