JS访问后台服务与JSONP使用

JS访问后台服务JSONP

1. XMLhtmlRequest

2. JSON

3. JSONP跨域

XMLhtmlRequest:

XMLhtmlRequest是JS中访问后台服务的对象,它有以下几个方法:

属性与方法 解释
request.open("GET", url); 设置访问方式GET或POST,还有后台地址URL
request.onload = function () { } 设置访问后的回调函数
send(null) 发送请求,参数是要发送的内容,可空
responseText属性 访属性包含后台服务返回的数据
以下是使用代码
window.onload =function()
{
   // var url = "";
   // 创建请求对象
    var request = new XMLHttpRequest();
   // 建立一个请求,这里没有打开哦
    request.open("GET", url);
  //  XMLhtmlRequest level2版本不支持ie8 浏览器从远程服务器得到一个回答时,它会调用这个函数 
    request.onload = function () {
    //    返回码为200或者OK,然后可以对这个数据做任何处理
        if (request.status == 200) {
        updateSales(request.responseText);
        }
        else {
            alert("返回失败");
        }
    }
   // XMLhtmlRequest level1版本支持ie8 
     request.onreadystatechange = function () {
        if (request.readyState == 4 && request.status == 200) {
          updateSales(request.responseText);
        }
    }
   // 发送这个请求send(请求),参数是要发送的内容,没有内容则为null
    request.send(null);

}

2.JSON

JSON(键值对)是目前流行的数据格式,js中有JSON对象可以操作对象与JSON数组的相互转换,有以下方法:

属性与方法 解释
JSON.stringify(newclass1) 这个方法负责将对象转化为json数据
JSON.parse(jsonString); 这个方法负责将json数据转为对象
使用代码
//定义一个类
function class1(string1, string2,array1) {
    this. string1= string1;
    this. string2= string2;
    this. array1= array1;
}
function jsonToObject()
{
    //创建一个包含数组字符串数字的对象
    var newclass1= new class1 ("string1", "string2", ["ar1", "ar2", "ar3"]);
    //转化成json(键值对)
    var jsonString = JSON.stringify(newclass1);
    //将json字符串转化为对象
    var jsonclass1Object = JSON.parse(jsonString);

    window.document.write(jsonMovieObject. string1);
}

4. JSONP跨域

在js中,有一个安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JS代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容,但在一些场景中需要访问,这时候就可以考虑使用JSONP进行操作。

使用方法:

1.先考虑一下这个安全限制中允许哪种方式访问,我们会发现<script src=””>这个元素中指定的地址是可以突破同源策略中限制的,scritp会加载目前js并执行。
2.如何使用:
第一步 建一个页面在页面在中写入script在浏览器中加载目标js , test.js中包含一行代码alert(“成功访问”);

<script src="test.js"></script>
<!DOCTYPE html >
<html >
<head>
<meta charset=gb2312" />
<title>test</title>
</head>
<script src="test.js"></script>
<body>
</body>
</html>

第二步 在浏览器中直接打开页面就可以在页面上看到这个提示(成功访问);
考虑一个问题: 如果将test.js中的代码改变一下变成:xSumY(a,b); 并且在页面在的js中写出这个方法的实现,再加载浏览器会怎么样,很好,他会执行这个方法,计算出两个值的和。

<!DOCTYPE html >
<html >
<head>
<meta charset=gb2312" />
<script>
function xSumY(a,b)
{
   alert(a+b);
}
</script>
<title>test</title>
</head>
<script src="test.js"></script>
<body>
</body>
</html>

可以看到同源策略不会对限制script加载 js,可以通过这个方法访问到被限制的js代码。_
<br /><br /><br /><br />

html代码

<!doctype html>
<html lang="eh">
<head>
    <title>访问后台</title>
    <script src="XmlRequest.js"></script>
    <link type="text/css" rel="stylesheet" href="mightygumball.css">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
</head>
<body>
    <h1>访问后台</h1>
    <div id="sales">
    </div>
</body>
</html>

JS代码

