Ajax与CORS通信
处理跨域的主要方法
- JSONP
- CORS
本文主要讨论CORS解决Ajax因为浏览器同源策略不能跨域请求数据的问题。
1. JSONP
JSONP跨域可以参考下面这篇博客
JSONP跨域
2. CORS
关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解。
跨域资源共享 CORS
- 跨域资源共享CORS(Cross-origin resource sharing)
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而解决了AJAX不能跨域请求的问题。
- CORS需要浏览器和服务器同时支持。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的Ajax通信没有差别，代码完全一样。浏览器一旦发现Ajax请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
CORS允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了Ajax只能同源使用的限制。
Ajax简介
Ajax即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）
Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
XMLHttpRequest对象是浏览器提供的一个API，用来顺畅地向服务器发送请求并解析服务器响应，当然整个过程中，浏览器页面不会被刷新。
注意，Ajax 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。
创建Ajax步骤：
1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
兼容各个浏览器的创建方法
function createRequest (){
try {
xhr = new XMLHttpRequest();
}catch (tryMS){
try {
xhr = new ActiveXObject("Msxm12.XMLHTTP");
} catch (otherMS) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch (failed) {
xhr = null;
}
}
}
return xhr;
}
2.准备请求
xhr.open(method,url,async);
- open() 的第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母，否则其他一些浏览器（比如FireFox）可能无法处理这个请求。
- 第二个参数是要作为请求发送目标的URL。
- 第三个参数是true或false，表示请求是异步还是同步。true是异步，默认true。
3.发送请求
xhr.send();
send() 方法的参数可以是任何你想发送给服务器的内容
4.处理响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
- onreadystatechange ：当处理过程发生变化的时候执行下面的函数
- readyState状态值
- 0：请求未初始化。
- 1：正在加载) or (已建立服务器链接)
- 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
- 3：请求在处理中；
- 4：响应已完成。
responseText：服务器以文本字符的形式返回
responseXML：获得 XML形式的响应数据
对象转换为JSON格式使用JSON.stringify
json转换为对象格式用JSON.parse()
返回值一般为json字符串，可以用JSON.parse(xhr.responseText)转化为JSON对象
代码实现如下：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="myButton">点我</button>
<script src="./main.js"></script>
</body>
</html>
JS
myButton=document.getElementById('myButton')
myButton.addEventListener('click',(e)=>{
let xhr=new XMLHttpRequest()
xhr.onreadystatechange=()=>{
if( xhr.readyState===4){
console.log("请求响应都完毕了")
if( xhr.status>=200&& xhr.status<300){
console.log("请求成功")
console.log(typeof xhr.responseText)//判断返回数据的类型是String
console.log( xhr.responseText)
let string= xhr.responseText
let object=window.JSON.parse(string)
console.log(typeof object)
console.log(object)
}else if( xhr.status>=400){
console.log("请求失败")
}
}
}
xhr.open('GET','/xxx')
xhr.send()
})
if(path==='/xxx'){
response.statusCode=200
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.write(`
{
"note":{
"to":"xxx",
"from":"yyy",
"content":"hello"
}
}
`)
response.end()
}
当发送请求的时候，就会根据xml.open('GET','/xxx')找到对应的请求路径。在本文是找到/xxx路径，然后返回所请求的数据，在浏览器运行结果如下。
CORS跨域
关于CORS细节可以阅读阮一峰的跨域资源共享 CORS 详解。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="myButton">点我</button>
<script src="./main.js"></script>
</body>
</html>
JS
myButton.addEventListener('click',(e)=>{
let xhr=new XMLHttpRequest()
xhr.open('GET','http://jack.com:8002/xxx')
xhr.onreadystatechange=()=>{
if(xhr.readyState===4){
console.log("请求响应都完毕了")
if(xhr.status>=200&&xhr.status<300){
console.log("请求成功")
console.log(typeof xhr.responseText)
console.log(xhr.responseText)
let string=xhr.responseText
let object=window.JSON.parse(string)
console.log(typeof object)
console.log(object)
}else if(xhr.status>=400){
console.log("请求失败")
}
}
}
xhr.send()
})
if(path==='/xxx'){
response.statusCode=200
response.setHeader('Content-Type', 'text/json;charset=utf-8')
response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')
response.write(`
{
"note":{
"to":"xxx",
"from":"yyy",
"content":"hello"
}
}
`)
response.end()
}
可以看到当代码没有下面这一行代码时Ajax并不能跨域请求 response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')的时候，结果如下
从结果可以看出，因为浏览器的同源策略，Ajax不能跨域请求
解决的办法是添加 response.setHeader('Access-Control-Allow-Origin','http://blog1.com:8001')
Ajax与CORS通信的更多相关文章
- Django 之Ajax&Json&CORS&同源策略&Jsonp用法
什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
- 使用ajax与服务器通信的步骤
使用ajax与服务器通信的步骤: 1. 创建一个XMLHttpRequest对象 2. 创建url,data,通过xmlHttpRequest.send() 3. 服务器端接收ajxa的请求,做相应处 ...
- 使用Ajax与服务器端通信
Ajax这个词,不代表任何东西,它仅仅是称呼一系列促进客户端与服务器通信的技术时所用的一个术语.服务器通信时Ajax技术的核心内容,其目标就是从客户端向服务器发送信息,并接受后者的回传,以求在此过程中 ...
- Ajax跨域通信方法
1.Jsonp.document.domain+iframe.window.name.window.postMessage.服务器上设置代理页面. 2.Jsonp(json with padding) ...
- 解决ajax请求cors跨域问题
”已阻止跨源请求:同源策略禁止读取位于 ***** 的远程资源.(原因:CORS 头缺少 'Access-Control-Allow-Origin').“ ”已阻止跨源请求:同源策略禁止读取位于 ** ...
- 嵌入式开发——boa服务器下的ajax与cgi通信
博主最近在最有做一个嵌入式课程设计,要求是利用基于cortax a8的物联网实验箱做一个简单的嵌入式网页交互系统作为课程设计来验收评分.因为本身自己是学前端的,所以网页部分并不是重点,主要是和boa服 ...
- 黄聪：利用iframe实现ajax 跨域通信的解决方案（转）
原文:http://www.cnblogs.com/xueming/archive/2013/02/01/crossdomainajax.html 在漫长的前端开发旅途上,无可避免的会接触到ajax, ...
- .net MVC下跨域Ajax请求(CORS)
二.CROS (Cross-origin Resource Sharing) CROS相当于一种协议,由浏览器.服务端共同完成安全验证,进行安全的跨域资源共享.对于开发人员来说就跟在本站AJAX请求一 ...
- CORS通信
CORS 是一个 W3C 标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨域的服务器,发出XMLHttpRequest请 ...
随机推荐
- Python 包内的导入问题（绝对导入和相对导入）
基本概念 Python 中的包,即包含 __init__.py 文件的文件夹. 对于 Python 的包内导入,即包内模块导入包内模块,存在绝对导入和相对导入问题. 普通 Python 模块的搜索路径 ...
- linux内存源码分析 - 内存压缩(同步关系)
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 概述 最近在看内存回收,内存回收在进行同步的一些情况非常复杂,然后就想,不会内存压缩的页面迁移过程中的同步关系也 ...
- git冲突Please move or remove them before you can merge
解决Git冲突造成的Please move or remove them before you can merge git clean -d -fx ""其中x -----删除忽略 ...
- 开源工具 DotnetRSA 快速生成和转换RSA秘钥
一.简介 DotnetRSA 是一个利用 .NET Core 2.1 开发的 .NET Global Tool,是可以想npm全局安装一样,安装在你的系统中,只需敲一行命令便可以快速生成RSA加密算法 ...
- 详解JSOUP的Select选择器语法
本文参考:JSOUP中文文档 问题 你想使用类似于CSS或jQuery的语法来查找和操作元素. 方法 可以使用Element.select(String selector) 和 Elements.se ...
- 使用Python的http.server实现一个简易的Web Api对外提供HanLP拼音转换服务
由于采集省市区镇数据需要对地名进行拼音转换,由于第三方高准确度接口对IP进行了限制,处理大量数据变得异常缓慢. 使用了一个折中的办法,省市区 3级(3千+)用高准确度接口(几乎没有拼错的地名),镇级( ...
- 性能调优2：CPU
关系型数据库严重依赖底层的硬件资源,CPU是服务器的大脑,当CPU开销很高时,内存和硬盘系统都会产生不必需要的压力.CPU的性能问题,直观来看,就是任务管理器中看到的CPU利用率始终处于100%,而侦 ...
- R实战 第十二篇：随机数
由R生成的随机数实际上伪随机数,也就是说,随机数是由某种算法而不是真正的随机过程产生的,随机数生成器需要一个初始值来生成数字,该初始值叫做种子.通过把种子设置为特定的值,可以保证每次运行同一段代码时都 ...
- Linux Namespace : 简介
在初步的了解 docker 后,笔者期望通过理解 docker 背后的技术原理来深入的学习和使用 docker,接下来的几篇文章简单的介绍下 linux namespace 的概念以及基本用法. na ...
- 获得其他程序弹出菜单的内容（一个困扰许久的问题o(╯□╰)o）
刚开始到现在公司的时候接到一个任务:开发一个activex控件,自动操作本地exe程序,当时遇到弹出菜单无法获取的问题,还好不影响,最近又遇到这个问题,绕不过去了,于是昨天花了一个上午百度了个遍,总算 ...