我们是如果通过浏览器访问页面的？

我们是如果通过浏览器访问页面的？

当我们打开浏览器，在浏览器的地址栏中输入URL地址http://www.gacl.cn:8080/WebDemo1/1html去访问服务器上的1.html这个web资源的过程中，浏览器和服务器都做了神马操作呢，我们是怎么在浏览器里面看到1.html这个web资源里面的内容的呢？

浏览器和服务器做了以下几个操作：

1、浏览器根据主机名"www.gacl.cn"去操作系统的Hosts文件中查找主机名对应的IP地址。
2、浏览器如果在操作系统的Hosts文件中没有找到对应的IP地址，就去互联网上的DNS服务器上查找"www.gacl.cn"这台主机对应的IP地址。
3、浏览器查找到"www.gacl.cn"这台主机对应的IP地址后，就使用IP地址连接到Web服务器。
4、浏览器连接到web服务器后，就使用http协议向服务器发送请求，发送请求的过程中，浏览器会向Web服务器以Stream(流)的形式传输数据，告诉Web服务器要访问服务器里面的哪个Web应用下的Web资源
5、浏览器做完上面4步工作后，就开始等待，等待Web服务器把自己想要访问的1.html这个Web资源传输给它。
6、服务器接收到浏览器传输的数据后，开始解析接收到的数据，服务器解析"GET /WebDemo1/1.html "里面的内容时知道客户端浏览器要访问的是WebDemo1应用里面的1html这个Web资源，然后服务器就去读取1.html这个Web资源里面的内容，将读到的内容再以Stream(流)的形式传输给浏览器，
7、浏览器拿到服务器传输给它的数据之后，就可以把数据展现给用户看了

相同域？

在客户端编程语言中，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同 源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。

当两个域具有相同的协议，相同的域名，同端口，说明这是相同域，其中任意一个不同，都属于跨域。

受到同源策略的影响，跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步，目前在跨域请求的技巧上，有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种，一种是单向的数据请求，还有一种是双向的消息通信。接下来罗列出常见的一些跨域方式.

单项跨域

JSONP

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的，但是，众所周知，script的标签有一个src属性，指向一个地址，加载成功之后就可以成功调用里面的文件。那么，我们可以以这种形式，进行跨域访问。jsonp正是利用这个特性来实现的。

举个栗子

//需要跨域的时候可以创建一个script标签
var jsonp = document.createElement("script");
//指定类型
jsonp.type = "text/javascript";
//添加链接地址
jsonp.src = "http://10.0.154.249/text.js?callback=jsonpCallback";
//将这个拼接 好的script标签添加到head标签中。
document.getElementsByTagName("head")[0].appendChild(jsonp);
//回调函数
function jsonpCallback(ret){
    alert(ret)
}```
在异地服务器中，有一个text.js文件，我们只要把需要传输的数据，以参数的形式，传递到我们的回调函数中就可以了。

异地服务中text.js文件内容

```jsonpCallback("饭饭爱分享");
运行结果```


01.jpg
当然上栗也可以直接写一个script标签或者向笔者这样动态创建script标签。

这样jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。


原理是一样的，只不过我们不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。