js提取指定网站内容(不是Web的运作原理及运作流程（一）Web)

　　js提取指定网站内容(不是Web的运作原理及运作流程（一）Web)

　　AJAX 不是 JavaScript 规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思是使用 JavaScript 来执行异步网络请求。

　　如果你仔细观察一个Form的提交，你会发现一旦用户点击了“Submit”按钮，表单开始提交，浏览器会刷新页面，然后在新页面告诉你是否操作成功或失败。如果不幸网络太慢或其他原因，您将获得404页面。

　　Web 是这样工作的：一个 HTTP 请求对应一个页面。

　　如果您希望用户停留在当前页面并同时发出新的 HTTP 请求，则必须使用 JavaScript 发送此新请求。收到数据后，使用 JavaScript 更新页面。这样用户感觉还是卡在了当前页面，但是数据可以不断更新。

　　最早*敏*感*词*使用AJAX的是Gmail。 Gmail 页面第一次加载后，剩下的所有数据都依赖 AJAX 来更新。

　　用 JavaScript 编写完整的 AJAX 代码并不复杂，但需要注意：AJAX 请求是异步执行的，即通过回调函数获取响应。

　　在现代浏览器上编写 AJAX 主要依赖于 XMLHttpRequest 对象：

　　'use strict';

----

function success(text) {

var textarea = document.getElementById('test-response-text');

textarea.value = text;

}

function fail(code) {

var textarea = document.getElementById('test-response-text');

textarea.value = 'Error code: ' + code;

}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调

if (request.readyState === 4) { // 成功完成

// 判断响应结果:

if (request.status === 200) {

// 成功，通过responseText拿到响应的文本:

return success(request.responseText);

} else {

// 失败，根据响应码判断失败原因:

return fail(request.status);

}

} else {

// HTTP请求还在继续...

}

}

// 发送请求:

request.open('GET', '/api/categories');

request.send();

alert('请求已发送，请等待响应...');

　　对于低版本的IE，需要改成ActiveXObject对象：

　　'use strict';

----

function success(text) {

var textarea = document.getElementById('test-ie-response-text');

textarea.value = text;

}

function fail(code) {

var textarea = document.getElementById('test-ie-response-text');

textarea.value = 'Error code: ' + code;

}

var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象

request.onreadystatechange = function () { // 状态发生变化时，函数被回调

if (request.readyState === 4) { // 成功完成

// 判断响应结果:

if (request.status === 200) {

// 成功，通过responseText拿到响应的文本:

return success(request.responseText);

} else {

// 失败，根据响应码判断失败原因:

return fail(request.status);

}

} else {

// HTTP请求还在继续...

}

}

// 发送请求:

request.open('GET', '/api/categories');

request.send();

alert('请求已发送，请等待响应...');

　　如果你想把标准写法和IE写法混在一起，可以这样写：

　　var request;

if (window.XMLHttpRequest) {

request = new XMLHttpRequest();

} else {

request = new ActiveXObject('Microsoft.XMLHTTP');

}

　　通过检查window对象是否有XMLHttpRequest属性来判断浏览器是否支持标准的XMLHttpRequest。注意，不要使用浏览器的 navigator.userAgent 来检测浏览器是否支持某个 JavaScript 功能。一是字符串本身可以伪造，二是通过IE版本判断JavaScript特性会很复杂。

　　创建XMLHttpRequest对象时，必须先设置onreadystatechange的回调函数。在回调函数中，通常我们只需要通过readyState === 4判断请求是否完成，如果完成则根据status === 200判断是否响应成功。

　　XMLHttpRequest 对象的 open() 方法有 3 个参数。第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步。默认为true，不需要写。

　　注意，第三个参数不要指定false，否则浏览器会停止响应，直到AJAX请求完成。如果这个请求需要10秒，那么在10秒内你会发现浏览器处于“假死”状态。

　　最后调用send()方法实际发送请求。 GET 请求不需要参数，POST 请求需要将 body 部分作为字符串或 FormData 对象传入。

　　安全限制

　　上面代码中的 URL 使用了相对路径。如果改成“再运行，肯定会报错。在Chrome控制台中，也可以看到错误信息。

　　这是由浏览器的同源策略引起的。默认情况下，JavaScript 发送 AJAX 请求时，URL 的域名必须与当前页面完全相同。

