JavaScript JSON AJAX 同源策略 跨域请求
网页和Ajax和跨域的关系
一、JSON 介绍
1. JSON: JavaScript Object Notation
Because JSON syntax is derived from JavaScript object notation, very little extra software is needed to work with JSON within JavaScript.
A number (integer or floating point)
A string (in double quotes)
A Boolean (true or false)
An array (in square brackets)
An object (in curly braces)
null
2. Javascript中的JSON对象 MDN
JSON
object contains methods for parsing JavaScript Object Notation (JSON) and converting values to JSON. It can't be called or constructed, and aside from its two method properties it has no interesting functionality of its own.JSON.parse() 把JSON object 转化成 javascript中的 数值类型
JSON.stringify() 恰好相反
3. Josn解析
二、AJAX
Ajax (short for asynchronous JavaScript and XML(XML只是之前名字的来历,现在更多的是json格式的数据交换,当然也有其它数据格式)) is a set of(多种技术的合集) web development techniques using many web technologies on the client-side to create asynchronous Web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page(允许网页或是web应用来动态地、异步地的交换数据). In practice, modern implementations commonly substitute JSON for XML(现在更多使用json代替xml) due to the advantages of being native to JavaScript.
Ajax is not a technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.
AJAX is a misleading name. You don't have to understand XML to use AJAX.
1 The XMLHttpRequest Object (MDN)
eg:
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2 http请求
GET
is used to retrieve remote data, and POST
is used to insert/update remote data.1. status
- 1xx:指示信息--表示请求已接收,继续处理。
- 2xx:成功--表示请求已被成功接收、理解、接受。
- 3xx:重定向--要完成请求必须进行更进一步的操作。
- 4xx:客户端错误--请求有语法错误或请求无法实现。
- 5xx:服务器端错误--服务器未能实现合法的请求。
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误
2. readyState
0: 请求未初始化,open()方法还没有调用
1: 服务器连接已建立
2: 请求已接收,接收到头信息了
3: 请求处理中,接收到响应主体了
4: 请求已完成,且响应已就绪,也就是相应已经完成了
3. onreadystatechange
An EventHandler
that is called whenever the readyState
attribute changes. The callback is called from the user interface thread.
request.open(method,url,asy)
requset.send(string)
如果是get请求,则参数直接拼接在url里面了
如果是send请求,则参数需要写在send()方法里面
post请求
function post(){
var req = createXMLHTTPRequest();
if(req){
req.open("POST", "http://test.com/", true);
req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");
req.send("keywords=手机");
req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
alert("success");
}else{
alert("error");
}
}
}
}
}
get请求
function get(){
var req = createXMLHTTPRequest();
if(req){
req.open("GET", "http://test.com/?keywords=手机", true);
req.onreadystatechange = function(){
if(req.readyState == 4){
if(req.status == 200){
alert("success");
}else{
alert("error");
}
}
}
req.send(null);
}
}
三、同源策略
同源策略
同源策略限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式。
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
如果非同源,共有三种行为受到限制。
- (1) Cookie、LocalStorage 和 IndexDB 无法读取。
- (2) DOM 无法获得。
- (3) AJAX 请求不能发送。
Cookie
Cookie总是保存在客户端中,按在客户端中的存储位置,可分为内存Cookie和硬盘Cookie。
四、跨域
跨域的含义

