面试 | Ajax进阶---JQuery中的Ajax

我们都知道在原生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