全局刷新和局部刷新

全局刷新

整个浏览器被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面

局部刷新

  • 在浏览器的内部，发起请求，获取数据，改变页面中的部分内容
  • 局部刷新的速度更快，可以按需获取数据
  • ajax是用来做局部刷新的，局部刷新使用的核心对象是 异步对象（XMLHttpRequest）
  • 这个异步对象是存在浏览器内存中的，使用javascript语法创建和使用 XMLHttpRequest 对象

Ajax概念

  • Asynchronous Javascript and XML（异步的 Javascript 和 XML）

    • Asynchronous：异步
      • 同步只能处理一个请求
      • 异步可以分开处理多个请求
    • Javascript：Javascript脚本，在浏览器中执行
    • and：和
    • xml：是一种数据格式

  • Ajax是一种做局部刷新的新方法，不是一种语言。

  • Ajax包含的技术主要有JavaScript，dom，css，xml等等，核心是JavaScript和xml。

    • JavaScript负责创建异步对象，发送请求，更新页面的dom对象

    • Ajax请求需要服务器端的数据

    • xml：可扩展标记语言

      • 网络中的传输的数据格式
      • 目前使用 json 替换了 xml
      <datas>
    <data1> Car_01 </data1>
    <data2> Car_02 </data2>
    <data3> Car_03 </data3>
    <data4> Car_04 </data4>
</datas>

Ajax异步实现步骤

ajax中使用XMLHttpRequest对象

创建异步对象

var xmlHttp = new XMLHttpRequest()

给异步对象绑定事件

  • 给异步对象绑定onreadstatechange事件，获知请求的状态的变化

  • onreadystatechange事件

    • 当请求被发送到服务器时，我们需要执行一些基于响应的任务
    • 当异步对象发起请求，获取了数据，都会触发这个事件
    • 每当 readyState 改变时，就会触发 onreadystateChange 事件

  • 这个事件需要指定一个函数，在函数中处理状态的变化

    • 此事件可以指定一个处理函数function
    bth.onclick = fun1(); // 点击这个按钮会触发fun1函数
function fun1(){
  alert("按钮单击");
}
// For example
xmlHttp.onreadystatechange = function(){ // 用匿名函数直接指定
  // 处理请求的状态变化
  if( xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
      // 数据已经返回来准备好了 && 网络请求是成功的
      // 可以处理服务器端的数据，更新当前页面
      var data = xmlHttp.responseText;
      // 获取服务器返回的数据，使用异步对象的属性 responseText
      document.getElementById("name").value = data;
  }
}

  • XMLHttpRequest对象的三个重要的属性

    • onreadystatechange 属性
      • 每当readyState属性改变时，就会调用该函数
    • readyState 属性：存有 XMLHttprequest 的状态，表示异步对象请求从0到4的状态变化
      • readyState == 0：创建异步请求对象
      • readyState == 1：初始化异步请求对象
      • readyState == 2：异步对象发送请求
      • readyState == 3：异步对象接收应答数据
      • readyState == 4：异步请求对象将数据解析完毕，可以读取数据
    • state 属性：表示网络请求的状况
      • 当 status == 200 时，表示网络请求是成功的

初始异步请求对象

  • 同步|异步请求,默认为true，表示异步请求

    xmlHttp.open(请求方式get|post,"服务端的访问地址",同步|异步请求)

使用异步对象发送请求

xmlHttp.send()

补充说明

  • 获取服务器返回的数据，使用异步对象的属性 responseText

  • 回调：当请求的状态变化时，异步对象会自动调用 onreadystatechange事件对应的函数

  • 完成整个流程，异步对象内部会多次调用这个函数

JSON

在学js的时候其实已经涉及到了，所以学起来非常快

jackson工具库的使用

这里是将一个对象p转换成了json格式的字符串

String json = "{}";
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(p);

同步和异步

  • true：异步处理请求，不用等待数据处理完毕就可以执行其他的操作，可以同时处理多个请求
  • false：同步处理请求，在任意时刻只能执行一个请求