web服务请求数据更新界面的步骤
1. 服务器把数据汇集起来，通过一个web服务对外发布。
2. 浏览器加载web应用，包括HTML标记、CSS和JavaScript.
3. 应用发出一个web请求，从服务器获取汇集的信息。
4. 应用受到服务器发回的数据。
5. 浏览器根据DOM更新页面，用户会看到相应结果。
6. 实时刷新的话，使用定时器接着请求数据，返回第三步执行。
如何向Web服务做出请求？
注: 使用XMLHttpRequest获取数据的模式也成为Ajax
1.首先从一个URL开始，告诉浏览器到哪里找我们要的数据。
var url = "http://someserver.com/data.json"
//json是一种交换数据的格式
2. 创建一个请求对象
var request = new XMLHttpRequest();
//使用XMLHttpRequest构造函数创建一个新的请求对象。
3.告诉请求对象我们希望它获取的那个URL,以及要使用哪种请求。open方法只是用一个URL建立一个请求，并告诉这个请求对象要使用哪种请求，以便XMLHttpRequest验证连接。
request.open("GET", url);
//HTTP GET是获取HTTP数据的标准方法。
4. 最后要求XMLHttpRequest对象获取数据时，他会自己去获取数据，他会提供一个处理程序，数据到达时会调用这个处理程序。
request.onload = function() {
if(request.status == 200) {
alert(request.responseText);
}
}
//返回码是200时，表示成功
//request.resonseText是获取他的返回数据，返回值是一个json字符串，需要解析
5.最后一步，告诉请求对象去获取数据，为此要用到send方法。
request.send(null);
//这会把请求发送到服务器。如果不打算向远程服务发送任何数据，就要传入null
以下是一个例子：
//js
window.onload = function() {
var url = "http://localhost/sales.json"
var request = new XMLHttpRequest();
request.open("GET", url);
request.onload = function() {
if(request.status == 200) {
updateSales(request.responseText);
}
};
request.send(null);
}
function updateSales(responseText) {
var salesDiv = document.getElementById("sales");
var sales = JSON.parse(responseText);
for (var i = 0; i<sales.length; i++){
var sale = sales[i];
var div = document.createElement("div");
div setAttribute("class", "saleItem");
div.innterHTML = sale.name + " sold " + sale.sales + " gumballs";
salesDiv.appendChild(div);
}
}
//对于数组中的每一项创建一个<div>，并制定class为saleItem（CSS会用到）
//用innerHTML设置<div>的内容，然后增加这个元素，作为sales<div>的子元素
//html
<body>
<div id="sales">
</div>
</body>
注意：上面代码的请求，一切都是在一个域中执行的，如果是请求的其他域的东西，浏览器会认为是不安全的，会拒绝请求数据。
跨域下的web服务
浏览器安全策略
如果从某个域提供页面本身，安全策略要求不能从另一个域获取数据。就是防止其他人进入你的系统，出入一些JavaScript，拿走了用户的个人信息，并且与服务器通信对这些数据为所欲为。
当应用所在同一个域托管数据时，XMLHttpRequest是为应用获取数据的一种好的方法。当为第三方获取数据，需要用到JSONP（JSON with Padding）
JSONP是一种使用<scrip>标记获取JSON对象的方法，这也是一种获取数据的方法。
....
<body>
<h1>Mighty Gumball Sales</h1>
<div id= "sales">
</div>
<script src="http://gumball.wickedlysmart.com"></script>
</body>
请求步骤
- 我们的HTML中包含一个<script>元素，这个script的源是一个Web服务的URL，这个Web服务将为我们提供JSON数据。
- 浏览器遇到页面中的<script>元素，并向src URL发送一个HTTP请求。
- 服务器正常处理这个请求，发回JSOON串之前，首先把他包装在一个函数调用中，如updateSales调用。
- 解析和解释JSON响应时，他包装在一个函数调用中。所以会调用这个函数，并把由JSON串创建的对象传入这个函数。
Web服务允许你指定一个回调函数。指定URL时，在末尾增加一个参数，就像这样
http://gumball.wickedlysmart.com/?callback=updateSales
当心浏览器缓存，大多数浏览器都有一个有趣的特性，如果你反复获取同一个URL,浏览器为了提高效率会把它缓存起来，所以你会反复的得到同样的缓存文件。解决方法如下:
var url = "http://gumball.wickedlysmart.com/?callback=updateSales" + "&random=" + (new Date()).getTime();
网页实时刷新
如果让网页实时刷新的话，就要设置一个定时器，可以设置每3秒请求一次网络数据。如果这样的话，需要每三秒就向服务器发一个<script src=url></script>来请求数据。就要把html中的<script>删除，在JavaScript中实时创建。
window.onload = function() {
setInterVal(handleRefresh, 3000); //毫秒
}
function handleRefresh() {
var url = "http://gumball.wickedlysmart.com/?callback=updateSales" + "&random=" + (new Date()).getTime()"
var = newScriptElement = document.createElement("script"); //创建一个新的script元素
newScriptElement.setAttribute("src",url); //将这个元素的src属性设置为url
newScriptElement.setAttribute("id", "jsonp");
var oldScriptElement = document.getElementById("jsonp");
var head = document.getElementByTagName("head")[0];
if(oldScriptElement == null) {
head.appendChild(newScriptElement);
}else {
head.replaceChild(newScriptElement, oldScriptElement);
}
}
增量更新
当实时请求数据时，就有可能请求重复数据，怎么来去除重复数据在页面的显示呢？这就用到了增量更新。设置一个lastReportTime的变量，每次请求数据时，把最后一条最新的时间传给这个变量，并且把这个变量传给服务器，来获取这个时间段以后的数据，这样就可以防止有重复数据啦。
知行办公，专业移动办公平台https://zx.naton.cn/
【总监】十二春秋之，3483099@qq.com；
【Master】zelo，616701261@qq.com；
【运营】运维艄公，897221533@qq.com；
【产品设计】流浪猫，364994559@qq.com；
【体验设计】兜兜，2435632247@qq.com；
【iOS】淘码小工，492395860@qq.com；iMcG33K，imcg33k@gmail.com；
【Android】人猿居士，1059604515@qq.com；思路的顿悟，1217022114@qq.com；
【java】首席工程师MR_W，feixue300@qq.com；
【测试】土镜问道，847071279@qq.com；
【数据】fox009521，42151960@qq.com；
【安全】保密，你懂的。
网友评论