Ajax及跨域
Posted 挨踢小子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax及跨域相关的知识，希望对你有一定的参考价值。
图 | 网络
文 | 大风吹啊吹
——此文仅代表个人学习所得，欢迎阅览
如有侵权，请私信删除
摘要：Ajax及跨域概念AjaxAjax,Asynchronus javascript and XML,字母意思:异步的 JavaScript 和XML,是指一种创建交互式网页应用的网...
Ajax及跨域
概念
Ajax
Ajax，Asynchronus JavaScript and XML，字母意思：异步的 JavaScript 和 XML，是指一种创建交互式网页应用的网页开发技术。
用于异步地去获取XML作为数据交换的格式，当然，现在的 ajax 并不仅仅局限于XML作为数据交换格式，还可以像纯文本、XML、html、JSON 等格式均可。
特点
使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。
避免页面重载（这是Web初期的标准做法）的能力使Web应用感觉更像传统的桌面应用。
Web应用可以使用Ajax技术把用户的交互数据记录到服务器中；也可以开始只显示简单页面，之后按需加载额外的数据和页面组件来提升应用的启动时间。
异步原理
Ajax 的 A 就是 asynchronous 的简写，表示异步。
同步和异步：
同步，按照代码书写的顺序，一个任务一个任务的来执行。 异步，并不是按照代码书写的顺序，通常会结合回调和事件来执行相应代码。 在同步中，如果有一个任务耗时较长，整个的后面任务都需要等待。 在异步中，可以将耗时较长先放起来，执行其他的，其他的执行完毕，回头再执行这个。 同步：提交请求->等待服务器处理->处理完毕返回 阻塞模式。 异步：请求通过事件触发->服务器处理->处理完毕。非阻塞模式。
目的
为什么需要Ajax
首先，我们都了解软件的两种架构形态，C/S（Client/Server）和B/S（Browser/Server）。它们的区别如下：
C/S，在客户端安装了客户端软件之后，整个程序的运行，分担到客户端和服务器端。用户在操作的时候，体验更好，响应速度非常快。
B/S，所务的服务都放在服务器端，通过浏览器使用服务器，用户在操作的时候，体验不太好，响应速度特别慢。
B/S的好处，就是不需要安装客户端，软件维护和更新比较方便，用户体验不好。
C/S的好处，用户体验够好，响应及时，但是软件的维护和更新比较麻烦。
随着互联网的发展，越来越多的C/S应用慢慢 转成的B/S，这也是未来的趋势。但是矛盾很突出，B/S的响应速度慢。需要B/S模式具备C/S模式的快速响应特点。
Ajax的出现就是为了解决这个问题-----异步刷新。
在异步刷新机制，整个页面不用跳转，只需要更新需要变化的地方。
Ajax 能干什么
表单交互
动态标签页
及时编辑
地图类应用
移动APP
...
宗旨：提升页面的访问速度，提高用户体验。
发展历程
2005年2月，Adaptive Path公司的Jesse James Garrett最早提出这个概念。它出现在Garrett的文章“Ajax: A New Approach to Web Applications”中。这篇文章描述了混合使用XHTML、CSS、JavaScript、DOM、XMLHttpRequest进行Web开发将会成为一种新的趋势。
同年，Google在三大产品中使用了Ajax技术：
Google Suggest
Google Maps
Gmail。
实际上，Ajax发展经历了三个时代：
Ajax前传，使用iframe实现局部刷新技术；
Ajax正传，传统的Ajax；
Ajax新传，下一代Ajax，反向Ajax。
早起 Ajax 实现
2005年，没有 Ajax 的概念，但是异步刷新的需要还是非常多。常用的方式就是 iframe。
实现原理
第一，iframe有一个src属性，通过设置src属性，发出请求，发出请求的时候不会跳转；
第二，iframe其实就是指向单独的页面，可以在其中进行任意的操作，可以在iframe中书写js代码，可以去操作父页面。
iframe 的优缺点
优点，实现起来特别简单，兼容性好。
缺点，功能比较弱，在服务端需要写大量的代码。
简单示例：
前台代码：
<body><h2>用户注册</h2><form action="/reg" method="post"> <p> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <span id="msg"></span> </p> <p> <label for="password">密 码：</label> <input type="password" id="password" name="password"> </p> <p><input type="submit" value="注册"></p></form><iframe frameborder="0" width="0" height="0" id="iframe1"></iframe><script> var iframe1 = document.getElementById('iframe1'); var username = document.getElementById('username'); username.addEventListener('blur',function(){ iframe1.src = "/check?username=" + this.value; });</script></body>
服务器端代码：
const express = require('express');const bodyParser = require('body-parser');const path = require('path');const app = express(); app.get('/',(req,res)=>{ res.sendFile(path.join(__dirname,'login.html')); }); app.post('/reg',(req,res)=>{ let username = req.body.username; let password = req.body.password; // 检测用户名是否可用，典型的做法需要去连接数据库，取出所有用户名，进行查询比较 // TODO // 这种方式，可以满足需求，但是用户体验极差 // 每次都是填写完所有的表单内容，才能做一些检测 // 整个页面已经发生刷新跳转});// 模仿数据库let users = ['admin','test']; app.get('/check',(req,res)=>{ let username = req.query.username; if (inArray(username,users)) { res.send("<script>window.parent.document.getElementById('msg').innerHTML='对不起,用户名已被占用，请重新注册！'</script>"); } else { res.send("<script>window.parent.document.getElementById('msg').innerHTML='恭喜,用户名可用！'</script>"); } }); app.listen(3000,()=>{ console.log('server is listening in port 3000...'); });// 简单封装一个方法，用于检测一个值是否在数组中存在function inArray(str,arr){ for(let i=0; i<arr.length; i++){ if(str == arr[i]){ return true; break; } } return false; }
完整的Ajax通信流程
首先要创建一个 Ajax 对象
var xhr = new XMLHttpRequest();
状态：readyState: status: responseText:
初始化
状态：readyState: status: responseText:
调用 open() 方法，开启一个请求，但没有向服务器端发起请求
xhr.open(method, url [,async = true]);
状态：readyState: 1 status: responseText:
调用 send() 方法，正式向服务器端发起请求
get
xhr.send([data=null]);
post
xhr.setRequestHeader(header,value);
header:content-type
表单value:application/x-www-form-urlencoded
文件上传value:multipart/form-data
状态：readyState:2 status: responseText:
当服务器端返回数据，浏览器端接收数据时
状态：readyState:3 status: responseText:
当浏览器端结束请求的时候
xhr.onreadystatechange = function(callback){ if(xhr.readyState == 4){ if( (xhr.status >= 200 && xhr.status < 300) || xhr.status==304 ){ callback(xhr.responseText); } else { alert('request was unsuccessful:' + xhr.status); } } }
状态：readyState:4 status:200 responseText:<!DOCTYPE html>响应返回值
XMLHttpRequest 对象
定义
通用定义：XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。
来自MSDN的解释：XMLHttpRequest提供客户端同http服务器通讯的协议。客户端可以通过该对象向http服务器发送请求并使用XML文档对象模型处理回应。
属性
onreadystatechange* 指定当readyState属性改变时的事件处理句柄。只写 readyState 返回当前请求的状态，只读. responseBody 将回应信息正文以unsigned byte数组形式返回.只读 responseStream 以Ado Stream对象的形式返回响应信息。只读 responseText 将响应信息作为字符串返回.只读 responseXML 将响应信息格式化为Xml Document对象并返回，只读 status 返回当前请求的http状态码.只读 statusText 返回当前请求的响应行状态，只读
方法
abort 取消当前请求 getAllResponseHeaders 获取响应的所有http头 getResponseHeader 从响应信息中获取指定的http头 open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码) send 发送请求到http服务器并接收回应 setRequestHeader 单独指定请求的某个http头
创建xhr对象
Microsoft最早把XMLHttpRequest对象引入到IE5中，且在IE5和IE6中它只是一个ActiveX对象。IE7之前的版本不支持非标准的XMLHttpRequest()构造函数，兼容如下：
function createXHR(){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(e1){ try{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e2){ try{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e3){ throw new Error("XMLHttpRequest is not supported"); } } } return xhr; }
请求方式
两种请求方式，有所不同。
get 请求
数据大小，受限于浏览器，大部分2k的限制，但每个浏览器不一样，chrome 是8k
数据形式，查询字符串方式，名值对的形式，中间用 & 链接
安全性，不太安全
数据的传递通过查询字符串，在url后面用 ？ 跟上
xhr.send([data=null])
post请求
数据大小，原则上没有限制，php.ini中默认上限是8M
数据形式，把 form 表单的数据给请求出来以xml形式传递给服务器
数据的传递得使用 send 方法，其中数据以键值对的形式来传递
安全性，比较安全
需要设置请求头信息
需要设置请求头部 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(Formdata);
post请求注意事项
使用setRequestHeader()把传递的数据组织为xml格式
调用send()方法时，需要传递数据
该方式请求的同时也可以传递get参数信息，使用get方式来接收该信息即可
请求参数序列化
get请求中，如果参数是对象，那么我们需要对它进行转换，编码之后，不需要解码，浏览器会自动解码；
var ulr = "example.json?" + serialize(formdata); xhr.open('get', url, true); xhr.send(null);
post请求中，有特殊符号(=和&)和中文需要编码，encodeURIComponent方法
xhr.open('post', 'example.json', true); xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); xhr.send(serialize(formdata));
序列化方法：
function serialize(data){ if(!data) return ''; var pairs = []; for(var name in data){ if(!data.hasOwnProperty(name)) continue; if(typeof data[name] === 'function') continue; var value = data[name].toString(); name = encodeURIComponent(name); value = encodeURIComponent(value); pairs.push(name + '=' + value); } return pairs.join('&'); }
状态说明
0（未初始化）
此阶段确认xhr对象是否创建成功，为调用open方法做好准备，值为0表示对象已经存在，否则浏览器报错
1（载入）
对xhr进行初始化，调用open方法，根据参数完成对象状态的设置，并调用send开始向服务器端发送请求，值为1表示正在向服务器端发送请求
2（载入完成）
接收服务器端的响应数据，但获得的还是服务器响应的原始数据，并不能在客户端使用。值为2表示已经接收完全部响应数据，并为下一阶段对数据进行解析做好准备
3（交互）
解析接收到的服务器端响应数据，根据服务器头部返回的MIME把数据转换成对应格式，为在客户端调用做好准备。3表示正在解析数据
4（完成）
确认全部数据已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过xhr对象的属性取得数据
返回数据格式
xml responseXML 和 text responseText
作为文本返回时，返回的是字符串，但有些字符串比较特殊，如html代码、json对象，所以有如下几种形式
纯文本字符串，如1、0、yes、no等，直接处理
返回HTML字符串，以innerHTML的方式写回到页面中
json格式，由js解析
跨域资源访问
同源策略
两个页面拥有相同的协议（protocol）端口（port）和主机（host），那么这两个页面就属于同一个源（origin）
不满足同源策略的资源访问，叫跨域资源访问
注意
如果是协议和端口造成的跨域问题“前台”是无能为力的
(“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。)
实现方法
CORS
CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。
CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。
目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
对于开发者来说，CORS通信与同源的Ajax通信没有差别，代码完全一样。
浏览器一旦发现Ajax请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
参考阮老师的文章：http://www.ruanyifeng.com/blog/2016/04/cors.html
JSONP
JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。单向的数据请求。
JSONP的原理与实现思路
Web页面通过调用外部js文件，可实现跨域请求。扩展一下：但凡有src属性的标签都具有跨域能力，例如<script><img><iframe>。
跨域服务器动态生成数据并存入js文件(通常json后缀)，返回给客户端，供客户端调用；因为对json数据格式支持度都非常好。
为了便于客户端使用数据，形成一个非正式传输协议，称为JSONP。该协议重点是允许用户传递一个callback参数给服务器，然后服务器返回数据时 将此callback参数作为函数名包裹住JSON数据，使得客户端可以随意定制自己的函数来自动处理返回数据。
因为通过script标签引入的js是不受同源策略的限制的。所以我们可以通过script标签引入一个js或者是一个其他后缀形式（如php，jsp等）的文件，此文件返回一个js函数的调用
示例如下：（服务器端用node.js）
浏览器端代码：
动态生成script标签，创建一个callback，以查询字符串形式跟在src的url后边
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSONP</title></head><body> <button id="btn">JSONP</button> <script> var btn = document.getElementById('btn'); function show(data){ console.log(data); } btn.onclick = function(){ var url = "http://localhost:4000/test?callback=show"; var script = document.createElement('script'); script.setAttribute('src',url); document.getElementsByTagName('head')[0].appendChild(script); } </script></body></html>
服务器端代码：
const express = require('express'); const path = require('path'); const app = express(); app.get('/',(req,res)=>{ res.sendFile(path.join(__dirname,'index.html')); }); app.listen(3000,()=>{ console.log('http server is listening in port 3000'); });
跨域服务器端代码：获取请求url中的callback，把callback和json数据组合后返回，这里需要注意，node.js返回数据的时候，设置res.type("text/javascript");，
const express = require('express');const path = require('path');const app = express(); app.get('/test',(req,res)=>{ let test = require('./test.json'); const callback = req.query.callback; res.type("text/javascript"); res.send(callback+'('+JSON.stringify(test)+')'); }); app.listen(4000,()=>{ console.log('http server is listening in port 4000'); });
json数据：
{ "title" : "JSONP", "time" : "2017-1-1"}
结果：
图1
图2
优缺点
JSONP的优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；
它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
并且在请求完毕后可以通过调用callback的方式回传结果
JSONP的缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题
CORS和JSONP对比
JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
CORS与JSONP相比，无疑更为先进、方便和可靠。
其他实现方法
通过document.domain跨域
通过location.hash跨域
通过HTML5的postMessage方法跨域
通过window.name跨域
CSST (CSS Text Transformation)
一种用 CSS 跨域传输文本的方案
优点：相比 JSONP 更为安全，不需要执行跨站脚本。
缺点：没有 JSONP 适配广，CSST 依赖支持 CSS3 的浏览器。
原理：通过读取 CSS3 content 属性获取传送内容。通过创建一个 link 请求到 css 文件，然后通过 computedStyle = window.getComputedStyle 获取到指定元素的 style 对象，再通过 computedStyle .content 获取到内容
这里还有你想要看的哦！
......
代码技巧（daimajiqiao）
编程牛人
挨踢小子（LN-aitixiaozi）
以上是关于Ajax及跨域的主要内容，如果未能解决你的问题，请参考以下文章