浅谈javaWeb项目中网页的局部刷新

港控/mmm° 2022-03-18 08:50 1086阅读 0赞

### 一、浏览器在接收到服务端数据后，两种表现形式 ###

1.  浏览器全局刷新：服务端返回数据，将浏览器内存中原有的数据，进行更新，此时浏览器展示给用户的只能是相应的结果，无法展示请求发送之前的页面内容；
2.  浏览器局部刷新：服务端返回的数据，只会对浏览器部分\[标签\]的内容进行更新，此时浏览器既可以展示得到相应数据，同时也可以展示发送请求之前的绝大部分的内容。

### 二、浏览器接收到服务端数据后，两种表现实现原因 ###

1.  浏览器全局刷新：如果发送请求时，是由浏览器直接向服务器发送请求，此时服务端将响应结果也直接推送到浏览器的内存中，导致浏览器内存中原有的数据被覆盖；
2.  浏览器局部刷新：在发送请求时，并不是由浏览器直接向服务器发送请求，由浏览器委托一个\[异步请求对象\]向服务端发送请求，此时服务端将响应结果推送给\[异步请求对象\]，流浪器内存中内容并没有被覆盖掉，最后\[异步请求对象\]将得到的结果更新到页面对应的标签中。

###  三、 同步与异步 ###

例如：接力跑，在比赛开始后，第一棒选手只有把接力棒交给第二位队员，第二位运动员才能开始跑，以此类推，当前一位运动员还没有把接力棒交接给下一位远动员，则下一位运动员就不是跑，只有当前一位运动员把接力棒交给下一位运动员，下一位运动员才能跑；

例如：用社交软件聊天，在你发送一个消息给对方后，对方没有会信息，此时你可以发第二条，第三条，也可以去坐其他事情；

1.  同步：客户端与服务器端的请求与响应是一个过程的，也就是说在过程完成前客户端都处于等待卡死状态；
2.  异步：客户端发送请求，无论服务器是否响应，客户端都可以随意做其他事情。

### 四、 加载异步数据 ###

**1. 开发步骤 **

*          在浏览器内存中，创建一个\[异步请求对象\]
 *          为\[异步请求对象\]设置\[工作状态监听器\]，来帮助浏览器在合适的时机，从\[异步请求对象\]读取服务端返回的响应数据
 *          初始化\[异步请求对象\]，（请求方式（post/get），请求地址，同步或异步标识）
 *          命令\[异步请求对象\]发送请求
 *          通过\[工作状态监听器\]，在合适时机得到\[异步请求对象\]返回的数据，对浏览器指定的标签内容进行更新，从而实现\[局部刷新效果\]

**2. 传统的JavaScript方法**

var xmlHttp = new XMLHttpRequest();//创建异步请求对象[XMLHttpRequest]
    xmlHttp.onreadystatichange = function(){//添加工作状态监听器
        if(xmlHttp.raadystate == 4){//判断是都是合适时机
            var 响应数据 = xmlHttp.responseText;//读取服务端响应得数据
            dom对象.value = 响应数据;//将响应的数据更新到指定位置
        }
    };
    xmlHttp.open(“get”, “/myWeb/one”, true);//初始化[异步请求对象]，发送请求方式（get/post）,请求路径，同步或异步标识
    xmlHttp.send();//命令[异步请求对象]发送请求

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:196px;">属性</td> 
   <td style="text-align:center;vertical-align:middle;width:603px;">描述</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:196px;">onreadystatechange</td> 
   <td style="width:603px;">存储函数 (或函数名), 每当 readyState 属性改变时, 就会调用该函数</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:196px;">readyState</td> 
   <td style="width:603px;"> <p>存有 XMLHttpRequest 的状态。</p> <p style="margin-left:0cm;">0&nbsp; &nbsp; 异步请求对象已经被创建完毕</p> <p style="margin-left:0cm;">1&nbsp; &nbsp; 异步请求对象已经被初始化完毕</p> <p style="margin-left:0cm;">2&nbsp; &nbsp; 异步请求对象已经将请求发送出去，此时服务端应该正在处理这个请求</p> <p style="margin-left:0cm;">3&nbsp; &nbsp; 异步请求对象已经接收到了服务端返回的响应数据，异步请求对象正在翻译接收到的数据</p> <p style="margin-left:0cm;">4&nbsp; &nbsp; 异步请求对象将所得到的数据翻译成javaScript脚本数据，这个数据是可以直接拿来使用的</p> </td> 
  </tr> 
  <tr> 
   <td style="text-align:center;vertical-align:middle;width:196px;">status</td> 
   <td style="width:603px;"> <p>200:“OK” 404:“页面未找到” 500:“服务器错误”…</p> <p><a href="https://blog.csdn.net/nailnehc/article/details/87602232" rel="nofollow">https://blog.csdn.net/nailnehc/article/details/87602232</a></p> </td> 
  </tr> 
 </tbody> 
</table>

**    3. 异步请求与同步请求的区别**

