JS-ajax

json解析##

eval不检查数据是否合法
json.pasrse检查数据是否合法
在线json格式化校验工具:jsonlint.com

Paste_Image.png
Paste_Image.png

eval不会执行数据的检查,直接执行alert语句
JSON.parse()会报错,更加的安全

Paste_Image.png

请求方法改进:
1、服务器端返回JSON字符串:header("Content-Type:application/json;charset=utf-8");

Paste_Image.png

2、服务器端所有返回值写成JSON格式;

Paste_Image.png
Paste_Image.png

3、客户端解析JSON字符串:
JSON.parse(xhr.responseText)

Paste_Image.png

跨域##

跨域概念###

javaScript处于安全方面的考虑,不允许跨域调用其他页面的对象。什么是跨域呢,简单地理解就是因为javaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象

域名地址的组成###

Paste_Image.png

除了服务端地址的改变叫做重定向以外,其他几个可变更的参数中任意一个的改变就叫做跨域。


Paste_Image.png
Paste_Image.png

主域名相同,子域名(可能是多级子域名)

Paste_Image.png

HTTP默认访问80端口
HTTPS默认访问443端口

处理跨域的几种方法###

1. 代理(属于后台的技术)###

Paste_Image.png
Paste_Image.png

2. JSONP###

JSONP只支持get请求,不支持post请求

Paste_Image.png

实现:
前端
更改的地方


Paste_Image.png
Paste_Image.png

服务端
获取 jsonp

Paste_Image.png
jsonp

改变返回的值


jq自动增加了一个参数


Paste_Image.png

服务端返回的值

Paste_Image.png

重点在于:同源策略 + <script>的src不属于同源策略 + 通过<script>的src指向的文件返回服务器端数据。

3.XMLHttpRequest Level2###

所有支持xhr2的服务器都可以实现跨域,只需要去更改服务端

Paste_Image.png

可以参考:http://www.cnblogs.com/wangfupeng1988/p/4060747.html
http://www.cnblogs.com/laneyfu/p/6544452.html

ie如何实现跨域##

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 8,658评论 0 7
  • Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语...
    张玉帅阅读 4,569评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,491评论 19 139
  • 一、浏览器的同源策略 1.什么是同源? 所谓“同源”指的是”三个相同“。相同的域名、端口和协议,这三个相同的话就视...
    徐国军_plus阅读 4,312评论 1 3
  • 机遇总是有的,如果把握不住,不要怨天忧人,只因自己不够优秀;不要把时间当垃圾处理,唯有珍惜光阴,才能提升生命的质量...
    xcy无名阅读 936评论 0 0