3.2-2 Ajax的基本用法

洋芋不姓杨

已于 2022-08-10 16:01:51 修改

阅读量78

点赞数

文章标签： ajax servlet

于 2022-07-12 15:46:19 首次发布

本文链接：https://blog.csdn.net/youaigusheng/article/details/125744665

版权

3.2-2 Ajax的基本用法

XMLHttpRequest

(1)Ajax想要实现浏览器与服务器之间的异步通信，需要依靠XMLHttpRequest，它是一个构造函数；
(2)无论是XMLHttpRequest，还是Ajax，都没有和具体的某种数据格式绑定；

Ajax的使用步骤

(1)创建xhr对象；
(2)准备发送请求；
(3)发送请求；
(4)监听事件，处理相应；
//当获取到响应后，会触发xhr对象的readystatechange事件，可以在该事件中对响应进行处理；
//readystatechange事件监听readyState这个状态的变化，它的值从0~4，一共5个状态；
//0：未初始化。尚未调用open();
//1:启动。已经调用open(),但未调用send();
//2：发送。已经调用send().但未接收到响应；
//3：接收。已经接收到部分响应数据；
//4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了；
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
//创建xhr对象；
const xhr=new XMLHttpRequest();
//准备发送请求
xhr.open('HTTP方法GET POST PUT DELETE','地址URL','是否使用异步true');
//发送请求
// 调用send()正式发送请求
xhr.send();
//send()的参数是通过请求体携带的数据
//监听事件，处理响应
xhr.onreadystatechange=()=>{
  if(xhr.readyState!==4)
  return;
  //xhr.addEventListen('readystatechange',()=>{},false);
  //HTTP CODE
  //获取到响应后，响应的内容会自动填充xhr对象的属性
  if((xhr.status>=200)&&(xhr.status<300)||xhr.status===304){
    // console.log('数据正常');
    console.log(xhr.responseText);
  }
    };
    //readystatechange事件也可以配合addEventListener使用，不过要注意，IE6~8不支持addEventListener;
    //为了兼容性，readystatechange中不适用this,而是直接使用xhr;
      //由于兼容性的原因，监听事件最好放在open之前；
  </script>
</body>
</html>

使用Ajax完成前后端通信

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <script>
const url='https://www.imooc.com/api/http/search/suggest?words=js';
const xhr=new XMLHttpRequest();

xhr.onreadystatechange=()=>{
  if(xhr.readyState!==4)return;
  if((xhr.status>=200)&&(xhr.status<300)||xhr.status===304){
    console.log(xhr.responseText);
  }
};

xhr.open('GET',url,true);
xhr.send(null);
  </script>
</body>
</html>