面试 | Ajax进阶—JQuery中的Ajax

作者 : 开心源码 本文共1129个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共112人阅读

我们都知道在原生js中,需要用Ajax异步请求,就必需要手写一段取得XMLHttpRequest对象的函数,开始写几次十几次还是可以当练练手写代码的可以力,
然而你每个项目都需要去写得时候你就会觉得很痛苦。而且原生js代码写Ajax还有几个属性个API你是少不了的!

例如:
open() – 请求方式(get/post)和写入请求到那个php中。
setRequestHeader() – 假如你选择的请求方式为post,还要写一段坑爹的字符串参数(“Content-Type”,”application/x-www-form-urlencoded”)
send() – 假如你选择的请求方式是get,参数则为null,假如选择的是post,参数格式是”key=value”
onreadystatechange – 事件,当服务器端的状态改变时,会触发该事件
对应的服务器端状态属性
readyState – 请求状态(0-4)
status – 状态码

每一次的请求都需要写这一坨代码,简直是恶心,但是我们有jQuery这一个功可以强大的js库,可以帮我们省去了很多代码,我们来看看jQuery中有哪些API可以
让我们快捷的用Ajax

主要的API有六个:
$.ajax()
$().load()
$.get()
$.post()
$.getscript()
$.getJSON()

由于本贴吧没有php的运行环境,所以只可以看代码自己去了解的去看少量jQuery手册,综合去自己联络

首先是第一个API,$.ajax()

这是一个参数最多最复杂的一个API

image

第二个API,$().load()
这个API能说是最简单的一个API,但用范围很受限制
注意

    • 服务器端响应的数据自动写入到<div>元素
    • 现象的起因 – div元素调使用load()方法
    • load()方法的请求类型
    • 没有请求数据时,请求类型是GET
    • 发送请求数据时,请求类型是POST
    • load()方法的请求类型由能否发送请求数据来决定
    • load()方法接收服务器端的响应数据
    • 是以字符串类型(HTML格式)来接收

image

第三第四个API的用方式一样,所以只举例其中一个,$.get()
注意:

  • 和$().load()不同的是能选择什么样的请求方式
  • dataType有三种不同的格式
    • 默认html
    • xml – XML格式
    • json – JSON格式
  • data – 可选,设置当前Ajax请求的数据
    • 格式必需是key/value格式
  • data – 可选,设置当前Ajax请求的数据
  • callback – 可选,当前Ajax请求成功后的回调函数
    • 该回调函数的形参(data)就是服务器端响应的数据内容
    • callback中的data的形成在这个API中返回的直接是Object{key:value}这样的格式

image

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 面试 | Ajax进阶—JQuery中的Ajax

发表回复