jQuery中的ajax

一、jQuery中的ajax

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

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

      $().load(); 
      $.post();
      $.get();
  1. 封装的第三层 - 特殊用法
      $.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一模一样

四、$.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

推荐阅读更多精彩内容

  • 标签(空格分隔): ajax 用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代...
    lvyweb阅读 397评论 0 0
  • jQuery中的ajax 封装第一层 - 类似于原生ajax的用法$ajax 封装第二层 - 基于第一层再次封装$...
    不住海边也喜欢浪阅读 89评论 0 0
  • 用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很...
    Bbigbug阅读 176评论 0 5
  • 1. load( url, [data], [callback] ) Returns: jQuery包装集 说明:...
    一纸晴空阅读 45评论 0 1
  • 一、jQuery中的ajax 封装第一层 - 类似于原生ajax的用法$ajax 封装第二层 - 基于第一层再次封...
    Alone灬旅途阅读 24评论 0 0