AJAX JSON类型、跨域

1.1 JSON 格式数据类型

a:纯文本

b:文本网页(默认)

c:xml(旧行业标准)

d:javascript

e:json(新行业标准)

json(工业标准:所有后台交互都是用json):ajax发送数据[格式];json字符串数据格式,用于描述数据,简洁;(轻量级数据格式)

xml重量级

1
2
 <?xml version="1.0"encoding="utf-8"?>
<books><book><id>101</id></book></books>

json轻量级 {“name”:”tom”}

概念:易于阅读和编写,行业内支持很普遍;

语法:基于js语言,但是目前被各种语言支持;

成为一种“异构系统交互数据的标准格式”(可以跨平台使用);

php<– json –>java
java<– json –>网银


1.2 json{字符串}语法要求

1:一个json字符串有且只有一个根,可以是 ;也可以是{ }(对象)
2:json可以表示number,bool,null,字符串;字符串必须用双引号
1
{“name”:”tom”,”age”:10,”set”:true}
3:数组中可以包含多个值,使用逗号分隔,[10,20,304,1]
4:对象中可以包含多个键值对,使用逗号分隔,键和值之间用冒号分隔,键必须是双引号
1
{“name”:”tom”,”age”:10}

1.3 服务器端php中如何将数据转json字符串

php {array–>json string}

php函数:json_encode( ); 索引数组、关联数组都能转换

1
2
3
$str =json_encode($arr);
echo $str; 由于发送json格式字符串,需要指定输出格式
header(“content-type:application/json;charset=utf-8”);

我是图片


1.4 客户端将json字符串解析js对象

html(json string–>js object)
客户端浏览器 JSON.parse();
var result = JSON.parse(str);
result 已经是js对象[ ] / { }

简洁解决方式

1
2
$.get();   自动json.parse( );
$getJSON(); 自动json.parse( );

我是图片

a:从数据库中一次性抓取全部表转二维数组

1
$ json = mysqli_fetch_all($result,MYSQLI_ASSOC)

b:jquery 循环函数 html += ; 来做循环

1
$.echo(data,function(i,obj){ })

我是图片
我是图片

html +=html代码段;可以在中间直接写代码段

2、跨域 CRoss DominRquqest

从一个域名下的某个资源访问另一个域名下的某个资源。

示例:http://tmooc.cn/1.html

a img script css ajax 想访问百度的2.php

访问:http://www.baidu.com/2.php

2.1跨域的种类 4种

1:两个域名不同

2:协议名不同 https http

3:主机名/ip不同

4:端口号不同

报错提示:
我是图片

2.2浏览器允许跨域请求情形

**img/link/script/iframe ……**

2.3浏览器禁止跨域请求情形

浏览器默认禁止XHR跨域请求,跨域访问可能导致外来的数据,对当前页面造成安全风险。
$.get(“www.baidu.com/1.php”,); 从百度拿来的ajax数据可能对当前页面造成安全风险

2.4解决方案JSONP{ }

JSON 与 JSONP区别:

JSON:是一种字符串数据格式,用于描述批量数据。
JSONP:JSON withPadding 填充式JSON:是一种使用JSON数据的方法,用于解决浏览器XHR跨域请求的限制。

JSONP解决思路:

1:发起异步请求,不使用(XHR),使用一个动态创建的script标签,来替换XHR
1
<script src=”跨域地址/.php”></script>
2:要求服务器必须返回一段js片段

doResponse({“name”:”tom”,”age”:20});

3:客户端特意提供一个函数
1
function doResponse(data);
文章作者: Coio
文章链接: http://yoursite.com/2018/07/09/AJAX JSON类型、跨域/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Coio
打赏
  • 微信
  • 支付寶