AJAX

Ajax原理

• Ajax 的原理简单来说是在用户和服务器之间加了—个中间层( AJAX 引擎)，通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作 DOM 而更新页面。使用户操作与服务器响应异步化。这其中最关键的⼀步就是从服务器获得请求数据

• Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是 ajax 的核心机制

• 固定代码

  // 1.创建对象
  const xhr = new XMLHttpRequest()
  // 2.初始化 设置请求方法和 url
  xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300')
  // 3.发送
  xhr.send()
  // 4.事件绑定 处理服务端返回的结果
  // on when 当...时候
  // readystate 是 xhr 对象中的属性,表示状态 0 1 2 3 4
  // change 改变
  xhr.onreadystatechange = function(){
      // 判断(服务端返回了所有的结果)
      if(xhr.readyState === 4){
          // 判断响应状态码 200 404 403 401 500
          // 2xx 成功
  　　     if(xhr.status >= 200 && xhr.status < 300){
          // 处理结果 行 头 空行 体
          // 响应行
          // console.log(xhr.status);//状态码
          // console.log(xhr.statusText);//状态字符串
          // console.log(xhr.getAllResponseHeaders());//所有响应头
          // console.log(xhr.response);//响应体
  
          // 设置result的文本
          result.innerHTML = xhr.response
       }
     }
  }

   

ajax 有那些优缺点?

• 优点：

  • 通过异步模式，提升了用户体验。

  • 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用。

  • Ajax 在客户端运行，承担了⼀部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

  • Ajax 可以实现局部刷新。

• 缺点：

  • 安全问题 AJAX 暴露了与服务器交互的细节。

  • 对搜索引擎的支持比较弱。

  • 不容易调试。