1. 全局刷新与局部刷新
1.1 全局刷新
整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载,渲染页面。
全局刷新原理
- 必须由浏览器亲自向服务端发送请求协议包。
- 这个行为导致服务端直接将【响应包】发送到浏览器内存中
- 这个行为导致浏览器内存中原有内容被覆盖掉
- 这个行为导致浏览器在展示数据时候,只有响应数据可以展示
1.2 局部刷新
在浏览器器的内部,发起请求,获取数据,改变页面中的部分内容。其余的页面无需加载和渲染。 网络中数据传输量少, 给用户的感受好。
局部刷新原理:
- 不能由浏览器发送请求给服务端
- 浏览器委托浏览器内存中一个脚本对象代替浏览器发送请求.
- 这个行为导致导致服务端直接将【响应包】发送脚本对象内存中
- 这个行为导致脚本对象内容被覆盖掉,但是此时浏览器内存中绝大部分内容没有收到任何影响.
- 这个行为导致浏览器在展示数据时候,同时展示原有数据和响应数据。
2. 异步请求对象
在局部刷新,需要创建一个对象,代替浏览器发起请求的行为,这个对象存在内存中。代替浏览器发起请求并接收响应数据。这个对象叫做异步请求对象。
全局刷新是同步行为, 局部刷新是异步行为[浏览器数据没有全部更新]
这个异步对象用于在后台与服务器交换数据。XMLHttpRequest 就是我们说的异步对象
XMLHttpRequest 对象能够:
- 在不重新加载页面的情况下更新网页
- 在页面已加载后向服务器请求数据
- 在页面已加载后从服务器接收数据
AJAX 中的核心对象就是 XMLHttpRequest
3. Ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分页面内容的新方法
AJAX 不是新的编程语言,而是使用现有技术混合使用的一种新方法。ajax 中使用的技术有JavaScript, html , dom , xml ,css 等。
主要是 JavaScript , XML.
JavaScript: 使用脚本对象 XMLHttpRequest 发送请求, 接收响应数据
XML: 发送和接收的数据格式,现在使用 json
AJAX 不单需要前端的技术,同时需要后端(服务器)的配合。服务器需要提供数据,数据是 AJAX 请求的响应结果。
4. AJAX 异步实现步骤
ajax中使用XMLHttpRequest对象
-
第一步:创建异步对象
var xmlHttp = new XMLHttpRequest();
-
第二步:给异步对象绑定事件:onreadstatechange 事件
语法: xmlHttp.onreadystatechange= function() { if( xmlHttp.readyState == 4 && xmlHttp.status == 200){ 处理服务器返回数据 如: //可以处理服务器端的数据,更新当前页面 var data = xmlHttp.responseText; document.getElementById("name").value= data; } }
XMLHttpRequest 对象的三个重要的属性:
属性说明:
onreadystatechange 属性:一个 js 函数名 或 直接定义函数,每当 readyState 属性
改变时,就会调用该函数
readyState 属性:
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
• 0: 请求未初始化,创建异步请求对象 var xmlHttp = new XMLHttpRequest()
• 1: 初始化异步请求对象, xmlHttp.open(请求方式,请求地址,true)
• 2: 异步对象发送请求, xmlHttp.send()
• 3: 异步对象接收应答数据 从服务端返回数据。XMLHttpRequest 内部处理。
• 4: 异步请求对象已经将数据解析完毕。 此时才可以读取数据。
status 属性:
200: "OK"
404: 未找到页面
-
第三步: 初始化请求参数
方法: open(method,url,async) : 初始化异步请求对象 参数说明: • method:请求的类型;GET 或 POST • url:服务器的 servlet 地址 • async:true(异步)或 false(同步) 例如: xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)
-
第四步:发送请求
xmlHttp.send()
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或responseXML 属性。
responseText:获得字符串形式的响应数据
responseXML:获得 XML 形式的响应数据”
如:使用例子:xmlHttp.responseText ”
5. 同步请求与异步请求
XMLHttpRequest 对象 open( method , url, false ) 第三个参数 false 表示同步请求
同步请求特点:
1)某一个时刻,浏览器只能委托一个异步请求对象发送请求,必须等待请求处理完成。
2)浏览器委托异步请求对象工作期间,浏览器处于等待状态。不能执行其他命令。
3)不推荐使用。
6. JSON
json分类:
1. json对象 ,JSONObject ,这种对象的格式 名称:值, 也可以看做是 key:value 格式。
如:json格式的字符串 { name:"河北", jiancheng:"冀","shenghui":"石家庄"}
2. 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对象的属性名。