*  异步请求:在\[异步请求对象\]工作期间，浏览器处于工作状态，此时浏览器不需要等待\[异步请求对象\]返回数据。

xmlHttp.open(“get”, “/myWeb/one”, true);

*  在\[异步请求对象\]工作期间，浏览器处于等待状态，此时浏览器会等到\[异步请求对象\]返回数据后，才会做其他的事情。

xmlHttp.open(“get”, “/myWeb/one”, false);

**4. 请求服务器数据**

$.get() & $.post() 请求数据

<table style="width:600px;"> 
 <tbody> 
  <tr> 
   <td> <p style="margin-left:0cm;">$.get(</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; “url”,</p> <p style="margin-left:0cm;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;”请求参数”/{参数名：值},</p> <p style="margin-left:0cm;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;局部刷新函数对象,</p> <p style="margin-left:0cm;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;“dataType”</p> <p style="margin-left:0cm;">)</p> </td> 
   <td> <p style="margin-left:0cm;">$.post(</p> <p style="margin-left:0cm;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; “url”,</p> <p style="margin-left:0cm;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;”请求参数”/{参数名：值},</p> <p style="margin-left:0cm;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;局部刷新函数对象,</p> <p style="margin-left:0cm;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;“dataType”</p> <p style="margin-left:0cm;">)</p> </td> 
  </tr> 
 </tbody> 
</table>

$.ajax()使用

在jQuery中，$.ajax()是最底层的方法，也是功能最强的方法，$.get()和$.post()都是在此方法的基础之上建立的，语法格式如下：

$.ajax(\[option\])

其中可选参数\[option\]为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也包含服务器响应后回调的数据，具体参数列表如下：

<table> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:98px;">参数名</td> 
   <td style="text-align:center;width:109px;">类型</td> 
   <td style="text-align:center;width:642px;">描述</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">url</td> 
   <td style="text-align:center;width:109px;">String</td> 
   <td style="width:642px;">发送请求的地址（默认为当前页面）</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">type</td> 
   <td style="text-align:center;width:109px;">String</td> 
   <td style="width:642px;">数据请求方式（post或get），默认为get</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">data</td> 
   <td style="text-align:center;width:109px;"> <p>String或Object</p> </td> 
   <td style="width:642px;">发送到服务器的数据。如果不是字符串则自动转成字符串格式，如果是get请求方式，那么，该字符串将附在url的后面</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">dataType</td> 
   <td style="text-align:center;width:109px;">String</td> 
   <td style="width:642px;"> <p>服务器返回的数据类型，如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行分析，传递给回调函数，其可用类型有：</p> <p>html：返回纯文本的html信息，包含的Script标记会在插入页面时被执行</p> <p>script：返回纯文本的JavaScript代码</p> <p>text：返回纯文本字符串</p> <p>xml：返回可被jQuery处理的xml文档</p> <p>json：返回JSON格式的数据</p> </td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">beforeSend</td> 
   <td style="text-align:center;width:109px;">Function</td> 
   <td style="width:642px;">该函数用于发送请求前修改XMLHttpRequest对象，其中的参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此，如果函数返回false，则表示取消本次事件</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">complete</td> 
   <td style="text-align:center;width:109px;">Function</td> 
   <td style="width:642px;">请求完成后调用的回调函数，该函数无论数据发送成功与否都会调用，其中有两个参数，一个是XMLHttpRequest对象，另一个是strStatus，用于描述成功请求类型的字符串</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">success</td> 
   <td style="text-align:center;width:109px;">Function</td> 
   <td style="width:642px;">请求成功后调用的回调函数，该函数有两个参数，一个是根据参数dataType处理后服务器返回的数据，另外一个是strStatus，用于描述状态的字符串</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">error</td> 
   <td style="text-align:center;width:109px;">Function</td> 
   <td style="width:642px;">请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">timeout</td> 
   <td style="text-align:center;width:109px;">Number</td> 
   <td style="width:642px;">请求超时的时间（毫秒），改设置将覆盖$.ajaxSetup()方法中的同样设置</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">global</td> 
   <td style="text-align:center;width:109px;">Boolean</td> 
   <td style="width:642px;"> <p>是否响应全局事件，默认为true，表示响应，如果设置成false，表示不响应，那么，全局事件$.ajaxStart等将不响应</p> </td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">async</td> 
   <td style="text-align:center;width:109px;">Boolean</td> 
   <td style="width:642px;">是否为异步请求，默认为true，表示是异步请求，如果设置成false，表示是同步请求</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:98px;">cache</td> 
   <td style="text-align:center;width:109px;">Boolean</td> 
   <td style="width:642px;">是否进行页面缓存，true表示进行缓存，false表示不进行缓存</td> 
  </tr> 
 </tbody> 
</table>

五、ajax示例（下拉列表联动）

[https://blog.csdn.net/nailnehc/article/details/87809004][https_blog.csdn.net_nailnehc_article_details_87809004]

[https_blog.csdn.net_nailnehc_article_details_87809004]: https://blog.csdn.net/nailnehc/article/details/87809004