脚本化HTTP 取得响应 指定请求

脚本化HTTP 下面将会用js代码操纵HTTP 下面将会说明在没有致使web浏览器从新加载任何窗口或者窗体的状况下，脚本实现web浏览器和服务器之间的通讯。 ajax：为一种找早起避免页面重载而动态更新页面的方式，不过如今是直接数据驱动，或者相似于vue的单页应用 comet：这个和ajax正好相反，为推送消息到web浏览器端

ps；ajax和comet都为一个美国的洗涤日用品牌，╮(╯▽╰)╭

总说

网页信标

img元素有一个src属性，当脚本设置img元素的src属性，且把信息做为图片的url的查询字符串部分，即能把通过编码的信息椽笔给web服务器，web服务器实际上必须返回一个图片做为结果。 事实上，使用一个空的js脚本也可完成此操做 一个百度统计的js脚本以下

(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d2539dae35b4dcf0e7814c110ecefa9f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
复制代码

分析，一个采用es5编写的一个闭包，动态加载一个script标签，向https://hm.baidu.com/hm.js?d2539dae35b4dcf0e7814c110ece发送一个get请求，而且查询的字符串为？后面的参数，服务器只须要统计？后面的get请求数目，便可完成一次次的统计任务。用户的页面停留，直接计算两次加载的时间差便可。数据库完成统计便可。一个最简单的页面统计完成。

iframe

一个淘汰的标签。 下面是旧的ajax方式 使用iframe完成一次ajax，脚本先把要发送给web服务器的信息编码到url中，服务器在动态的建立一个html文档，将其内容返回给web，在iframe中显示，这种方式受道同源的限制。 上方的方式以及放弃。

script

经过script元素的src属性设置url发起http get请求，即一种基于script的ajax传输，服务器使用json编码，执行脚本的时候，将其转码，这种的ajax同时也称为jsonp 即这种的跨域能够不受到同源的限制

ajax中的x

ajax中的x为xml为一种可选的通讯方式，也可使用JSON完成通讯。

其余

一些更多的通讯协议，包括rpc（远程过程调用）容许运行于一台计算机的程序调用另外一台计算机程序的子程序。若是面向对象编程，则远程过程调用为远程调用，远程方法调用。

发布/订阅事件系统

一种设计模式，有两种，一种是观察者模式，一种是发布订阅模式， 即，消息推送使用的是发布/订阅事件系统

观察者模式

意图：定义对象间的一对多的依赖关系，当一个对象状态发生改变时，全部依赖它的对象都获得通知，并进行更新 解决：一个对象状态给其余对象通知的问题， 举例应用：有个天气中心的目标A，专门监听天气的变化，而有个显示天气的观察者B，B把本身注册到A里，当A触发天气变化的时候，调度B更新方法，并带上本身的上下文。

发布/订阅模式

订阅者把本身想注册的事件注册到调度中心，当该事件触发时，发布者发布事件到调度中心，由调度中心统一调度订阅者注册到调度中心的处理代码。 举例：有个界面实时显示天气，它就订阅天气事件（注册到调度中心），当天气变化时定时获取数据，做为发布者到调度中心，调度中心调度订阅者的天气处理程序。

总结，区别

一个为点对点，一个为中间有一个过渡的，仅此而已。

ps 有一本书js的设计模式，推荐看看 shop.oreilly.com/product/063… 以及 addyosmani.com/resources/e… 购买 www.amazon.com/_/dp/144933… 很想知道有木有中文版的。吐槽 28美圆，合计120多元，书怎么那么贵呢。好贵，建议注册一下

XMLHttpRequest

浏览器在CMLHttpRequest类上定义了其HTTP 的API 这个类的每一个实例都表示一个独立请求/响应对。而且这个对象属性和方法容许指定请求细节和提取响应数据。

同java相似，使用这个api的第一件事实例化XMLHttpRequest对象

ps：能重用已存在的XMLHttpRequest 可是以前的对象将会被挂起

HTTP请求的4个部分

1. http请求方法或者动做
2. 正在请求的URL
3. 一个可选的请求头集合，其中可能包含身份验证信息
4. 一个可选的请求主题

HTTP返回的响应

1. 一个数字和文字组合成的状态码，如404（表示不存在）
2. 一个响应头集合
3. 响应主体

为何本地不能直接使用ajax

在本地写js的时候，必须搭建一个服务器其AJAX才能工做 缘由：由于文件的协议为file而本地的请求的协议为http，因为同源策略的影响，致使没法使用http协议的文件，故本地没法直接使用ajax

解决方法，chrome的浏览器访问https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb 安装chrome官方提供的本地测试服务器，用于在本地搭建服务器。 或者，编写Node.js 使用Express框架，加载Static 模块，完成本地的静态服务器搭建。

指定请求

指定请求使用的是request.open()，此方法将会初始化一个请求从js代码中调用。 第一个参数指定HTTP方法或动做，字符串不区分大小写，一般用大写字母匹配HTTP协议，GET用于常规请求，适用于当URL彻底指定请求资源。当请求对服务器没有任何反作用以及当服务器的响应可缓存的时候，使用GET。对于POST来讲，经常用于HTML表单，它在请求主体中包含额外数据，即表单数据，且这些数据经常储存到服务器的数据库中。此请求不会被缓存。 一样的，还容许其余的一些请求，例如DELETE，HEAD，OPTIONS，PUT等请求。 第二个参数为URL，为请求的主体，相对于文档的URL，这个文档包含调用open()的脚本，这个不能跨域，请求必须为同域的

设置请求头

request.setRequestHeader('Content-type', 'text/plain');
复制代码

下面将会设置请求头，上方设置请求头为Content-type的内容为text/plain

有些请求头因为浏览器的安全问题，被禁止请求，因此有些不能请求。

若是请求一个受到密码保护的url，此时不须要设置Authorization头，只须要直接在open的第三四个参数，传入便可。

发送请求

因为get请求不包括主体，则直接send方法便可完成一个包的发送，

因为跨域限制致使不能读取

在http://1.197.156.53/编写js以下

// 编写请求头GET并完成发送
var request = new XMLHttpRequest();	// 设置请求的类
request.open('GET', 'https://www.baidu.com/');	// 设置请求的连接和方式
request.setRequestHeader('Content-Type', 'text/plain');	// 设置请求头
request.send(null);	// 发送包
复制代码

跨域请求被拦截。 因为不是同源，同源被拦截

是同源的

// 编写请求头GET并完成发送
var request = new XMLHttpRequest();	// 设置请求的类
request.open('GET', './index.js');	// 设置请求的连接和方式
request.setRequestHeader('Content-Type', 'text/plain');	// 设置请求头
request.send(null);	// 发送包
复制代码

完成一次发包操做

顺序问题

HTTP请求的各个部分有指定的顺序，请求方法和URL会首先到达，而后接着请求头，最后请求主体。最后调用send()方法，完成发送。 顺序问题:必须先调用open后调用send()才方可。

一个栗子，经过post方法发送纯文本给服务器

function postMessage(msg) {
	var request = new XMLHttpRequest();	// 新请求
	request.open('post', '/log.php');	// 用POST向服务器端发送脚本
	// 用请求主体发送纯文本消息
	request.setRequestHeader('Content-Type', 'text.plain;charset=utf-8');	// 请求主体将是纯文本

	request.send(msg);
	// 请求完成，咱们将忽略任何响应和任何错误
}
复制代码

即上方定义了一个post请求，完成其发送，等待其服务器响应

取得响应

send()发送之后将会等待服务器响应，此时将不会阻塞。 在HTTP发送完成请求之后，下一步将会取得响应。 下面编写函数获取HTTP响应的onreadystatechange

// 发出一个HTTP GET请求获取指定的URL的内容
// 当响应成功到达，验证它是不是纯文本
// 若是是，将会把它传递给指定的回调函数
function getText(url, callback) {
	var request = new XMLHttpRequest();	// 建立一个新请求
	request.open('GET', url);	// 建立一个指定待获取的url
	request.onreadystatechange = () => {	// 当GRT请求完成之后，触发该事件，产生回调函数
		// 若是请求完成，则它是成功的
		if (request.readyState === 4 && request.status === 200){	// 若是下载操做完成，即为4，而且http状态码为200
			var type = request.getResponnseHeader('Content-Type');	// 获取HTTP头部信息
			if (type.match(/^text/))	//正则匹配，肯定响应为文本
				callback(request.responseText);	// 回调函数,将返回的DOM树，传递给回调函数
		}
	};

	request.send(null);	// 发送
}
复制代码

注意，该方式为异步的，send方法不会阻塞其余操做

同步响应

因为其下载的问题，通常异步处理HTTP响应，可是同步也能够，不过因为客户端js为单线程的，当send()方法阻塞之后，将会致使浏览器的ui被冻结，若是链接的服务器过慢，将会致使用户的操做出现问题。

方法直接open使用第三个参数为false

响应解码

当服务器响应的为XML文档的时候，其返回的值为document对象，能使用操做节点的方式，对其进行操做 当服务器发送对象或者数组的结构化数据，如JSON，

使用JSON.parse 对结构化数据进行解析

下方书写一个函数，进行结构化数据的解析

// 发起HTTP GET响应，得到指定的URL内容
// 当响应到达时，把他们解析后的XML Document对象，解析后的JSON对象
// 或者字符串形式传递给回调函数
function get(url, callback){
	var request = new XMLHttpRequest();
	request.open('GET', url);	// 指定url
	request.onreadystatechange = () => {	// 监听器
		// 若是请求完成且成功
		if (request.readyState === 4 && request.status === 200) {
			// 得到响应请求
			var type = request.getResponseHeader('Content-Type');
			// 检查类型
			// 当为xml的时候
			if (type.indexOf('xml') !== -1 && request.responseXML)	// 确认是否为xml
				calback(request.responseXML);	// 回调函数
			else if (type === "application/json")	// 若是头部的信息为JSON
				callback(JSON.parse(request.responseText));	// 将结果JSON格式解析
			else 
				callback(request.responseText);	// 若是是字符串响应
		}
	};
	request.send(null);	// 当即发送请求
}
复制代码

对两种数据解析，一种为JSON格式，一种为XML格式

ps 不建议使用eval

ps 因为跨域的问题，只能读取同源的数据，经过script脚本操纵HTTP脚本并实现加载并执行脚本

script 元素能发起跨域的HTTP请求

能使用request.overrideMimeType可以实现对MIME类型的更改