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