怎么在nodejs里面操作DOM

怎么在nodejs里面操作DOM,第1张

如果你想建立的DOM可以使用jsdom 。

还有CHEERIO ,它具有jQuery的界面,比jsdom其快了很多。

你可能会想看看htmlparser2 ,这是一个流分析器,并根据它的基准,这似乎是比别人快,也没有DOM默认。它也可以产生DOM ,因为它也捆绑了创建一个DOM的处理程序。这是一种用于后面CHEERIO解析器。

如果你要解析的HTML抓取,你可以使用YQL 。这里是它的一个节点模块。 YQL我觉得这是最好的解决办法,如果你的HTML是从一个静态的网站,因为你是靠服务,而不是你自己的代码和处理能力。但要注意,如果该页面是由网站的robottxt的禁止是行不通的, YQL将无法使用它。

如果你想抓取的网站是动态的,那么你应该使用一个无头的浏览器一样phantomjs 。也看看casperjs ,如果你正在考虑phantomjs 。你可以从节点SpookyJS控制casperjs 。

除了phantomjs有zombiejs 。不同,不能嵌入的NodeJS phantomjs , zombiejs仅仅是一个节点的模块。

我觉得你这个问题首先得搞清楚什么是json和jsonp。

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息。

JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。

JSON是一种数据格式,JSONP是一种数据调用方式。

//JSON

{

“name”: “sb”

}

//JSONP

callback({

“name”: “sb”

})

出于安全考虑,脚本(AJAX)不能访问非本域的内容。但是,静态资源是不受域策略限制的,可以加载任意域的脚本、样式、等静态资源,JSOP就是利用这种原理来实现跨域获取数据的。

例1:

//定义shoPrice函数

function showPrice(data) {

alert("Symbol: " + datasymbol + ", Price: " + dataprice);

}

//在Web页面中包含showPrice函数和参数

<script type="text/javascript">

function showPrice(data) {

alert("Symbol: " + datasymbol + ", Price: " + dataprice);

}

</script>

<script type="text/javascript">showPrice({symbol: 'IBM', price: 9142});</script>

  本例展示了如何将静态JSON数据作为参数调用JavaScript函数。

例2:

第一种的函数调用完全可以写在一个js文件中放在服务器上,用script标签加载到页面,而且这个标签可以动态地创建。

<script type="text/javascript">

// This is our function to be called with JSON data

function showPrice(data) {

alert("Symbol: " + datasymbol + ", Price: " + dataprice);

}

var url = “remotejs”; // 外部脚本的URL

// 动态插入脚本

var script = documentcreateElement('script');

scriptsetAttribute('src', url);

// 加载script

documentgetElementsByTagName('head')[0]appendChild(script);

</script>

remotejs的内容和之前在标签里写的一样是:

showPrice({symbol: 'IBM', price: 9142});

  动态插入的JavaScript代码,将要传递的JSON数据作为参数,showPrice函数调用语句的参数。

  那么问题来了,每次获取到数据都调用showPrice函数吗?这就需要前后端程序猿做好约定,当然这样有很多不便,尤其是对于开放接口给公众开发的情况。JSOP这样处理:支持前端传递一个回调函数名参数,后端接收回调函数名参数,然后生成对该函数的调用,将JSON数据作为参数传递,在到达客户端时将其插入页面开始执行。

例3:

  动态插入代码,带有callback参数:

<script type="text/javascript">

// This is our function to be called with JSON data

function showPrice(data) {

alert("Symbol: " + datasymbol + ", Price: " + dataprice);

}

var url = “remotejscallback='showPrice'”; // 外部脚本的URL

// 动态插入脚本

var script = documentcreateElement('script');

scriptsetAttribute('src', url)

// 加载script

documentgetElementsByTagName('head')[0]appendChild(script);

</script>

后端用PHP实现的JSONP服务的代码片段:

$jsonData = getDataAsJson($_GET['symbol']);

echo $_GET['callback'] '(' $jsonData ');';

// 打印: showPrice({"symbol" : "IBM", "price" : "9142"});

很好的契合了JSONP的定义,打包在函数调用中的JSON数据。

以上几个例子来自:使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup

接下来,在jQuery中使用JSONP:

AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加<script>标签来调用服务器脚本。虽然jQuery把JSONP作为AJAX的一种形式进行了封装,但JSONP并不是AJAX的一种形式或一种特例。

$ajax({

url: "http://queryyahooapiscom/v1/public/yql",

jsonpCallback: "showPrice",

jsonp: "callback",

// tell jQuery we're expecting JSONP

dataType: "jsonp",

data: {

q: "select title,abstract,url from searchnews where query=\"cat\"",

format: "json"

},

// work with the response

success: function( data ) {

consolelog( data ); // server response

}

});

参数解释:

jsonp 重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback=”这种GET或POST请求URL参数里的“callback”部分,例如{jsonp:'onJsonPLoad'}会导致“onJsonPLoad”传递给服务器。

jsonpCallback 为jsonp指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。但是实际使用过程中,并不用写回调函数,比如此例中的showPrice,不写也不会报错,因为jQuery在处理JSONP的时候,自动帮你生成回调函数并且把数据取出来共success方法调用。可能像这样:

function success_jsonpCallback(data) { success(data); }

所以:jsonp 可以是使用post方法也可以使用get方法。

这个代码是非常原始的混淆方式, 既可以被人轻易地解开, 也由於是明文调用eval所以很容易能被机器判断出有问题

解混淆步骤(由於百度的某些限制, 下文代码将使用截图代替

A 格式化代码以便查看

B 可以看到YgA~这个函数功能就是个replaceAll

C 於是按照下文代码提示, 解出LUM~变量的真实代码

可以看出这段代码做了些初始化工作

D 对bGa~变量解码

可以看出是将Blu~变量中所有ABC去除掉後的字符串作为注册表的键来读取, 并取出charAt(1)的字符存放到yNg~里

所以yNg最终是':'

E 最後就是按照相同的方式解出fjO那一行的真实代码了

F 此时代码的意图就非常明显了 从指定地址获取文件并保存到临时路径後执行shell

欢迎分享,转载请注明来源:表白网

原文地址:https://h5.hunlipic.com/biaobai/4145299.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2024-04-19
下一篇2024-04-19

发表评论

登录后才能评论

评论列表(0条)

    保存