jQuery学习 五 jQuery Ajax

jQuery学习　五　jQuery Ajax

五　jQuery Ajax
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

(1) $.ajax() 方法
 


下面再介绍下ajax的异步和同步有和区别
jquery中ajax方法有个属性async用于控制同步和异步，默认是true,即ajax请求默认是异步请求，有时项目中会用到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出现假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
ajax中async这个属性，用于控制请求数据的方式，默认是true，即默认以异步的方式请求数据。
一、async值为true （异步）
当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程）
例如
$.ajax({  
     type:"POST",
     url:"ceshi.php?act=index",
     dataType:"html",
     success:function(result){  //function1()
       f1();
       f2();  
    }
     failure:function (result) {  
      alert('Failed');  
     },
 }
 function2();
在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2()。

二、async值为false （同步）
当执行当前AJAX的时候会停止执行后面的JS代码，直到AJAX执行完毕后时，才能继续执行后面的JS代码。

例如
$.ajax({  
     type:"POST",
     url:"ceshi.php?act=index",
     dataType:"html",
     async: false,
    success:function(result){  //function1()
       f1();
       f2();
     }
    failure:function (result) {  
      alert('Failed');  
     },
 }
 function2();
当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，直到function1()部分执行完毕。

(2) jQuery load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 $(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

   

使用 jQuery AJAX

    获取外部内容

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/statics/demosource/demo_test.txt");
  });
});
也可以把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的

元素中：
$("button").click(function(){
  $("#div1").load("/statics/demosource/demo_test.txt #p1");
});

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
    responseTxt - 包含调用成功时的结果内容
    statusTXT - 包含调用的状态
    xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息

   

使用 jQuery AJAX 修改该文本

    获取外部内容



(3) AJAX get() 方法
1$.get() 方法通过 HTTP GET 请求从服务器上请求数据。语法：$.get(URL,callback);
$.get("/statics/demosource/demo_test.php",function(data,status){
        alert("数据: " + data + "\n状态: " + status);
});

请求 "test.php"，但是忽略返回结果：
 $.get("test.php");

请求 "test.php" 并连同请求发送一些额外的数据（忽略返回结果）：
 $.get("test.php", { name:"Donald", town:"Ducktown" });

请求 "test.php" 并传递数据数组到服务器（忽略返回结果）：
 $.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });

请求 "test.php" 并提醒请求的结果：
 $.get("test.php", function(data){
 alert("Data: " + data);
 });

(4)post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。 语法：$.post(URL,data,callback)


(5) getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据。
$.getJSON("demo_ajax_json.js",function(result){

});

(6)  使用 Ajax 来获取JavaScript脚本并执行
$("button").click(function(){
    $.getScript("demo_ajax_script.js");
});

(7) param() 方法创建数组或对象的序列化表示形式。

    序列化对象
   

(8) serialize() 方法通过序列化表单值创建 URL 编码文本字符串。

    First name:

    Last name:

$("button").click(function(){
    $("div").text($("form").serialize());//FirstName=Mickey&LastName=Mouse
});

(9) serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。
$("button").click(function(){
    x=$("form").serializeArray();
    $.each(x, function(i, field){
      $("#results").append(field.name + ":" + field.value + " ");//FirstName:Mickey LastName:Mouse
    });
});