经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery中的Ajax
来源:cnblogs  作者:南城北斋  时间:2020/12/8 9:05:18  对本文有异议

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

AJAX工具函数
为什么需要AJAX工具函数:

  • 之前每次发判断请求,如果请求方式,或者参数或者url不一样,那么代码无法复用,所以我们迫切的需要一个通用函数,让用户在使用异步对象的时候通过调用一个相同的函数就可以实现需求
  • 总之:为了提升我们的开发效率,我们自已将XMLHttpRequest封装成一个函数。

关键点:

  • 找到操作的共同点
  • 找到不同的部分--参数

不同部分:

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

函数的封装形式:

  1. var $ = {
  2. ajax:function(option){
  3. // 实现具体的业务处理
  4. }
  5. }

代码实现:

  1. var $ = {
  2. //传入对象
  3. ajax:function(option){
  4. // 实现具体的业务处理
  5. var xhr = new XMLHttpRequest()
  6. // 接收参数
  7. var type= option.type || 'get'
  8. // location.pathname:当前页面的全路径
  9. var url = option.url || location.pathname
  10. var data = option.data || ''
  11. var dataType = option.dataType || 'text/html'
  12. var success = option.success
  13. // 发送请求
  14. // 设置请求行:get如果有参数就需要拼接在url后面,post不用拼接
  15. if(type == 'get'){
  16. url = url + "?" + data
  17. data = null
  18. }
  19. xhr.open(type,url)
  20. // 设置请求头:get方式不需要设置请求头,post方式需要设置Content-Type
  21. if(type == 'post'){
  22. xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
  23. }
  24. // 设置请求体:如果有参数,post方式在请求体中传递参数
  25. xhr.send(data)
  26. // 接收响应
  27. xhr.onload = function(){
  28. // 调用回调
  29. success && success(this.response)
  30. }
  31. }
  32. }

由以上封装的函数,可以看出在客户端每次发判断请求: 不同方式的请求,不同参数,不同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)

原文链接:http://www.cnblogs.com/xjs-hp/p/14032637.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号