Headfirst HTML5:与web交流通信API

最新推荐文章于 2024-06-30 14:43:25 发布

'"<>{{7*7}}

最新推荐文章于 2024-06-30 14:43:25 发布

阅读量300

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/weixin_43415644/article/details/91802934

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

如何向Web服务器做出请求？

浏览器向服务器请求页面：它向服务器做出一个HTTP请求，服务器会返回页面，并随之返回另外一些（通常）只有浏览器能看到的元数据。

浏览器还可以采用同样的方式通过 HTTP 从web服务器获取数据。

请求：

GET /gumballsales HTTP/1.1
//使用HTTP1.1协议得到"/gumballsales"(服务器上的应用）的资源
Host:gumball.wickedlysmart.com
User-Agent:Mozilla/5.0
//表示这个请求来自一个Moizlla 5.0兼容的浏览器
以上信息均称为元数据

响应：

HTTP/1.1 200 OK
//200 是响应码表示一切正常，最前面的是HTTP1.1协议首部;指出这个响应使用了HTTP协议
Content-length:76
content-type:application/json

[

    {"name":"shangrui","time":1234324,"sales":8},

    {"name":"shanglei","time":1233233,"sales":2},

    {"name":"guojia","time":20196122089,"sales":100}



]

这种使用XMLHttpRequest获取数据的模式通常称为 Ajax

2.如何从JS做出请求？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>万能糖果公司</title>
    <link rel="stylesheet" href="1.css">
    <script src="1.js"></script>
</head>
<body>
    <h1>万能糖果公司</h1>
    <div id="sales"></div>
    
</body>
</html>

window.onload = function(){
   //1.设置url变量
    var url = "http://127.0.0.1/HTML5/sales.json";
   //2.创建请求对象
    var request = new XMLHttpRequest();
   //3.告诉这个请求对象我们希望它获取那个url，以及要使用那种请求方式。为此使用该对象的open方法//（虽然名字叫open，但是这个方法只会在请求对象中设置这些值，并不会打开链接获取数据）
    request.open("GET",url);
   //4.数据到达时调用该处理程序
    request.onload = function(){
        if(request.status==200){
            alert("获取数据成功");
            updateSales(request.responseText);
            //HTTP GET获取的数据可以在request对象的responseText属性中找到
        }
    };
   //5.向服务器发送某些数据，如果不需要发送数据，参数为null
    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.innerHTML = sale.name + " sales "+sale.sales+" gumballs ";
        salesDiv.appendChild(div);
    }
}

JSON数据的运作方式：

1.我们有一个想要交换或者存储的js对象，所以调用JSON.stringify( 对象)方法，将这个对象转化为字符串

2.将字符串通过网络发送或者传递给一个函数

3.调用JSON.parse(字符串) ，将字符串转化回对象

4.结果是原始对象的一个副本。

浏览器的安全策略：

使用XMLHttpRequest必须遵守浏览器的同源策略，即浏览器从一个域请求得到的js代码中的XMLHttpRequest不能去请求另一个不同源的域的数据。

所以我们可以用JSONP来绕过浏览器的同源策略，

JSONP是一种使用<script>标记获取JSON对象的方法，也是一种获取数据的方法。

1.浏览器遇到页面的<script>元素时，再向src URL发出一个HTTP请求

2.服务器像对待其他HTTP请求一样处理这个请求，并在响应中发回JSON

3.JSON响应的格式是字符串，但是浏览器会自动为我们转化为对象和值。

JSON中的P表示什么？

JSON with padding（有填充的JSON），即在请求中返回JSON之前先用一个函数来包装，它是这样工作的：

1.请求

2.服务器处理请求，在服务器发回JSON之前，先用一个函数来包装JSON

3.浏览器收到响应，解析和解释时会调用这个函数，把JSON转换成的对象传给这个函数。

修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>万能糖果公司</title>
    <link rel="stylesheet" href="1.css">
    <script src="1.js"></script>
    <script src="http://gumball.wickedlysmart.com?callback=updateSales" id="jsonp"></script>
</head>
<body>
    <h1>万能糖果公司</h1>
    <div id="sales"></div>
    
</body>
</html>

window.onload = function(){
    setInterval(handleRefresh,3000);
//该函数实际上会返回一个id，来标识这个定时器，可以这个id存在一个变量中，以后想要停止定时器，把id变量传给clearInterval即可。
}
function updateSales(sales){
    var salesDiv=document.getElementById("sales");
    for(var i=0;i<sales.length;i++){
        var sale = sales[i];
        var div = document.createElement("div");
        div.innerHTML = sale.name + " sales "+sale.sales+" gumballs ";
        salesDiv.appendChild(div);
    }
}
function handleRefresh(){
    var url = "http://gumball.wickedlysmart.com?callback=updateSales"+"&random="+(new Date()).getTime();
//web服务器允许你指定一个回调函数，在url之后添加参数?callback=updateSales，指示得到数据后传参给updateSales函数，并调用它。一般的，Web服务器会将这个参数命名为callback，但是有时也会不同，请查阅web服务文档明确参数名
    var newScriptElement=document.createElement("script");
    newScriptElement.setAttribute("src",url);
    newScriptElement.setAttribute("id","jsonp");
    var oldScriptElement =document.getElementById("jsonp");
    var head = document.getElementsByTagName("head")[0];
    if(oldScriptElement == null){
        head.appendChild(newScriptElement);
    }else{
        head.replaceChild(newScriptElement,oldScriptElement);
//这里必须用节点替换，因为如果只是修改src属性，浏览器不会将它看成一个新的script元素，因此，不会再次发出请求来获取JSONP.
    }
}

当心可怕的浏览器缓存！

大多数浏览器都有一个特性，如果你反复地获取同一个URL，浏览器为了提高效率会把它缓存起来，所以你会反复得到同样的缓存文件，我们只需要在URL的末尾增加一个随机数，就会诱使浏览器认为它是一个从来没有见过的新URL。

'"<>{{7*7}}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Headfirst HTML5:与web交流通信API

如何向Web服务器做出请求？浏览器向服务器请求页面：它向服务器做出一个HTTP请求，服务器会返回页面，并随之返回另外一些（通常）只有浏览器能看到的元数据。浏览器还可以采用同样的方式通过 HTTP 从web服务器获取数据。请求：GET /gumballsales HTTP/1.1//使用HTTP1.1协议得到"/gumballsales"(服务器上的应用）的资源Host:gum...
复制链接

扫一扫