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	属性