AJAX笔记（三）用jQuery实现异步请求

布满荆棘的人生 2022-04-10 05:54 331阅读 0赞

1、封装第一层 - 类似于原生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 - 错误异常信息

2、封装第二层 - 基于第一层再次封装

$().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()方法一致

3、封装第三层 - 特殊用法

$.getScript(url,callback) - 动态读取脚本(JavaScript代码)

url - 读取脚本的地址(本地或服务器)

callback - 读取成功后的回调函数

$.getJSON() - 接收JSON格式数据

4、表单的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)

5、跨域请求 - $.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

万维网协议

默认是不允许跨域请求的

5、Cookie

基本内容

浏览器的缓存

存储在浏览器内存中

关闭浏览器(窗口)后,数据会被自动销毁

存储在用户电脑硬盘中

关闭浏览器(窗口)后,数据不会被销毁

Cookie(小甜饼)

缓存文件 - 一些用户数据存储在此

问题

用户数据是以明码(明文)来存储的

Cookie谁都可以读取

A网站生成的Cookie文件,归属到百度

如何操作操作

读取Cookie - 将用户名或密码从Cookie读取

document.cookie

写入Cookie - 将用户名或密码写入到Cookie文件

格式 - key=value;expires=时间

document.cookie

AJAX笔记（三）用jQuery实现异步请求

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关异步请求-AJAX

相关 ajax--异步请求

相关异步请求Ajax

相关 Ajax 异步请求（登录案例实现 + ajax实现二级联动）

相关 jquery发起get,post,ajax网络请求,同步异步请求

相关 jQuery中ajax异步请求造成的问题

相关 AJAX 异步请求

相关 ajax异步请求

相关 AJAX笔记（三）用jQuery实现异步请求

相关 JQuery使用$.ajax()实现异步请求