AJAX方法

学习Ajax技术的一些速记

XMLHttpRequest

简称:

• XHR

方法

• open初始化
• send发送
• setRequestHeader Content-type

属性

• onreadystatechange
• redayState
• status
• responseText

🔢四步走速记：

1.创建XMLHttpRequests

2.使用open方法，初始化请求参数

3.使用send方法，发送请求

4.使用onreadystatechange属性，接收返回数据

客户端（浏览器）

• 四步走发送Ajax请求
• open(method，url，async)
• setRequestHeader("Content-type","application/x-www-from-unlencoded")
• send(param)
• readyState：4
• status：200

📡服务器

• 接收请求
• 返回数据

跨域请求

🛢️同源策略

• 浏览器的安全策略
• 协议名+主机号+端口号

例如

https://www.huawei.com 与 http://www.huawei.com (跨域)

https://www.huawei.com 与 http://www.huaweicloud.com (跨域)

https://www.huawei.com 与 https://www.huawei.com:81 (跨域)

⛰️跨域请求

• 跨域的方法：JSONP、Proxy、iframe、CORS
• 天然可以跨域的标签：script(img、link)

jquery中的ajax

🗝️Get方法

• $.get(url,data,callback,type）
• url是请求的接口地址
• data是请求的参数
• callback是请求成功返回的回调函数
• type是请求返回数据的格式
• 除了rul，其它三个参数如果没有可以省略

注意的地方：

• 请求参数的格式可以是json对象，也可以是字符串
• 返回的数据格式可以是:JSON、HTML、Script、XML、Text等

🔑Post方法

• $.post(url,data,callback,type)
• url是请求的接口地址
• data是请求的参数
• callback是请求成功时的回调函数
• type是请求返回数据的格式
• 除了url，其它三个参数如果没有可以省略

注意：

• post请求发出去的时候请求参数是放在请求体中

ajax方法

🔎ajax方法语法格式

• $.ajax(option)
• option是json格式的配置参数，用于设置ajax请求

⚙️常用配置

• url发送请求的地址
• type:请求方式(get or post等)
• data:请求参数
• dataType:返回的数据类型(json、html、xml等)
• success：请求成功返回的回调函数
• error：请求失败后的回调函数
• complete：请求完成后的回调函数(无论成功与否都会执行)

🪧布尔类型的配置

• async：是否为异步请求（默认为true）
• cache：是否进行缓存（主要针对get请求）

容易被忽视的配置项

• timeout：请求超时时间（毫秒）