Ajax

AXIN
166 阅读3分钟

为什么要用Ajax

  • Aajx 的英文全称为 Asynchronous(异步) JavaScript and XML ，虽然包含了XML，但是数据格式还可以有 JSON等

    Ajax可以异步向服务器端发起请求，页面不用等待响应，更新的内容刷新在相应位置，而不是刷新整个页面。

    Ajax中最大的特点 就是请求会被异步对象XMLHttpRequest进行封装，然后再发送到服务器，接着服务器以流的形式将数据返回给浏览器 也正是因为服务器返回的数据是通过流的形式发送的**，XMLHttpRequest对象会不停的监听服务器**，且得到服务器数据，所以浏览器不需要刷新就可以获取服务器端的数据

  • 同步：客户端必须的等待服务器端给予的响应，在此期间不能进行其他操作

    异步：与同步不同，客户端不需要等待服务器响应，在此期间可以进行任何操作

  • 异步的好处：AJAX 就是一种可以在无需重新加载整个网页的情况下 就可以实现与客户端与服务器的异步通讯 往简单了说就是：不用刷新整个网页，就能修改网页局部内容 正如我们开头所说到的，在开发中，如果每一次局部的小修改都进行页面刷新，这显然对性能会有所降低，而且用户正在执行的操作也会中断

优缺点

  • 优点
    • 局部刷新，优化了用户体验
    • 异步通信，不需要打断用户操作，具有良好的响应能力
    • 将一些工作从服务器转移到客户端中，节省了服务器和带宽资源
    • 按需取数据 ，减轻了服务器负担，也大大减少了冗余请求
  • 缺点
    • AJAX 主要依赖于JavaScript ，浏览器对 JavaScript 的兼容性将直接影响 AJAX的使用
    • 浏览器的后退机制被破坏，这也正是局部刷新所带来的问题，不过现在有一些方式可以尽可能弥补这些问题
    • 移动端对 AJAX 的支持没有那么好

应用场景

  • 搜索框联想列表
  • 局部刷新分页效果
  • 同页面加载更多
  • 表单数据验证

发送Ajax请求示例

get请求

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Ajax 发送 get 请求</h1>
  <input type="button" value="发送get_ajax请求" id='btnAjax'>

  <script>
    document.querySelector("#btnAjax").onclick = function () {
      //发送get请求
      //1 创建异步对象
      var ajaxobj = new XMLHttpRequest()
      //2 设置请求参数
      ajaxobj.open('get', 'url');
      //3 发送请求
      ajaxobj.send();
      //4 注册事件 onreadystatechange()当状态改变时调用
      ajaxobj.onreadystatechange = function () {
        //判断两个状态值
        if (ajaxobj.readyState == 4 && ajaxobj.status == 200) {
          console.log("get请求响应返回成功！")
          //5 处理返回的数据，修改页面显示
          var responseText = ajaxobj.responseText;
          var objdata = JSON.parse(responseText)
          document.querySelector('h1').innerHTML = objdata;
        }
      }
    }
  </script>
</body>

</html>

post请求

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  
  <h1>Ajax 发送 post 请求</h1>
  <input type="button" value="发送posy_ajax请求" id='btnAjax2'>
  
  <script>
    document.querySelector("#btnAjax2").onclick = function () {
      //1 创建异步对象
      var xhr = new XMLHttpRequest();
      //2 设置请求参数
      xhr.open('post', 'url')
      // 用post请求数据必须添加此行
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
      //3 将数据通过send方式传递
      xhr.send('name=fox&age=18')
      //4 注册事件
      xhr.onreadystatechange = function () {
        //判断状态
        if (xhr.readyState == 4 && xhr.status == 200) {
          console.log("post成功")
          //5 处理返回数据
          alert(xhr.responseText);
        }
      }
    }
  </script>
</body>

</html>

XMLHttpRequest方法和属性

  • 方法
方法含义
open() open(method,url,async,uesrname,password)设置请求参数 初始化 一般设置前两个参数
send(ocntent)发送请求
setRequestHeader(lable,value)设置请求头
getRequestHeader(headername)获取指定的响应头信息
getAllRequestHeaders()以字符串形式返回完整的HTTP头部信息
abort()取消当前请求
  • 属性
属性含义
onreadystatechange监听事件 = function()
readyState状态信息
responseText响应内容 字符串格式
resonseXML响应内容 XML文档对象
statushttp状态码
statusTexthttp状态说明

readyState状态码

状态描述
0new了一个xhr对象之后，open之前
1open之后，send之前
2请求以发送，send之后
3请求正在处理中：浏览器和服务器已经建立通信，服务器未完成响应之前
4请求已经完成，并且已经从服务器完全接收到响应数据

相关status状态码

状态码描述
200请求成功
302请求重定向
304资源未改变
404资源不存在
500服务器内部出错
avatar
文章
阅读
粉丝