vue2.0，jsonp的一个小案例 请求百度搜索的接口

vue2.0，jsonp的一个小案例 请求百度搜索的接口

前言:

Big-man接触了浏览器跨域的知识，但是单独写一篇跨域的文章，相信Big-man的小伙伴们都不会仔细地去推敲和采纳，所以干脆引用一个实例去进行处理了。

除了理解跨域的解决办法，Big-man还会进一步分析跨域产生的原因以及跨域的机制，这是Big-man在此测试代码中掌握的以及分享出来的。

跨域资源共享:

前言:

CORS

是一个

W3C

标准，全称是”跨域资源共享”(Cross-origin resource sharing)。

CORS

的作用:

它允许浏览器向跨源服务器，发出

XMLHttpRequest

请求，从而克服

AJAX

只能同源使用的限制。

CORS

的内部机制:

CORS

简介:

CORS

需要浏览器和服务器同时支持该功能，IE浏览器不能低于

IE10

。

整个

CORS

通信过程，都是浏览器

自动

完成，不需要用户参与。对于开发者来说，

CORS

通信与同源的

AJAX

通信没有差别，代码完全一样。浏览器一旦发现

AJAX

请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现

CORS

通信的关键是服务器。只要服务器实现了

CORS

接口，就可以进行跨源通信了。

两种请求(也是

CORS

的请求种类):

浏览器将

CORS

请求分成两大类: 简单请求(

simple request

)和非简单请求(

not-so-simple request

)。

简单请求需要满足的两大条件:

a、请求方法是一下三种方法之一:

HEAD

;

GET

;

POST

.

b、HTTP的头部信息不超过以下几种字段:

Accept

;

Accept-Language

;

Content-Language

;

Last-Event-ID

;

Content-Type

: 只限于三个值

application/x-www-form-urlencoded

,

multipart/form-data

,

text/plain

。

以上的a、b两个需求必须同时满足，没有满足那就属于非简单请求。

浏览器对这两种请求的处理，也是不一样的。

简单请求:

基本流程:

对于简单请求，浏览器直接发出

CORS

请求。具体来说，就是在头信息中，增加一个

Origin

字段。

浏览器发现这次跨源

AJAX

请求是简单请求，就自动在头部信息之中，添加一个

Origin

字段。例如如下的配置代码:

GET /cors HTTP/1.1
Origin: http://api.dan.com Host: api.smart.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0 ...

这部分信息存在于头部信息中

Request Headers

, 在这部分信息中，

Origin

字段用来说明，本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值，决定是否同意这次请求。

如果

Origin

指定的源，不在许可的范围内，服务器会返回一个正常的

HTTP

回应。浏览器发现，这个回应的头信息没有包含

Access-Control-Allow-Origin

字段，就知道错了，从而抛出一个错误，被

XMLHttpRequest

的

onerror

回调函数捕获。注意，这种错误无法通过状态码进行识别，因为

HTTP

回应的状态码有可能是

200

。

如果

Origin

指定的域名在许可范围内，服务器返回的响应，会多出几个头部信息字段。如下所示:

Access-Control-Allow-Origin: http://api.dan.com Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上面的头部信息当中，有三个与

CORS

请求相关的字段，都以

Access-Control-

开头。

a、

Access-Control-Allow-Origin

:

该字段是必须的。它的值要么是请求时

Origin

字段的值，要么是一个

*

, 表示接受任意域名的请求。

b、

Access-Control-Allow-Credentials

该字段可选。它的值是一个布尔值，表示是否允许发送

Cookie

。默认情况下，

Cookie

不包括在

CORS

请求之中。设为

true

，即表示服务器明确许可，

Cookie

可以包含在请求中，一起发给服务器。这个值也只能设为

true

，如果服务器不要浏览器发送

Cookie

，删除该字段即可。

c、

Access-Control-Expose-Headers

该字段可选。

CORS

请求时，

XMLHttpRequest

对象的

