什么是脚本化HTTP
超文本传输协议（HyperText Transfer Protocol,HTTP）是互联网通信中一个非常重要的协议。在TCP/IP协议体系中属于应用层的一个协议。在前端web编程中向服务器提交数据通常是依靠表单来完成的，即通过HTML语言中的form标签来向服务器提交数据，这一方法是通过浏览器来初始化HTTP请求。当然在某些应用场景下这种数据交互方式会显得有些僵硬，自然而然地，随着前端技术的发展，另外一种与服务器进行数据交互的方法出现了。
Ajax（Asynchronous JavaScript and XML）即“异步javascript与XML”，这一术语最早于2005年出现在Jesse James Carrett的一篇文章中。所谓异步可以理解为向服务发送数据的时机在逻辑上是不可预测的，完全取决于程序执行或用户的交互。Ajax就是利用javascript操纵HTTP请求与服务器进行数据交互，或者说利用脚本来操纵HTTP请求与服务器进行数据交互。这样做的好处在于当我们向服务器提交数据时不必重载整个页面，此外利用脚本来异步加载数据也可以提升页面的性能，例如页面上包含大量的数据时我们可以先给用户显示基本的页面框架，然后再利用脚本异步请求数据，给用户以合理的数据加载提示（例如一个转菊花gif图）。这样的话虽然整个页面加载完成的耗时可能并不不会比那些不用ajax的页面要快，但是用户体验一定比后者要好得多，想象一下你打开两个页面，其中一个虽然没有立刻出现数据，但是页面上有良好的提示告诉你正在加载，而另外一个页面在你打开后就一直是一个纯白的画面，时间久了你可能会以为是浏览器崩溃了或者网站挂了呢！
当然，读者读到这里千万不要把Ajax和脚本化HTTP划上等号。Ajax有很多种实现方式，例如iframe标签，script标签的src属性，都可以实现Ajax的效果。但是这些方法都显得太过复杂了，一段时间以来，绝大部分浏览器都会支持XMLHttpRequest这个对象，通过这个对象我们可以非常容易地实现Ajax技术。
一个小问题
通常利用脚本进行HTTP请求时会有一个限制，这个限制是基于客户端javascript语言的。这个限制的名字叫做同源策略，同源策略是保障客户端javascript安全稳定运行的非常重要的一条。简单来说，所谓同源策略就是脚本化的HTTP只能和源服务器进行通信，就是说浏览器从A主机接收到了一个页面，这个页面中包含脚本化的HTTP。那么这个脚本化的HTTP能且仅能和A进行数据交换，在客户端javascript中一般通过三重标准来标识一台主机，分别是协议，主机名和端口号。举例来说，一个页面来自http://www.xxx.com:80这台主机，那么这个页面上的脚本化HTTP就只能和这个主机进行通信。例如https://www.xxx.com:80、http://ship.www.com:80、http://www.xxx.com:8080均不能认为是与之前提到的同一主机，它们要么是协议不同，要么是虚拟主机不同要么就是端口号不一样。需要注意的是，同源策略是非常强的一种策略，即使两个不同的虚拟主机在同一个物理主机上，只要不满足同源策略，脚本化的HTTP依旧无法运行。这个在后面我们会做一点实验来验证。
如我们所知，javascript是一种弱类型的语言。因此在实例化XMLHttpRequest这个对象时需要这样来写var request = new XMLHttpRequest();这样就实例化出了一个XMLHttpRequest对象。之后我们需要调用这个实例的一个open方法来打开与服务器的连接，通常这个方法接收两个参数，某些情况下也能接受三个参数，这取决于你想创建一个什么样的HTTP请求。open方法的第一个参数指定HTTP请求的方法，包含多个枚举选项，但是用到的是有两个即POST和GET。第二个参数指定请求的URL，注意受限于同源策略这个URL不是完整的URL，而是相对于文档的URL。那么，一个常规的该方法调用的格式就是request.open("POST", url);打开了连接之后我们可以通过setRequestHeader对HTTP请求头进行设置，例如，我们设置一下这个请求的MIME类型可以这样写：request.setRequestHeader("Content-type", "text/plain");需要注意的是如果对同一个请求头进行了多次设置，那么不会覆盖之前的设置，HTTP请求将包含这个头的多个副本或这个头将制定多个值，关于HTTP请求头的各种类型取值和MIME类型，请读者自行上网搜索。最后，通过调用send方法就可以实现请求发送了，这个方法接受一个可选参数，在POST请求中它指定了发送的HTTP请求体的内容，在GET请求中不指定这个参数。接下来我们通过一个实验来验证一下。
图1 接下来我们启动服务器，打开这个页面，同时按下f12打开调试页面。、
图2
可以看到，服务器在接收到参数后在命令行打印出参数内容。接下来我们启动服务器，打开这个页面，同时按下f12打开调试页面。
图3
可以看到红色框中的网络请求，现在只有两项，分别是这页面本身的网络请求和网页图标的ico图像请求。现在我们点击这个按钮。
图4
我们看到，当我们点击了按钮以后监控栏出现了一个新的这代表着出现了一个新的网络请求，我们看一下这个网络请求的具体内容是什么。
图5
可以看到，网络请求已经正确发送了。在字符串参数一栏已经正确给出了我们要发送的参数：username=David；那么我们看看服务器端是否接收到了这一信息。
图6
可见，服务器端也已经接受到了参数并打印在了命令行。可以说，这个实验已经成功了。当然具体应用的脚本化HTTP要比这个复杂得多，这个在之后的博客中还会不断地探索。
写在最后——同源策略测试
最后我们来测试一下所谓的同源策略，我们把客户端的网络请求代码改动一行。
图7
可以看到，这次改动的唯一的地方就是在第四行。这次向网易的服务器发送一个请求。我们来看看能否成功。和刚才一样，我们点击按钮，看看会有什么发生。
图8
可见，向网易浏览器发送请求失败了。错误信息中解释了同源策略。
综上，就是一个最简单的脚本化HTTP，谢谢您的观赏，吃饭去了！
网友评论