一、jQuery中的ajax
1. 封装第一层 - 类似于原生ajax的用法
$ajax
2. 封装第二层 - 基于第一层再次封装
$().load();
$.post();
$.get();
3. 封装的第三层 - 特殊用法
$.getScript(); - 动态读取脚本(js代码)
$.getJson(); - 接收json格式数据
二、load(url,data,callback)方法
1. 最简单、局限性最大
url - 设置ajax的请求地址
data - 设置ajax的请求数据
要求为key:value格式,其实就是js的对象格式
callback: ajax请求成功后的回调函数
回调函数的参数就是服务器返回的数据
2. 服务器响应的数据自动写入调用load方法的属性中
3. load()方法的请求类型
1)没有请求数据时,请求类型是GET
2) 发送请求数据时,请求类型是POST
4. load()方法接受服务器端的响应数据
是以字符串类型(HTML格式)来接受
三、get/post()方法
1. get(url,data,callback,type)
1. 参数
url - 设置ajax的请求地址
data - 设置ajax的请求数据
要求为key:value格式,其实就是js的对象格式
callback: ajax请求成功后的回调函数
回调函数的参数就是服务器返回的数据
type:设置服务器端响应的数据格式
默认值为HTML,还可以为xml/json
2. 无论是否发送请求数据,请求类型都是GET
3. $.get()方法可以接受HTML/XML/JSON格式
2. post(url,data,callback,type)
使用方式跟get一模一样
四、$.ajax(options)方法
1. options的格式是{key:value}
2. url:请求地址
3. type:请求类型,默认为get
4. async:是否异步,默认为true
5. contentType POST方式发送数据的前提
默认值为application/x-www-form-urlencoded
6. data:请求数据,格式必须为key=value
7. success:请求成功后的回调函数
function(data,textStatus)
data - 服务器响应的内容
textStatus - 表示ajax请求的状态,此时的值为success
8. error:请求失败后的回调函数
function(XMLHttpRequest,textStatus,errorThrown)
XMLHttpRequest - ajax的核心对象
errorThrown - 错误异常信息
textStatus - 表示ajax请求的状态
error/timeout/notmodified
9. dataType:数据响应格式
HTML/XML/JSON
五、使用$.getScript(url,calback)动态读取脚本
1. 若JS代码过多时,会影响HTML页面加载的速度,如果已被加载的JS代码并不是立即执行,只加载马上执行的js代码,会提交效率
2. 参数
url - 读取脚本的地址(本地或服务器)
calback - 回调函数
六、表单的Ajax异步提交 -
1. 表单的序列化
1)serialize() 返回的是json字符串
使用表单元素的name属性值
{key:value}
2)serializeArray() 返回的是json对象
json对象由一个对象数组组成
[obj1,obj2,obj3,...]
注意:
表单必须要有name属性
2. jQuery.form插件
1)实现表单的异步提交,底层机制,还是使用正常的表单提交机制
2)两个核心方法 - 参数既是一个option参数
ajaxForm(options)方法
ajaxForm()不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit(option)方法
ajaxSubmit()马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
3) 参数
target 服务器返回内容所存放的元素ID
beforeSubmit 提交前回调函数,如果返回false,则不提交
success 提交后的回调函数,一般有两个参数responseText,statusText
url 默认是form的action,如果声明,则覆盖
type 默认是form的method,如果声明,则覆盖
dataType html(默认),xml,script,json….接受服务端返回的类型
clearForm 布尔值,成功提交后,是否清除所有表单元素值
resetForm 布尔值,成功提交后,是否重置所有表单元素值
timeout 限制请求时间,大于该时间后则跳出请求
3. 表单异步提交的方式
1)不使用submit按钮,而是使用button按钮,通过绑定click事件,实现提交
表单的序列化
表单的异步提交
2) (常用)依旧使用submit事件,在form元素中绑定onsubmit事件,在onsubmit事件的处理函数中要做如下事情
表单的序列化
表单的异步提交
组织表单的默认行为
七、getJson()方法 - 可以实现跨域提交
1. 什么叫做跨域
跨域:
完全跨域 - IP不同
跨子域 - IP相同,但端口号不同
域名:
顶级域名 - http://www.baidu.com
二级域名 - http://www.baidu.com/kongjian
万维网协议:
默认是不允许跨域请求的
服务器那边返回的是一个函数字符串
$.getJson("url?callback=?",function(data){
})