getRequestHeader()

方法只能拿到6个基本字段：

Cache-Control

;

Content-Language

;

Content-Type

;

Expires

;

Last-Modified

;

Pragma

.

如果想要去拿到其他字段的话，也就必须在

Access-Control-Expose-Headers

里面指定。

上面的例子指定，

getResponseHeader('FooBar')

可以返回

FooBar

字段的值。

withCredentials

属性:

上面说到，

CORS

请求默认不发送

Cookie

和

HTTP

认证信息。如果要把

Cookie

发到服务器，一方面要服务器同意，指定

Access-Control-Allow-Credentials

字段。

Access-Control-Allow-Credentials: true

首先解释一下jsonp:

前言:

由于Sencha Touch 2 这种开发模式的特性， 基本决定了它原生的数据交互行为几乎只能通过AJAX来实现。

什么是Sencha Touch？

Sencha

框架是第一个基于HTML5的移动也能给予框架，可以让Web应用看起来像网络应用。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML 5和CSS 3的Web标准，全部兼容Android和iOS设备。

当然了，通过强大的

PhoneGap

插件然后打包，你可以实现100%的

Socket

通讯和本地数据库功能，又或者通过HTML5的

WebSocket

也可以实现与服务器的通讯以及服务器堆功能，但这两种方式都有其局限性，前者需要PhoneGap的支持，后者要求用户设备必须支持WebSocket，因此都不算是ST2的原生选择解决方案，原生的只有AJAX。

什么是

PhoneGap

？

PhoneGap

是一个采用HTML，CSS和JavaScript的技术，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够在网页中调用

IOS

，

Android

，

Palm

，

Symbian

,

WP7

,

WP8

,

Bada

和

Blackberry

等智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以调用。

业界很多主流的移动开发框架均源于PhoneGap。

较著名的有

Worklight

、

appMobi

、

WeX5

等；其中

WeX5

为国内打造，完全

Apache开源

，在融合Phonegap的基础上，做了深度优化，具备接近Native app的性能，同时开发便捷性也较好。

什么是

Socket

?

题外话：

因为有一个大神突发地询问一下我的Vue问题, 所以也就有了前面的分析过程，而所遇到的网络问题，我们一直都是有待解决的，所以在这里我来分析我理解中的

Socket

问题。

TCP/IP

要想理解Socket首先得需要熟悉一下TCP/IP协议族，TCP/IP

（Transmission Control Protocol/Internet Protocol）即传输控制协议/网间协议，定义了主机如何连入因特网以及数据如何在它们之间传输的标准。

从字面意思出发的话来看的话TCP/IP是TCP和IP协议的合称，但其实这样的理解存在漏洞，实际上的TCP/IP协议是指因特网整个TCP/IP协议族。不同于ISO模型的七个分层，TCP/IP协议参考模型把所有的TCP/IP系列的协议归类到四个抽象对象层中。

应用层：

TFTP

,

HTTP

,

SNMP

,

FTP

,

SMTP

,

DNS

,

Telnet

等等。

传输层：

TCP

,

UDP

网络层：

IP

,

ICMP

,

OSPF

,

EIGRP

,

IGMP

数据链路层：

SLIP

,

CSLIP

,

PPP

,

MTU

每一抽象层建立在第一层提供的服务上，并且为高一层提供服务，看起来的大概模式如下图所示：





在这里也就是简单的两幅图来进行抽象数据链路层的展示，至于更进一步、更详细的介绍可以参照：

百度百科

维基百科

在TCP/IP协议中两个因特网主机通过两个路由器和对应的层连接。各主机上的应用通过一些数据通道相互执行读取操作。



socket

我们知道两个进程如果需要进行通讯最基本的一个前提就是能够唯一地标识一个进程，在本地进程通讯中我们可以使用PID来唯一标识一个进程，但是PID只是在本地标识唯一，网络中的两个进程PID冲突的几率很大，这时候我们需要