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一模一样

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

五、使用$.getScript(url,calback)动态读取脚本

1. 若JS代码过多时，会影响HTML页面加载的速度，如果已被加载的JS代码并不是立即执行，只加载马上执行的js代码，会提交效率

2. 参数

 url - 读取脚本的地址(本地或服务器)
 calback - 回调函数

六、表单的Ajax异步提交 -

1. 表单的序列化

  1）serialize() 返回的是json字符串

     使用表单元素的name属性值
     {key:value}

  2）serializeArray() 返回的是json对象

     json对象由一个对象数组组成
     [obj1,obj2,obj3,...]

  注意：

   表单必须要有name属性

2. jQuery.form插件

   1）实现表单的异步提交，底层机制，还是使用正常的表单提交机制

   2）两个核心方法 - 参数既是一个option参数
      ajaxForm(options)方法
        
         ajaxForm()不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始 

      ajaxSubmit(option)方法

          ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。 
        

   3) 参数

          target  服务器返回内容所存放的元素ID

          beforeSubmit  提交前回调函数，如果返回false，则不提交

          success 提交后的回调函数，一般有两个参数responseText,statusText

          url 默认是form的action，如果声明，则覆盖

          type  默认是form的method，如果声明，则覆盖

          dataType  html(默认),xml,script,json….接受服务端返回的类型

          clearForm 布尔值，成功提交后，是否清除所有表单元素值

          resetForm 布尔值，成功提交后，是否重置所有表单元素值
          
          timeout 限制请求时间，大于该时间后则跳出请求

3. 表单异步提交的方式

   1）不使用submit按钮，而是使用button按钮，通过绑定click事件，实现提交
      
      表单的序列化
      表单的异步提交

   2) (常用)依旧使用submit事件，在form元素中绑定onsubmit事件，在onsubmit事件的处理函数中要做如下事情

       表单的序列化
       表单的异步提交
       组织表单的默认行为

七、getJson()方法 - 可以实现跨域提交

1. 什么叫做跨域

 跨域：

    完全跨域 - IP不同
    跨子域 - IP相同，但端口号不同

 域名：

    顶级域名 - http://www.baidu.com

    二级域名 - http://www.baidu.com/kongjian

 万维网协议：

     默认是不允许跨域请求的

  服务器那边返回的是一个函数字符串
  $.getJson("url?callback=?",function(data){


  })