　　完全协议是指域名必须相同（和不同），协议必须相同（http和https不同），端口号必须相同（默认为：端口80，即不同于：8080）。一些浏览器有更宽松的开口并允许不同的端口。大多数浏览器都严格遵守此限制。

　　是不是因为JavaScript无法请求外部域（即其他网站）URL的URL？方法还是有的，大概就这么几个：

　　一是通过Flash插件发送HTTP请求。这种方法可以绕过浏览器的安全限制，但必须安装Flash并与Flash交互。不过Flash使用起来比较麻烦，现在用的越来越少了。

　　二是通过设置同源域名下的代理服务器进行转发，JavaScript负责将请求发送到代理服务器：

　　'/proxy?url=http://www.sina.com.cn'

　　然后代理服务器返回结果，使其符合浏览器的同源策略。这种方法的问题在于它需要在服务器端进行额外的开发。

　　第三种方法称为JSONP。它有一个限制。它只能使用 GET 请求并且需要返回 JavaScript。这种跨域的方式其实就是利用浏览器来允许跨域引用JavaScript资源：

　　

...

...

　　JSONP 通常以函数调用的形式返回，例如返回的 JavaScript 内容如下：

　　foo('data');

　　这样的话，如果我们先在页面中准备好foo()函数，然后动态的给页面添加一个

　　function refreshPrice(data) {

var p = document.getElementById('test-jsonp');

p.innerHTML = '当前价格：' +

data['0000001'].name +': ' +

data['0000001'].price + '；' +

data['1399001'].name + ': ' +

data['1399001'].price;

}

　　当前价格：

　　刷新

　　最后用 getPrice() 函数触发：

　　function getPrice() {

var

js = document.createElement('script'),

head = document.getElementsByTagName('head')[0];

js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';

head.appendChild(js);

}

　　跨域数据加载完成。

　　CORS

　　如果浏览器支持 HTML5，那么您可以使用新的跨域策略：CORS 一劳永逸。

　　CORS 代表跨域资源共享，即 HTML5 规范定义的跨域访问资源的方式。

　　在了解CORS之前，我们先来了解一下概念：

　　Origin 表示这个域，即浏览器当前页面的域。当 JavaScript 向外部域（例如）发起请求时，浏览器收到响应后，首先检查 Access-Control-Allow-Origin 是否收录该域。如果是，则跨域请求成功。如果不是，则请求失败。 JavaScript 将无法获得任何响应数据。

　　用图片表示：

　　

　　假设域为本地域，域为外域，只要响应头Access-Control-Allow-Origin为*或为*，本次请求即可成功。

　　可见，跨域成功与否取决于对方的服务器是否愿意为你设置正确的Access-Control-Allow-Origin，决定权始终掌握在对方手中.

　　这种跨域请求称为“简单请求”。简单的请求包括 GET、HEAD 和 POST（POST 的 Content-Type 仅限于 application/x-www-form-urlencoded、multipart/form-data 和 text/plain），并且没有自定义标头（例如，X-定制：12345），通常可以满足90%的需求。

　　无论是否需要使用 JavaScript 跨 CORS 请求资源，都必须了解 CORS 的原理。最新的浏览器完全支持 HTML5。引用国外资源时，除了JavaScript和CSS之外，还必须验证CORS。例如，当您引用第三方 CDN 上的字体文件时：

　　/* CSS */

@font-face {

font-family: 'FontAwesome';

src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');

}

　　如果CDN服务商没有正确设置Access-Control-Allow-Origin，浏览器将无法加载字体资源。

　　对于PUT、DELETE以及application/json等其他类型的POST请求，在发送AJAX请求之前，浏览器会先向这个URL发送一个OPTIONS请求（称为预检请求），询问目标服务器是否接受:

　　OPTIONS /path/to/resource HTTP/1.1

Host: bar.com

Origin: http://my.com

Access-Control-Request-Method: POST

　　服务器必须响应并明确指出允许的方法：

　　HTTP/1.1 200 OK

Access-Control-Allow-Origin: http://my.com

Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS

Access-Control-Max-Age: 86400

　　浏览器确认服务器响应的Access-Control-Allow-Methods头中确实收录要发送的AJAX请求的Method，然后继续发送AJAX，否则会抛出错误。

　　由于 REST 中通过 POST 和 PUT 以 JSON 格式传输数据是很常见的，为了正确处理跨域的 POST 和 PUT 请求，服务器必须正确响应 OPTIONS 请求。

　　需要深入了解CORS的童鞋请参考W3C文档。