锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用

1、Ajax 的XMLHttpRequest 对象

XMLHttpRequest 是Ajax 的核心，它是Ajax
实现的关键---发送异步请求、接受响应及执行回调都是通过它来完成的。XMLHttpRequest最早是在Microsoft Internet
Explorer  5.0  ActiveX 组件中被引用的。

2、JQuery 中的Ajax

jQuery 对Ajax
进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第二层是load()、$.load()和$.post()方法，第三层是$.getScript()和$.getJSON()方法。

2.1  load() 方法

结构：load（url [,data] [,callback]）

参数解释：                                                                        
load（）方法参数解释

传递方式：load（）方法的传递方式根据参数data来自动制定，如果没有参数传递，则采取GET方式传递；反之，则会自动转换为POST方式。

回调函数：load（）提供了回调函数（callback），该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码

如下：

?

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

2.2.1 $.get()

结构：$.get（url [,data] [,callback] [,type]）

参数解释：                                                                 $.get()方法参数解释

代码示例：

     $("#send") .click(function(){

       $.get("get1.php",{username:"张三"}，function（data，textStatus）{

              // data   : 返回的内容，可以是XML文档，JSON文件、Html片段等等 。

          //textStatus :请求状态：success、error、notmodified、timeout。

                        },type);

});
 
  //data参数请求返回的内容，只有当textStatus 是success，才被调用这与load方法不同

2.2.1
$.post()       
              
用法和  $.get()相同，不过他们仍然有以下区别。

• • • GET 请求会将参数跟在URL后进行传递，而POST请求则作为HTTP消息的实体内容发送给Web服务器。
    
    
    • GET方式对传输的数据大小有限制（通常不能超过2KB），而POST方式传递的数据量要比GET大得多。（理论上不受限制）
    
    
    • GET方式请求的数据会被浏览器缓存起来，而POST 相对来说可以避免这些问题。
    
    
    • GET和POST方式传递的数据在服务器端的获取也不相同

2.3 $getScript()
方法和$.getJson()方法 ----没有整理耶。

2.4 $.ajax()方法

结构：$.ajax(options)

参数详解：

2.5 序列化元素

2.5.1 serialize()方法

示例：表单HTML代码如下：

<form id="form1" action="#">

  <p>评论：</p>

  <p>姓名：<input type="text" name="username" id="username"/></p>

  <p>内同：<input type="text" name="content" id="content"/></p>

  <p><input type="button" id="send" value="提交"/></p>

</form>

HTML代码

为了获取姓名和内容，必须将字段的逐个添加到data参数中。代码如下：

$("#send").click(function(){

  $.get("get1.php",{

         username:$("#username").val(),

         content:$("#content").val()

       },function(data,textStatus){

             ////执行代码

         } )

}) 

这种方式在少量字段的表单中，勉强还可以使用，但如果表单复杂，这种就会添加工作量。而serialize()则可以解决这些问题，只需要把刚刚的代码改为如下：

$("#send").click(function(){

  $.get("get1.php",$("#form1").serialize(),function(data,textStatus){

             ////执行代码

         } )

}) 

锋利jQuery 学习整理之 第六章 jQuery 与Ajax 的应用,布布扣,bubuko.com