什么是Ajax?
ajax 的全称 Asynchronous JavaScript and XML (异步 JavaScript 和 XML)。
ajax 是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的XMLHttpRequest 对象,是这个对象使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。实现了在页面不刷新的情况下和服务器进行交互。
方法如下:
new XMLHttpRequest()-生成一个 XMLHttpRequest 对象
open(‘请求类型’ , ’URL’ , ’请求方式’)-请求类型:get、post 请求地址:服务器(文件)位置,请求方式:true 为异步,false 为同步
send()-发送请求
onreadystatechange-该方法可以定义响应执行函数,当 readyState 属性发
生变化时会自动调用该方法。
readyState:
交互流程,有 5 个阶段
- 请求初始化
- 服务器链接已建立
- 请求已接收
- 正在处理请求
- 请求已完成且响应已就绪
status:
HTTP 响应状态码
200 :OK(请求成功)
403 :Forbidden(禁止)
404 :Page not found(未找到)
responseText-响应文本(返回的数据)
setRequestHeader(‘头部名称’ , ‘头部值’)-请求头,向请求添加 HTTP 头部
Ajax的使用方法:
- 创建 XMLHttpRequest 对象
- 使用 send 方法发送请求,如果需要传参:
- 使用 open 方法指定要请求的地址、类型和方式。
get 方式要将参数拼接到 URL 后边,参数间&分割。例:’index.php?name=张三&age=18’ post 方式可以将参数放到 send()里。例:send(‘name=张三&age=18’)
4.绑定 onreadystatechange 事件,判断 readyState 和 status 的状态。
5.接收数据,通过 json 转换使用。
注意:本地 json 文件属于静态资源,一般情况下不支持 post 方式请求
同步与异步的区别:
同步:在进程中任务未结束时,需等待结束才能执行下一个任务。
例如:在高速上,只有一条车道,如果前方发生车祸,那么后方的车需要等待前方 处理好才能继续通行。
异步:在进程中任务未结束但在等待的过程中可以先去执行下一个任务。
例如:还是在高速上,有两条车道,如果前方发生车祸,那么后方的车可以从另一 条车道继续通行。
get 与post 的区别:
- get 是将参数包含在 URL 中明文传输,不安全。而 post 是通过 request body 传递参数, 对于用户来说是不可见的,所有更安全。
- get 传输数据量较小,因为 URL 有长度限制,post 传输的数据量较大,一般被默认为不受限制。
- 对于参数的数据类型,get 只接受 ASCII 字符,而 post 没有限制。
- get 请求时只会产生一个 TCP 数据包,get 比 post 更快。
- get 请求参数会被完整保留在浏览器历史记录里,而 post 中的参数不会被保留。