6 Ajax

jQuery

6.5.1 load()方法

1、载入HTML文档
能够远程载入HTML代码并且插入DOM中，语法：

load( url[,data][,callback]);

参数：

(function(){
    $("#button").bind("click",function(){
        $("#text").load("example.html");
    })
   })();

上面这个方法会将获取到的内容直接插入到ID为text的元素中。load方法相当远将常规的Ajax请求和数据的插入封装到一个方法里面，使得这个过程更加简单。

2、筛选在载入的HTML
直接在URL后面加上筛选要筛选的内容的选择器就可以实现内容的筛选，获取到的内容包括所有的符合过滤器条件的内容。
基本语法：URL selector
selector支持元素符号、类名和ID名

(function(){
    $("#button").bind("click",function(){
        $("#text").load("example.html h3");
    })
   })();

3、传递方式
如果load没有传入data参数，那么默认是使用get方法发送请求，如果传入了参数，那么就会使用post向服务器发送请求

4、回调函数

callback函数有三个参数：

• responseText：请求返回的内容
• textStatus：请求状态，具体有：success、error、notmodified、timeout
• XMLHttpRequest：XMLHttpRequest对象

在load方法中，无论请求是否成功，只要请求完成后，就会调用回调函数

6.5.2 $.get()和$.post()

$.get()和$.post()都是jQuery的全局函数

1、$.get()
使用get方式来发送异步请求，语法：

$.get(url[,data][,callback][,type]);

参数解释如下：

data是通过get方法返回的数据，也就是文件的内容
callback的格式为：function(data,textStatus){ do something}

• data：请求成功时服务器返回的内容，可以是XML文档、JSON文档和HTML片段等
• textStatus：请求状态：success、error、notmodified、timeout四种
  回调函数只有当数据成功返回后才被调用

<form>
    <p>评论:</p>
    <p>姓名:<input type="text" name="text" id="name"></p>
    <p>内容:<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
    <p><input type="button" name="button" id="button"></p>
</form>
<div><p>已有评论：</p></div>
<div id="command"></div>
//
<script type="text/javascript">
  (function () {
      $("#button").click(function(){
        $.get("command.txt",{
            username:$("#name").val(),
            content:$("#content").val()
        },function(data,textStatus){
            if(textStatus == "success"){
                console.log(data);
                $("#command").html(data);
            } else{
                console.log("fail");
            }
        });
      });
  })();
</script>
//返回结果
这是一篇测试文章

2、$.post()
post方法和get方法的一些区别：

• get请求将参数跟在URL后面进行传递，而post请求则是作为HTTP消息的实体内容发给web服务器
• get方法对传输的数据的大小有限制（通常不大于2KB），但是post理论上对于传输的数据没有限制
• get方式请求的数据会被浏览器缓存起来，post方式不会
• get和post两种方式传递的数据在服务端的获取方式不一样。

6.5.3 $.getScript()和$.getJson()

1、$.getScript()
语法：$.getScript(url,callback);
直接加载js文件，同时执行js文件，回调函数在js文件成功载入后运行
例如，可以在触发某个事件之后加载并且执行某个js文件

$(function(){
   $("#id").click(function(){
      $.getScript("example.js");
   });
});

2、$.getJson()
用法和getScript()方法一样，允许传入回调函数来执行某些操作。

6.5.4 $.ajax()

语法：$.ajax(options)

6.6 序列化元素

1、serialize()方法
将DOM元素的内容序列化为URL字符串，用于Ajax请求。

$("form").serialize();
//
text=zhengpq&content=zhengpq

2、serializeArray()
将DOM元素序列化后返回JSON合适的数据

$("form").serializeArray();
//
{{name: "text", value: "zhengpq"},{name: "text", value: "zhengpq"}}

3、param()
对一个数组或者是对象按照key/value进行序列化

6.7 Ajax全局函数