最近接到一个小项目,从一个网站抓取数据以另一种格式在另一个网站显示,其中遇到了不少的问题,主要用了javascript和jquery。现在总结一下遇到的一些问题和解决办法。
思路:使用ajax请求网站数据,返回的数据主要有html类型和json类型的结果。如果是坑爹的html数据则只能根据html的元素,如id值、css、标签值等去截取数据。如果是json格式的返回值就好办多了,直接拿来用。将数据保存成数组或者json格式,将数据重新组装成用户需要的页面。
遇到的主要问题:
1、坑爹的浏览器问题。
2、javascript正则表达式使用。
3、jquery的ajax使用。
一、浏览器问题
由于本机开发时使用的是win8.1,不能装用户指定使用的ie8,只能用ie11,为啥不用chrome呢?因为使用chrome时报了以下错误:
XMLHttpRequest cannot load http://xxx.com/xxx!selectZoneOfTown.ajax. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
原因:
这是一个跨域问题,当协议,域名,端口都与服务端相同时是同一个域。而我使用ajax请求‘http://xxx.com/xxx!selectZoneOfTown.ajax’时,至少域是不一样的,这个问题是浏览器的安全机制所产生的,要
解决浏览器跨域问题:
1、可以在服务端的响应header上设置Access-Control-Allow-Origin,由于我没有服务端代码,只能换ie11了
2、在chrome右击图标->快捷方式->目标:添加红色部分"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"--allow-file-access-from-files(我这里不起作用),网上查了下已失效……
3、还有一个方法:JSONP,具体看:http://stackoverflow.com/questions/19085965/jquery-ajax-access-control-allow-origin
4、使用IE11没有出现跨域问题,所以只能用IE11,但是当使用IE8时出现:No Transport,原来是IE6-IE9都不支持跨域访问,可以在ajax请求前添加:jQuery.support.cors = true;
二、javascript正则表达式的使用
在ajax获取到html字符串后,为了截取网页上的数据,需要先查看数据的格式,一般都是<tr><td>数据</td></tr>这样的格式,javascript提供了几个方法:
1、html.match(/<tr><td>.*<\/td><\/tr>/g)获取所有“<tr><td>数据</td></tr>”格式的数据,后面的g指符合正则表达式的所有数据将保存为数组,没g则取第一个符合的数据。
2、html.replace(/<tr><td>/g,"").replace(/</td></tr>/g,"")将<tr><td>和</td></tr>替换为空,则获取到数据。
3、html.split.(/<table>/)以<table>截取,获得数组结果集。
更多的正则表达式使用参考:http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
总结:正则表达式功能强大,使用时要注意每一个空格,每一个值都要匹配。
三、jquery的ajax使用
$.ajax({
url: encodeURI(durl),
type:'get',
async:false,
cache:false,
dataType:'json',
success: function (data) {
//
}, error: function (a, b, c) {
alert(b);
}
});
encodeURI()方法主要对url的中文字符进行编码。
aysnc:默认为true,即异步,所谓异步即用户进行ajax请求时,用户还可以操作页面。使用时注意变量赋值或返回值因异步请求没执行完导致变量没有值或没返回值问题。
cache:默认为true,缓存ajax请求的数据。
dataType:设置服务端响应的数据类型,注意当设置的类型与返回的类型不一致时,会出现:parsererror,对返回的数据无法解析。返回的结果如是hmtl这data类型为html格式的字符串,如是设置dataType:json,这返回json格式。
error:function(a,b,c){}:要善于利用error,输出这个值可以帮我们查找到问题的原因。
ajax的使用主要是要注意ajax的格式和理解同步异步问题,更多参考:http://www.php100.com/manual/jquery/
总结:
这个小项目真搓,利用强大的正则表达可以截取出数据,但是一旦获取的html页面的DOM结构或者其中一个id等发生变化,那么这个使用javascript写的抓取页面就无法使用,需要修改……
希望有高手提供更好的意见和建议学习下。