Jquery中的Ajax

时间:2022-03-26 00:06:51

AJAX:
* jQuery中的Ajax
* 封装第一层 - 类似于原生Ajax的用法
* $.ajax() - 最复杂
* 选项
* url - 请求地址
* type - 请求类型,默认为GET
* async - 是否异步,默认为true
* data - 请求数据,格式为key:value
* dataType - 响应数据格式
* HTML格式
* XML格式
* JSON格式
* success - 请求成功后的回调函数
function(data,textStatus){}
* data - 响应数据内容
* textStatus - success,请求状态
* error - 请求失败后的回调函数
function(XMLHttpRequest,textStatus,errorThrown){}
* XMLHttpRequest - Ajax的核心对象
* textStatus - 请求状态
* error、timeout及notmodified等
* errorThrown - 错误异常信息
* 封装第二层 - 基于第一层再次封装
* $().load(url,data,callback) - 最简单、局限性最大
* 参数
* url - 设置当前Ajax的请求地址
* data - 设置当前Ajax的请求数据
* 格式要求为key:value,构建Object即可
* callback - Ajax请求成功后的回调函数
* 该回调函数的形参(data),表示服务器端响应的数据内容
* 问题
* 请求类型由是否发送请求数据决定
* 没有发送请求数据时,请求类型为GET
* 如果发送请求数据时,请求类型为POST
* 默认接收服务器端的数据内容
* 是以字符串类型(HTML格式)进行接收
* 无法使用XML格式或JSON格式
* $.get(url,data,callback,type) - 请求类型是GET
* 参数
* url - 设置当前Ajax的请求地址
* data - 设置当前Ajax的请求数据
* 格式要求为key:value,构建Object即可
* callback - Ajax请求成功后的回调函数
* 该回调函数的形参(data),表示服务器端响应的数据内容
* type - 设置服务器端响应数据的格式
* 默认值 - HTML格式
* xml - XML格式
* json - JSON格式
* $.post() - 请求类型是POST
* 使用方式与$.get()方法一致
* 封装第三层 - 特殊用法
* $.getScript(url,callback) - 动态读取脚本(JavaScript代码)
* url - 读取脚本的地址(本地或服务器)
* callback - 读取成功后的回调函数
* $.getJSON() - 接收JSON格式数据
* 表单的Ajax异步请求
* 表单的序列化
* serialize()方法
* 返回JSON字符串
* 格式 - {key:value,key:value,..}
* serializeArray()方法
* 返回JSON对象
* 格式 - [obj1,obj2,obj3,...]
* 注意
* 表单元素必须具有name属性值
* jQuery.form插件
* 作用 - 实现表单的异步提交
* 两个核心方法
* ajaxForm()方法
* ajaxSubmit()方法 - 使用Ajax异步提交表单
* 底层机制
* 表单提交机制
* 表单异步提交的方式
* 不再使用submit按钮,而是使用button按钮
* 通过为button按钮绑定click事件
* 表单的序列化
* 表单的异步提交
* (常用)依旧使用submit按钮
* 在<form>元素绑定onsubmit事件
* 在onsubmit事件的处理函数中
* 表单的序列化
* 表单的异步提交
* 阻止表单默认行为(return false)
* 跨域请求 - $.getJSON()方法
* 跨域
* 完全跨域 - IP不同
* http://www.baidu.com
* http://www.tedu.cn
* 跨子域 - IP相同,但端口号不同
* http://127.0.0.1:8888
* http://127.0.0.1:9999
* 域名
* *域名
* http://www.baidu.com
* 二级域名
* http://wenku.baidu.com
* http://www.baidu.com/kongjian
* 万维网协议
* 默认是不允许跨域请求的
* 实现跨域
* Cookie
* 基本内容
* 浏览器的缓存
* 存储在浏览器内存中
* 关闭浏览器(窗口)后,数据会被自动销毁
* 存储在用户电脑硬盘中
* 关闭浏览器(窗口)后,数据不会被销毁
* Cookie(小甜饼)
* 缓存文件 - 一些用户数据存储在此
* 问题
* 用户数据是以明码(明文)来存储的
* Cookie谁都可以读取
* A网站生成的Cookie文件,归属到百度
* 如何操作操作
* 读取Cookie - 将用户名或密码从Cookie读取
* document.cookie
* 写入Cookie - 将用户名或密码写入到Cookie文件
* 格式 - key=value;expires=时间
* document.cookie