AJAX

全局刷新与局部刷新

  1. 全局刷新：整个浏览器都被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面。
  2. 局部刷新：在浏览器的内部发起请求，获取数据，改变页面中的部分内容，其余的页面无需加载和渲染。网络中数据传输量少，用户体验更好
  3. ajax是用来做局部刷新的，局部刷新使用的核心是异步对象（XMLHttpRequest），这个异步对象是存在于浏览器内存中的，使用javascript语法创建和使用XMLHTTPRequest对象。

AJAX是什么

  1. AJAX：Asynohronous JavaScript And XML（异步的JavaScript和XML）。
  • Asynohronous：异步的意思
  • JavaScript：Javascript脚本
  • XML：是一种数据格式
  1. ajax是一种局部刷新的新方法（2003），不是一种语言，ajax包含的技术主要有JavaScript，dom，xml，css等等，核心是JavaScript和XML
  • JavaScript：负责创建异步对象，发送请求，更新页面的dom对象。ajax请求需要服务器端的数据。
  • XML：网络中的传输的数据格式。现在使用json替换了xml

AJAX异步实现步骤

  1. 创建对象： var xmlHttp = new XMLHttpRequest();
  2. 绑定事件（onreadystatechange事件）：onreadystatechange：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。 
1. xmlHttp.onreadystatechange = function() {
    //处理请求的状态变化
    if(xmlHttp.readystate == 4 && xmlHttp.status == 200) {
        //可以处理数据，更新页面
        var data = xmlHttp.responseText;
        document.getElementById("name").value = data;
    }
}
  1. 初始异步请求对象： //xmlHttp.open(请求方式get/post，“服务端的访问地址”，同步/异步（默认是true异步）) xmlHttp.open("get","/myWeb/loginServlet?name=123&pwd=123",true);
  2. 使用异步对象发送请求： xmlHttp.send()
  3. 获取服务端返回的数据，使用异步对象的属性responseText var data = xmlHttp.responseText
  4. 属性说明：
  • onreadystatechange属性：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数或者直接定义函数，在函数中处理状态的变化。
  • readystate属性：存有XMLHttpRequest的状态，从0到4发生变化
  • 0：请求未初始化，创建异步请求对象，var xmlHttp = new XMLHttpRequest();
  • 1：初始化异步请求对象，xmlHttp.open(请求方式，请求地址，true)
  • 2：异步对象发送请求，xmlHttp.send()
  • 3：异步对象接收应答数据从服务器返回数据，XMLHttpRequest内部处理。
  • 4：异步请求对象已经将数据解析完毕，此时才可以读取数据。开发人员更新页面
  • status属性：表示网络请求的状况，需要status == 200时，表示网络请求是成功的

使用JSON替代XML作为返回数据格式

  1. 为什么使用JSON
  • json格式容易理解
  • json格式数据在多种语言中，比较容易处理。使用java，JavaScript读写json格式的数据比较容易
  • json格式数据它占用的空间下，网络传输快，用户体验好
  1. 处理JSON的工具库
  • Gson(google)
  • FastJson(Alibaba)：速度快，但不符合标准
  • Jackson：性能好，规范好
  • json-lib：性能差，依赖多
  1. Jackson的使用 TestClass testClass = new TestClass(); ObjectMapper om = new ObjectMapper(); String json = om.writeValueAsString(testClass);
  2. 在js中将json格式的字符串转为json对象 var data = xmlHttp.responseText //eval是执行括号中的代码，将json字符串转为json对象 var jsonObj = eval（"("+data+")");

同步和异步的区别

  • 异步请求：不用等待数据处理完毕，就可以执行其他操作
  • 同步请求：必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码，任意时刻只能执行一个请求