JavaWeb-Ajax笔记汇总 --- 全局刷新和局部刷新；ajax 中使用 XMLHttpRequest 对象（四步）；json 的使用

Posted 2022-03-24 猿头猿脑的王狗蛋

异步请求特点：某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成

1、全局刷新和局部刷新：

---

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

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

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

 

2、Asynchronous JavaScript and XML：

---

ajax ---> Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）:

• xml 是网络中的一种传输的数据格式（json 替换了 xml）

1）ajax 是一种做局部刷新的新方法，不是一种语言，ajax包含的技术主要有 javascript , dom , css ,  xml 等等（核心是 javascript 和 xml）。

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

 

3、ajax 中使用 XMLHttpRequest 对象（四步）：

---

1）创建异步对象（第一步）：

var xmlHttp = new XMLHttpRequest();

 

2）给异步对象绑定事件（第二步）：

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

如何获取服务器端返回的数据？

• 使用异步对象的属性 responseText    // xmlHttp . responseText 

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

栗子：

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

 

readyState（异步对象的属性） --- 异步对象请求的状态变化：

•    0：创建异步对象时    //new XMLHttpRequest ( ) ; 
•    1：初始异步请求对象    //xmlHttp.open ( ) ;
•    2：发送请求    //xmlHttp.send ( ) ;
•    3：从服务器端获取了数据，注意3是异步对象内部使用， 获取了原始的数据
•    4：异步对象把接收的数据处理完成后，此时开发人员在4的时候处理数据（更新当前页面）

    异步对象的 status 属性，表示网络请求的状况（200， 404， 500），当 status == 200 时，表示网络请求成功。

 

3）初始异步请求对象（第三步）：

异步的方法：

• open ( ) . xmlHttp . open ( get / post ,  "服务器端的访问地址" ,  true / false ) // true 为异步请求，false 为同步请求 ，默认为 true

• 异步请求特点：

               1)某一个时刻，浏览器可以委托多个异步请求对象发送请求，无需等待请求处理完成；

               2)浏览器委托异步请求对象工作期间，浏览器处于活跃状态。可以继续向下执行其他命令；

               3) 当响应就绪后再对响应结果进行处理 。

• 同步请求特点：

               1)某一个时刻，浏览器只能委托一个异步请求对象发送请求，必须等待请求处理完成；

               2)浏览器委托异步请求对象工作期间，浏览器处于等待状态。不能执行其他命令；

               3)不推荐使用。 

栗子：

xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

 

4）使用异步对象发送请求（第四步）：

xmlHttp.send();

 

4、json使用：

---

ajax（发起请求）---> servlet ---> 返回一个 json 格式的字符串（可以将 json 对象格式看作成一个 "key:value"格式） // name:"河北", jiancheng:"冀","shenghui":"石家庄"

json分类：

• json对象 ，JSONObject
• json数组， JSONArray    // [   name:"河北", jiancheng:"冀","shenghui":"石家庄" , name:"山西", jiancheng:"晋","shenghui":"太原" ]

为什么要使用 json？

• json 格式好理解
• json 格式数据在多种语言中，比较容易处理。 使用 java， javascript 读写 json 格式的数据比较容易
• json 格式数据它占用的空间小，在网络中传输快， 用户的体验好

处理 json 的工具库： gson（google）； fastjson（阿里），jackson， json-lib

• 在 js 中，可以把 json 格式的字符串，转为 json 对象， json 中的 key，就是 json 对象的属性名。