jQuery中的Ajax

学习jQuery中的Ajax 前须要先认识其如何封装的

AJAX工具函数
为何须要AJAX工具函数:

• 以前每次发判断请求，若是请求方式，或者参数或者url不同，那么代码没法复用，因此咱们迫切的须要一个通用函数，让用户在使用异步对象的时候经过调用一个相同的函数就能够实现需求
• 总之：为了提高咱们的开发效率，咱们自已将XMLHttpRequest封装成一个函数。

关键点:

• 找到操做的共同点
• 找到不一样的部分--参数

不一样部分:

• 请求方式：type
• 请求url:url
• 请求参数不同:data
• 数据的转换方式--返回数据的格式:dataType
• 对于数据的处理方式不同: success: 这是一个回调函数

函数的封装形式：

var $ = {
    ajax:function(option){
        // 实现具体的业务处理
  }
}

代码实现:

var $ = {
    //传入对象
    ajax:function(option){
        // 实现具体的业务处理
        var xhr = new XMLHttpRequest()

        // 接收参数
        var type= option.type || 'get'
        // location.pathname:当前页面的全路径
        var url = option.url || location.pathname
        var data = option.data || ''
        var dataType = option.dataType || 'text/html'
        var success = option.success

        // 发送请求
        // 设置请求行：get若是有参数就须要拼接在url后面，post不用拼接
        if(type == 'get'){
            url = url + "?" + data
            data = null
        }
        xhr.open(type,url)
        // 设置请求头：get方式不须要设置请求头，post方式须要设置Content-Type
        if(type == 'post'){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        }
        // 设置请求体:若是有参数，post方式在请求体中传递参数
        xhr.send(data)

        // 接收响应
        xhr.onload = function(){
            // 调用回调
            success && success(this.response)
        }
    }
}

由以上封装的函数,能够看出在客户端每次发判断请求: 不一样方式的请求,不一样参数,不一样url,只要用以上的函数传入所需的参数便可获得结果,作到了代码的复用,使代码更简洁.提高了开发效率.

而在jQuery中已经封装好了以上所需的功能:

$.ajax({}) 可配置方式发起Ajax请求

• url 接口地址 *
  (
  类型：String
  默认值: 当前页地址。发送请求的地址。
  )

• type 请求方式 *
  (
  类型：String
  默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可使用，但仅部分浏览器支持。
  )

• timeout 请求超时
  (
  类型：Number
  设置请求超时时间（毫秒）。此设置将覆盖全局设置。
  )

• dataType 服务器返回格式 *
  (
  类型：String
  预期服务器返回的数据类型。若是不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，好比 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。
  随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
  "xml": 返回 XML 文档，可用 jQuery 处理。
  "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，全部 POST 请求都将转为 GET 请求。（由于将使用 DOM 的 script标签来加载）
  "json": 返回 JSON 数据 。
  "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  "text": 返回纯文本字符串
  )

• data 发送请求数据 *
  (
  类型：String
  发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。
  必须为 Key/Value 格式。若是为数组，jQuery 将自动为不一样值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
  )

• beforeSend:function () {} 请求发起前调用 *
  (
  类型：Function
  发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
  XMLHttpRequest 对象是惟一的参数。
  这是一个 Ajax 事件。若是返回 false 能够取消本次 ajax 请求。
  )

• success 成功响应后调用 *
  (
  类型：Function
  请求成功后的回调函数。
  参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
  这是一个 Ajax 事件。
  )

• error 错误响应时调用
  (
  类型：Function
  默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
  有如下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
  若是发生了错误，错误信息（第二个参数）除了获得 null 以外，还多是 "timeout", "error", "notmodified" 和 "parsererror"。
  这是一个 Ajax 事件。
  )

• complete 响应完成时调用（包括成功和失败） *
  (
  类型：Function
  请求完成后回调函数 (请求成功或失败以后均调用)
  参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
  这是一个 Ajax 事件。
  )

• $.get(url,data,callback,dataType) 以GET方式发起Ajax请求

• $.post(url,data,callback,dataType) 以POST方式发起Ajax请求

• $('form').serialize()序列化表单（即格式化key=val&key=val）