同源政策规定,AJAX请求只能发给同源的网址,否则就报错。
除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。
- JSONP
- WebSocket
- CORS
解决跨域问题的几种方法:
1 JSONP
说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
<script>
元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。2 WebSocket
3 CORS
The HTTP headers that relate to CORS are:
Request headers
- Origin
- Access-Control-Request-Method
- Access-Control-Request-Headers
Response headers
- Access-Control-Allow-Origin
- Access-Control-Allow-Credentials
- Access-Control-Expose-Headers
- Access-Control-Max-Age
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
CORS vs JSONP
CORS can be used as a modern alternative(现代浏览器替换jsonp的模式) to the JSONP pattern.
While JSONP supports only the GET request method, CORS also supports other types(支持其它请求) of HTTP requests.
Using CORS enables a web programmer to use regular XMLHttpRequest, which supports better error handling than JSONP.
On the other hand, JSONP works on legacy browsers(老式浏览器) which predate CORS support. CORS is supported by most modern web browsers. Also, while JSONP can cause cross-site scripting (XSS) issues where the external site is compromised, CORS allows websites to manually parse responses to ensure security.
CORS
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
JavaScript JSON AJAX 同源策略 跨域请求的更多相关文章
- JavaScript JSON timer(计时器) AJAX HTTP请求 同源策略 跨域请求
JSON 介绍 1. JSON: JavaScript Object Notation 是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是 ...
- js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
- 【JavaScript】--重点解析之跨域请求
JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON是用字符串来表示Javascript对象,例如可以在django中发送一个JSON格式 ...
- jQuery ajax的jsonp跨域请求
一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...
- JQuery - Ajax和Tomcat跨域请求问题解决方法!
在JQuery里面使用Ajax和Tomcat服务器之间进行数据交互,遇到了跨域请求问题,无法成功得到想要的数据! 错误信息部分截图: 通过错误信息判断知道已经发生在Ajax跨域请求问题了! 当前Tom ...
- 原生js封装ajax,实现跨域请求
描述: 需要ajax跨域请求,用cors跨域方案.服务端设置: header('Access-Control-Allow-Origin: http://front.ls-la.me'); header ...
- jquery ajax GET POST 跨域请求实现
同一段逻辑代码需要在多个网站中使用, 每个网站都新建一个ashx真是扯蛋的作法, 所以想只请求一处的ashx, 这样便于维护和修改, 那么,ajax跨域问题就来了. 废话少说, 直接上代码, 我现 ...
- ajax异步请求/同源策略/跨域传值
基本概念 Ajax 全称是异步的 JavaScript 和 XML . 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- ajax获取json数据及实现跨域请求
最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...
随机推荐
- Python解释器的配置
1.准备工作 安装好Pycharm2017版本 电脑上安装好Python解释器 2.本地解释器配置 配置本地解释器的步骤相对简洁直观: (1)单击工具栏中的设置按钮. (2)在Settings/Pre ...
- 服务端模拟http服务请求客户端
try { InputStream in = req.getInputStream(); int i = -1; ByteArrayOutputStream out = new ByteArrayOu ...
- 浅谈C#.NET防止SQL注入式攻击
1#region 防止sql注入式攻击(可用于UI层控制) 2 3/// 4/// 判断字符串中是否有SQL攻击代码 5/// 6/// 传入用户提交数据 7/// true-安全:f ...
- (转)CentOS7 搭建LVS+keepalived负载均衡(一)
原文:http://blog.csdn.net/u012852986/article/details/52386306 CentOS7 搭建LVS+keepalived负载均衡(一) CentOS7 ...
- JS实现OO机制
一.简单原型机制介绍 继承是OO语言的标配,基本所有的语言都有继承的功能,使用继承方便对象的一些属性和方法的共享,Javascript也从其他OO语言上借鉴了这种思想,当一个函数通过"new ...
- httpclient文件下载
http://blog.csdn.net/nupt123456789/article/details/42721003
- EntityManager对象管理
根据EntityManager对象的管理方式,可以有以下两种类型: — 容器托管的(container-managed)EntityManager对象 容器托管的EntityManager对象最简单, ...
- vue-cli 基础搭建
1.安装node 2.npm install webpack -g 3.npm install vue-cli -g 4.然后进入到文件下边 vue init webpack 文件名字 5.进入工程文 ...
- 跨域拦截Access-Control-Allow-Origin设置多个origin
在Extjs和java项目碰到了需要同时处理跨域,外部要访问后台接口的问题 原来的代码是这样,只能设置一个extjs前台需要过滤的跨域请求 package com.xgt.config; import ...
- .net core 第一篇选择开发工具和环境
.net core 已经发布三年了,社区也逐步成熟.作为微软阵营的一员,忙了一年年底抽点时间系统学习下.学习资料主要为以下为主: 1. https://docs.microsoft.com/zh-cn ...