JavaWeb学习笔记-part4-AJAX

AJAX

全局刷新与局部刷新

1. 全局刷新：整个浏览器都被新的数据覆盖，在网络中传输大量的数据，浏览器需要加载，渲染页面。

2. 局部刷新：在浏览器的内部发起请求，获取数据，改变页面中的部分内容，其余的页面无需加载和渲染。网络中数据传输量少，用户体验更好

3. ajax是用来做局部刷新的，局部刷新使用的核心是异步对象（XMLHttpRequest），这个异步对象是存在于浏览器内存中的，使用javascript语法创建和使用XMLHTTPRequest对象。

AJAX是什么

1. AJAX：Asynohronous JavaScript And XML（异步的JavaScript和XML）。

   • Asynohronous：异步的意思

   • JavaScript：Javascript脚本

   • XML：是一种数据格式

2. ajax是一种局部刷新的新方法（2003），不是一种语言，ajax包含的技术主要有JavaScript，dom，xml，css等等，核心是JavaScript和XML

   • JavaScript：负责创建异步对象，发送请求，更新页面的dom对象。ajax请求需要服务器端的数据。

   • XML：网络中的传输的数据格式。现在使用json替换了xml

AJAX异步实现步骤

1. 创建对象：

   var xmlHttp = new XMLHttpRequest();

2. 绑定事件（onreadystatechange事件）：

   onreadystatechange：当异步对象发起请求，获取了数据都会触发这个事件。这个事件需要指定一个函数，在函数中处理状态的变化。

   xmlHttp.onreadystatechange = function() {
       //处理请求的状态变化
       if(xmlHttp.readystate == 4 && xmlHttp.status == 200) {
           //可以处理数据，更新页面
           var data = xmlHttp.responseText;
           document.getElementById("name").value = data;
       }
   }

3. 初始异步请求对象：

   //xmlHttp.open(请求方式get/post，“服务端的访问地址”，同步/异步（默认是true异步）)
   xmlHttp.open("get","/myWeb/loginServlet?name=123&pwd=123",true);
   ​

4. 使用异步对象发送请求：

   xmlHttp.send()

5. 获取服务端返回的数据，使用异步对象的属性responseText

   var data = xmlHttp.responseText

6. 属性说明：

   • 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格式数据它占用的空间下，网络传输快，用户体验好

2. 处理JSON的工具库

   • Gson(google)

   • FastJson(Alibaba)：速度快，但不符合标准

   • Jackson：性能好，规范好

   • json-lib：性能差，依赖多

3. Jackson的使用

   TestClass testClass = new TestClass();
   ​
   ObjectMapper om = new ObjectMapper();
   String json = om.writeValueAsString(testClass);

4. 在js中将json格式的字符串转为json对象

   var data = xmlHttp.responseText
   //eval是执行括号中的代码，将json字符串转为json对象
   var jsonObj = eval("("+data+")");

同步和异步的区别

• 异步请求：不用等待数据处理完毕，就可以执行其他操作

• 同步请求：必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码，任意时刻只能执行一个请求