什么是ajax?
- ajax? 全名 async javascript and XML(异步JavaScript和XML(可扩展标记语言))
- 是前后台交互的能? 也就是我们客户端给服务端发送消息的?具,以及接受响应的?具
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
- AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
- 是?个 默认异步执?机制的功能,AJAX分为同步(async = false)和异步(async = true)
?
什么是同步请求?(false)
- ?同步请求是指当前发出请求后,浏览器什么都不能做,
- ?必须得等到请求完成返回数据之后,才会执行后续的代码,
- ?相当于生活中的排队,必须等待前一个人完成自己的事物,后一个人才能接着办。
什么是异步请求?(默认:true)?
- 默认异步:异步请求就当发出请求的同时,浏览器可以继续做任何事,
- Ajax发送请求并不会影响页面的加载与用户的操作,相当于是在两条线上,各走各的,互不影响。
- 一般默认值为true,异步。异步请求可以完全不影响用户的体验效果,
- 无论请求的时间长或者短,用户都在专心的操作页面的其他内容,并不会有等待的感觉。
?
ajax的操作流程
- 创建?个 ajax 对象
// IE9及以上
//ajax的核心对象就是XMLHttpRequest。
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')
?2.配置链接信息
//所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
const xhr = new XMLHttpRequest()
// xhr 对象中的 open ?法是来配置请求信息的
// 第?个参数是本次请求的请求?式 get / post / put / ...
// 第?个参数是本次请求的 url
// 第三个参数是本次请求是否异步,默认 true 表示异步,false 表示同步
// xhr.open('请求?式', '请求地址', 是否异步)
xhr.open('get', './data.php')
? 3.为xml添加监听
//ajax的有四个状态
// readyState === 0 : 表示未初始化完成,也就是 open 方法还没有执行
// readyState === 1 : 表示配置信息已经完成,也就是执行完 open 之后
// readyState === 2 : 表示 send 方法已经执行完成
// readyState === 3 : 表示正在解析响应内容
// readyState === 4 : 表示响应内容已经解析完毕,可以在客户端使用了
const xhr = new XMLHttpRequest() xhr.open('get', './data.php')
xhr.send()
xhr.onreadyStateChange = function () {
// 每次 readyState 改变的时候都会触发该事件
// 我们就在这里判断 readyState 的值是不是到 4
// 并且 http 的状态码是不是 200 ~ 299
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
// 这里表示验证通过
// 我们就可以获取服务端给我们响应的内容了 }
}
4.发送请求
xhr.send(data)
同源和跨域
? ? ? ? ?同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
同源协议+域名+端口三者都相同就是同源,有一个不同就是跨域。
|