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冲突的几率很大，这时候我们需要