jQuery与Ajax的应用

发表于 | 分类于 |
字数统计: 935 | 阅读时长 ≈ 3

Ajax的优势和不足

  • 优势：
  1. 不需要插件支持
  2. 在不刷新整个页面的前提下更新数据
  3. 通过XMLHttpRequest对象向服务器端提交希望提交的数据，按需发送
  4. 减轻服务器和带宽的压力
  • 不足：

1.开发难度大
2.破坏浏览器的前进，后退
3.对搜素引擎的支持不足
4.开发和调试工具缺乏

核心是XMLHttpRequest对象，通过它发送异步请求，接收响应及执行回调

load()方法

通常用来从web服务器上获取静态的数据文件

  • 载入HTML文档
    使用jQuery选择器为HTML片段指定目标位置，然后将要加载的文件的URL作为参数传递给load()方法

    1
    2
    3
    4
    5
     $(function() {
                $("#send").click(function() {
                    $("#resText").load("test.html")
                })
            })

  • 筛选载入的HTML文档
    第一个参数，即URL：“url selector”URL和选择器中间有一个空格
    $("#resText").load("test.html .para")

  • 传递方式
    根据第二个参数决定。没有采取GET方式传递；有的话采取POST方式。

  • 回调参数
    第三个参数。在load()方法中，无论Ajax请求是否成功，只要当请求完成（complete）后，回调函数（callback）就会被触发。

$.get()和$.post()方法

用来传递一些参数给服务器中的页面

参数名称 类型 说明
url String 请求的HTML页的URL地址
data(可选) object 发送至服务器的key/value数据作为querystring附加到请求URL中
callback(可选) function response的返回状态为success才调用该回调函数
type(可选) string 服务器端返回内容的格式，包括xml,html,script,json,text和_default

区别：
get请求会将参数跟在url后进行传递，而post请求则是作为HTTP消息的实体内容发给web服务器
get方式对传输的数据大小有限制（不能大于2kb）
get方式请求的数据会被浏览器缓存起来，其他人可以读到，不安全
传递的数据在服务器端的获取也不相同。PHP中用$_GET[]获取，而post用$_POST[]获取。二者都可以通过$_REQUEST[]获取。

  • $.getScript()方法用来加载.js文件
  • $.getJSON()方法用来加载JSON文件

$.ajax()方法

是jQuery最底层的Ajax实现。只有一个参数。
这个方法可以替代前面的所有方法。

  • 替代$.getScript()方法 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $(function () {
          $('#send').click(function () {
            $.ajax({
              type: "GET",
              url: "test.js",
              dataType: "script"
            });
          });
        })

  • 代替$.getJSON()方法 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    $(function(){
            $('#send').click(function() {
                $.ajax({
                  type: "GET",
                  url: "test.json",
                  dataType: "json",
                  success : function(data){
                         $('#resText').empty();
                          var html = '';
                          $.each( data  , function(commentIndex, comment) {
                              html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
                          })
                         $('#resText').html(html);
                  }
                }); 
            });
       })

serialize()方法

序列化元素，与其他jQuery中的其他方法一样，它也是作用于一个jQuery对象，能够将DOM元素内容序列化为字符串。

serializeArray()方法

不是返回字符串，将DOM序列化之后，返回JSON格式的数据　　

$.param()方法

是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化 

1
2
3
4
5
$(function(){
        var obj={a:1,b:2,c:3};
        var  k  = $.param(obj);
        alert(k)        // 输出  a=1&b=2&c=3
    })

Ajax全局事件

方法名称 说明
ajaxComplete(callback) Ajax请求完成时执行的函数
ajaxError(callback) Ajax请求发生错误的时候执行，捕捉到的错误作为最后一个参数传递
ajaxSend(callback) Ajax请求发送前执行的函数
ajaxSuccess(callback) Ajax请求成功时执行的函数

要想使某个Ajax请求不受全局的影响，在使用$.ajax(options)方法时，将参数中的global设置为false 

1
2
3
4
$.ajax({
    url: "test.html",
    global: false
    });