【JavaWeb-Ajax】笔记汇总 --- 全局刷新和局部刷新;ajax 中使用 XMLHttpRequest 对象(四步);json 的使用

2022年1月7日 5点热度 0条评论 来源: 猿头猿脑的王狗蛋

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 对象的属性名。

 

    原文作者:猿头猿脑的王狗蛋
    原文地址: https://www.cnblogs.com/Burning-youth/p/16047320.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。