jQuery中的Ajax

  • A+
所属分类：Web前端
摘要

学习jQuery中的Ajax 前需要先认识其如何封装的AJAX工具函数
为什么需要AJAX工具函数:
便宜好用的国外VPS推荐

学习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）

便宜好用的国外VPS推荐