jQuery中的Ajax

jQuery中的ajax

1. 封装第一层 - 类似于原生ajax的用法

   $ajax
   

2. 封装第二层 - 基于第一层再次封装

   $().load(); 
   $.post();
   $.get();
   

3. 封装的第三层 - 特殊用法

   $.getScript(); - 动态读取脚本(js代码)
   $.getJson();  - 接收json格式数据
   

• load(url,data,callback)方法

  1. 最简单、局限性最大

     url - 设置ajax的请求地址
     
     data - 设置ajax的请求数据
     要求为key:value格式，其实就是js的对象格式
     
     callback: ajax请求成功后的回调函数
     回调函数的参数就是服务器返回的数据
     

  2. 服务器响应的数据自动写入调用load方法的属性中

  3. load()方法的请求类型

     1）没有请求数据时，请求类型是GET

     2. 发送请求数据时，请求类型是POST

  4. load()方法接受服务器端的响应数据
     是以字符串类型(HTML格式)来接受

• get/post()方法

  1. get(url,data,callback,type)

     1）参数

         url - 设置ajax的请求地址
     
      data - 设置ajax的请求数据
     
           要求为key:value格式，其实就是js的对象格式
     
         callback: ajax请求成功后的回调函数
     
           回调函数的参数就是服务器返回的数据
     
      type:设置服务器端响应的数据格式
     
           默认值为HTML，还可以为xml/json
     

     2）无论是否发送请求数据，请求类型都是GET

     3）$.get()方法可以接受HTML/XML/JSON格式

  2. post(url,data,callback,type)

     使用方式跟get一模一样get/post()方法

• $.ajax(options)方法

  1. options的格式是{key:value}

  2. url:请求地址

  3. type:请求类型，默认为get

  4. async:是否异步，默认为true

  5. contentType POST方式发送数据的前提

     默认值为application/x-www-form-urlencoded

  6. data:请求数据，格式必须为key=value

  7. success:请求成功后的回调函数

      function(data,textStatus)
     
      data - 服务器响应的内容
     
      textStatus - 表示ajax请求的状态，此时的值为success
     

  8. error:请求失败后的回调函数

      function(XMLHttpRequest,textStatus,errorThrown)
     
      XMLHttpRequest - ajax的核心对象
     
      errorThrown - 错误异常信息
     
      textStatus - 表示ajax请求的状态
     
        error/timeout/notmodified
     

  9. dataType:数据响应格式

      HTML/XML/JSON