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

标签：c   style   class   blog   code   java   

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

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

标签：c   style   class   blog   code   java   

原文地址：http://www.cnblogs.com/whitebai/p/3772260.html