Ajax及跨域请求

时间:2017-01-03
简介:WEB前端|AjaxAjax,Asynchronus JavaScript and XML,字母意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的

Ajax

Ajax,Asynchronus JavaScript and XML,字母意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术。

用于异步地去获取XML作为数据交换的格式,当然,现在的 ajax 并不仅仅局限于XML作为数据交换格式,还可以像纯文本、XML、HTML、JSON 等格式均可。

特点

  1. 使用脚本操纵HTTP和Web服务器进行数据交换,不会导致页面重载。
  2. 避免页面重载(这是Web初期的标准做法)的能力使Web应用感觉更像传统的桌面应用。
  3. 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 src="" 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通信流程

  1. 首先要创建一个 Ajax 对象

var xhr = new XMLHttpRequest();

状态: readyState: status: responseText:

  1. 初始化

状态: readyState: status: responseText:

  1. 调用 open() 方法,开启一个请求,但没有向服务器端发起请求

xhr.open(method, url [,async = true]);

状态: readyState: 1 status: responseText:

  1. 调用 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:

  1. 当服务器端返回数据,浏览器端接收数据时

状态: readyState:3 status: responseText:

  1. 当浏览器端结束请求的时候

    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的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

(“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请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。

JSONP

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。单向的数据请求。

JSONP的原理与实现思路

  1. Web页面通过调用外部js文件,可实现跨域请求。扩展一下:但凡有src属性的标签都具有跨域能力,例如 <script><img><iframe> 。
  2. 跨域服务器动态生成数据并存入js文件(通常json后缀),返回给客户端,供客户端调用;因为对json数据格式支持度都非常好。
  3. 为了便于客户端使用数据,形成一个非正式传输协议,称为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

Ajax及跨域请求(图1)

图2

Ajax及跨域请求(图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 获取到内容

TAGS:Ajax跨域请求

上一编:原生js的ajax设计方案

下一编:没有了

New article Hot article