美文网首页
jQuery中的ajax

jQuery中的ajax

作者: lililifeng | 来源:发表于2016-12-30 20:25 被阅读0次

    一、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

    相关文章

      网友评论

          本文标题:jQuery中的ajax

          本文链接:https://www.haomeiwen.com/subject/xwzmvttx.html