【Javascript】ajax(阿甲克斯)

目录

什么是ajax?

同步与异步

原理

注意

写一个ajax请求

创建ajax对象

设置请求方式和地址

发送请求

设置响应HTTP请求状态变化的函数


什么是ajax?

是基于javascript的一种用于创建快速动态网页的技术,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,主要用来在前端页面中向服务器后端请求数据。

以前的ajax:

前后端不分离(前后端写在一起),后端返回整个html

每次更新⼀些数据,他都会整个⽹⻚刷新

现在的ajax:

ajax帮助我们向服务器发异步请求

同步与异步

事件A,事件B

同步: 完成了A事件才能去处理B事件

异步:在事件A进行中可以进行B事件

原理

通过XmlHttpRequest对象向服务器发异步请求,从服务器获取数据

然后通过js来操作DOM⽽更新⻚⾯

它是在 IE5 中⾸先引⼊的,是⼀种⽀持异步请求的技术

简单的说,也就是 javascript 可以及时向服务器提出请求和处理响应,⽽不阻塞程序运行,达到⽆刷新的效果

注意

JavaScript是单线程的,会阻塞代码运⾏,所以引⼊XmlHttpRequest请求处理异步数据

javascript 复制代码
console.log(1);
console.log(2);
console.log(3);
alert(6);
console.log(4);

4没有打印出来,因为同一个时间只能做同一件事。

当我们点击确定的时候,才能打印出4

避免上述的阻塞, 引⼊XmlHttpRequest请求处理异步数据

javascript 复制代码
onsole.log(1);
console.log(2);
console.log(3);
setTimeout(function (){
    console.log(6);
},4000)
console.log(5);

setTimeout(function (){

console.log(6);

},4000)

4秒之后打印6

这里的5不用等setTimeout处理完再打印出来

经过4秒之后

写一个ajax请求

创建ajax对象

javascript 复制代码
var a
  if(window.XMLHttpRequest){
      a=XMLHttpRequest;
  }else{
      a=new ActiveXObject("Microsoft.XML HTTP");
  }

首先判断当前的环境下的window全局下有没有 XMLHttpRequest

设置请求方式和地址

javascript 复制代码
 a.open('GET',"http://localhost:xxx");

javascript 复制代码
  a.open('POST',"http://localhost:xxx");

发送请求

javascript 复制代码
  a.send()

设置响应HTTP请求状态变化的函数

复制代码
/* 
复制代码
注册事件。 onreadystatechange事件,状态改变时就会调用。
复制代码
如果要在数据完整请求回来的时候才调用,我们需要手动写一些判断的逻辑。
复制代码
*/
xhr.onreadystatechange = function () {
复制代码
  // 为了保证数据完整返回,我们一般会判断两个值
复制代码
  if (xhr.readyState === 1 && xhr.status === 200) {
复制代码
    alert(xhr.responseText);
复制代码
  } else {
复制代码
    alert('出错了,Err:' + xhr.status);
复制代码
  }
复制代码
};
相关推荐
江城开朗的豌豆几秒前
useLayoutEffect:你以为它和useEffect是"亲兄弟"?其实差别大了!
前端·javascript·react.js
江城开朗的豌豆5 分钟前
聊聊useEffect:谁说副作用不能“优雅”?
前端·javascript·react.js
!执行7 分钟前
开发electron时候Chromium 报 Not allowed to load local resource → 空白页。
前端·javascript·electron
Evand J8 分钟前
【MATLAB例程】水下机器人长基线(LBL)定位,用于三维轨迹,使用EKF滤波,融合LBL和IMU,4个锚点(长基线基站数=4),附下载链接
开发语言·matlab·机器人
林内克思8 分钟前
inline内联函数
java·开发语言·算法
博睿谷IT99_11 分钟前
OSPF 的工作过程、Router ID 机制、报文结构
开发语言·网络·华为·智能路由器·网络工程师·华为认证·数据通信
piikee25 分钟前
php内存缓存插件yac的安装配置--平替apcu,多进程共享内存
开发语言·缓存·php·yac·php扩展·php内存缓存·apcu平替
赛博切图仔25 分钟前
面试手写 Promise:链式 + 静态方法全实现
前端·javascript·面试
多吃蔬菜!!!33 分钟前
VsCode 上的Opencv(C++)环境配置(Linux)
开发语言·c++
Moment34 分钟前
面试官:用户访问到一个不存在的路由,如何重定向到404 Not Found的页面 ❓❓❓
前端·javascript·面试