// JavaScript Document
window.onload = function () {
    //是否通过JSONP访问数据或本地访问数,默认TRUE
    if (false) {
        //创建一个定时器
        var intervalID = setInterval(handleRefresh, 3000);
        //结束定时器
        // clearInterval(intervalID);
    } else {
       var url = " http://192.168.1.102/javascript/XMLhtmlRequest/XMLRequest/sales.json";
        // 创建请求对象
        var request = new XMLHttpRequest();
        // 建立一个请求,这里没有打开哦
        request.open("GET", url);

        //默认使用更高级的浏览器
        if (true) {
            //  XMLhtmlRequest level2版本不支持ie8 浏览器从远程服务器得到一个回答时,它会调用这个函数 
            request.onload = function () {
                //    返回码为200或者OK,然后可以对这个数据做任何处理
                if (request.status == 200) {
                    localupdateSales(request.responseText);
                }
                else {
                    alert("返回失败");
                }
            };
        } else {
            // XMLhtmlRequest level1版本支持ie8 
            request.onreadystatechange = function () {
                if (request.readyState == 4 && request.status == 200) {
                    localupdateSales(request.responseText);
                }
            };
        }
        // 发送这个请求send(请求),参数是要发送的内容,没有内容则为null
        request.send(null);
    }
}


var lastReportTime = 0;
//定时器循环调用的方法,创建一个script覆盖到html中(如何存在就覆盖,否则就直接添加)
function handleRefresh() {
  
    var url = "http://gumball.wickedlysmart.com?callback=updateSales" +
     "&lastreporttime=" + lastReportTime +
     "&random=" + (new Date()).getTime();
    //创建一个新的script元素
    var newScriptElement = document.createElement("script");
    newScriptElement.setAttribute("src", url);
    newScriptElement.setAttribute("id", "jsonp");

    //获取一下以前的script元素
    var oldScriptElement = document.getElementById("jsonp");
    //获取head元素
    var head = document.getElementsByTagName("head")[0];
    //判断原来的script存不存在
    if (oldScriptElement == null) {
        //不存在就直接添加上去
        head.appendChild(newScriptElement);
    }
    else {
        //存在就直接替换
        head.replaceChild(newScriptElement,oldScriptElement);
    }
}

//JSONP 回调方法,参数包含返回的数据,将内容循环添加到DIV
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.setAttribute("class", "saleItem");
        div.innerHTML = sale.name + " sold " + sale.sales + " gumballs";
        salesDiv.appendChild(div);
    }
    if(sales.length>0)
    {
        lastReportTime = sales[sales.length - 1].time;
    }
}
//本地数据更新
function localupdateSales(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.innerHTML = sale.name + "sold" + sale.sales + " gumballs";
        salesDiv.appendChild(div);
    }
}



//以下两个方法Movie与jsonToObject,是程序以外的小实验,json数据与对象的相互转换,包含数组
function Movie(title, genre, rating, showtimes) {
    this.title = title;
    this.genre = genre;
    this.rating = rating;
    this.showtimes = showtimes;
    this.getNextShowing = function() {
        var now = new Date().getTime();
        for (var i = 0; i < this.showtimes.length; i++) {
            var showtime = getTimeFromString(this.showtimes[i]);
            if ((showtime - now) > 0) {
                return "Next showing of " + this.title + " is " + this.showtimes[i];
            }
        }
        return null;
    };
}
function jsonToObject()
{
    //创建一个包含数组字符串数字的对象
    var plan9Movie = new Movie("plan 9 from outer space", "cult classic", 2, ["3:00pm", "7:00pm", "11:00pm"]);
    //转化成json(键值对)
    var jsonString = JSON.stringify(plan9Movie);
    //将json字符串转化为对象
    var jsonMovieObject = JSON.parse(jsonString);

    window.document.write(jsonMovieObject.title);
}
单词 解释
request 请求
respone 响应
Interval 间隔
status 状态
local 本地
send 发送
set 设置
Attribute 属性
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Section1、为什么要跨域? 自古以来(1995年起),为了用户的信息安全,浏览器就引入了同源策略。那么同源策...
    不去解释阅读 590评论 0 0
  • Section1、为什么要跨域? 自古以来(1995年起),为了用户的信息安全,浏览器就引入了同源策略。那么同源策...
    qhaobaba阅读 397评论 0 0
  • JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的...
    西瓜w阅读 1,798评论 0 1
  • 我是一个品牌设计公司的资深视觉设计师,对处理文件,分类文件,团队协作项目设计等有着相当高的要求。平时不太喜欢常常呆...
    品品资造阅读 1,001评论 4 21
  • “我的身体不属于我自己,必须听令于S。” 早上六点五十,闹钟已经响第二道了,滞重的身体仿佛被黏在了床上,怎么也起不...
    799c93c9a673阅读 239评论 1 0