前端加油站第6期

CSS 模块化

本文用新的思路向我们展示了如何更科学合理的对css进行模块化开发

英文原址:http://glenmaddern.com/articles/css-modules

中文地址:http://www.75team.com/archives/1049

H5时代的多行文本框

说起输入框,大家都耳熟能详了,今天跟大家谈一谈H5时代的多行输入框!

ECMAScript 6 模块架构

如果你还未熟悉当前的 ES6 模块规范,需要明白:

  1. module:一个代码单元,有若干的 import 和 export
  2. export:一个 module 可以通过具名的方式 export 一个值

前端工程与性能优化

本文将从一个全新的视角来思考web性能优化与前端工程之间的关系,揭示前端性能优化在前端架构及开发工具设计层面的实现思路。

移动端自适应方案

真的需要动态生成viewport吗?

如何自适应?

前端加油站第5期

JS原生Date类型方法的一些冷知识

Date()与new Date()的区别。

Date()直接返回当前时间字符串,不管参数是number还是任何string。

new Date()则是会根据参数来返回对应的值,无参数的时候,返回当前时间的字符串形式;有参数的时候返回参数所对应时间的字符串。new Date()对参数不管是格式还是内容都要求,且只返回字符串,

The future of layout with CSS: Grid Layouts

In this article we’ll take a look at the wonderful world of the CSS Grid Layout, a relatively new W3C specification that has partially started to see the day in some browsers.

But before we dive into what this new CSS technique is all about and how to use it, let’s quickly review grid theory.

Prefetching, preloading, prebrowsing

When we talk about front end performance we think things like concatenation, minification, caching, or gzipping assets on the server so that the page loads faster and users can complete their goals as quickly as possible.

Resource prefetching is another performance enhancing technique. We can use it to tell the browser which assets the user might need in the future—before they even need them.

CSS深入理解vertical-align和line-height的基友关系

前端界相声演员张鑫旭的又一力作。

有关网页渲染,每个前端开发者都该知道的那点事

网页渲染必须在很早的阶段进行,可以早到页面布局刚刚定型。因为样式和脚本都会对网页渲染产生关键性的影响。所以专业开发者必须了解一些技巧,从而避免在实践的过程中遇到性能问题。

这篇文章不会研究浏览器内部的详细机制,而是提出一些通用的规则。毕竟,不同浏览器引擎的工作机制各不相同,这无疑会让开发者对浏览器特性的研究变得更加复杂。

前端加油站第4期

京东首页前端技术剖析与对比

http://www.barretlee.com/blog/2015/09/09/jd-architecture-analysis/
前端的学习就两个字:”理解为什么”。

细说WebSocket – Node篇

http://www.barretlee.com/blog/2013/12/20/cb-websocket-with-node/
使用node实现webscocket协议。

改进开发流程的6个Gulp最佳实践

http://blog.rangle.io/angular-gulp-bestpractices/
构建工具gulp的最佳实践之路

前端资源汇总

http://f2er.club/
堪称前端 hao123,赞这位工程师的悉心整理。

ES5 Object对象的5个不为人知的特性

http://ourjs.com/detail/55ee7756e3312b046d27f524
深入理解Object

前端加油站第3期

 

ES6新特性

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。ES6的目标,是使得JavaScript语言可以用来编写大型的复杂的应用程序,成为企业级开发语言。标准的制定者有计划,以后每年发布一次标准,使用年份作为标准的版本。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

 

 

 

前端加油站第2期

css参考手册

css的参考手册,提供浏览器兼容情况

HTML5 服务器推送事件(Server-sent Events)实战开发

服务器推送事件(Server-sent Events)是 HTML5规范中的一个组成部分,可以用来从服务端实时推送数据到浏览器端。

你可能不再需要Underscore

JavaScript不断发展,新ES2015和ES2016版本(以前分别称为ES6和ES7)包了一堆新功能特性,并很容易使用它们。这些特性使得工具库以前的一些基本功能已经过时。

所以你可能不再需要Underscore。

JavaScript中的this陷阱的最全收集–没有之一

JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值。事实并非如此,在JavaScript中,最好把this当成哈利波特中的博格特的背包,有着深不可测的魔力。

实现Promise

使用Promise是极好的,它是如此有用以至于我觉得应该好好研究一下Promise,甚至是实现一个简易的版本。

前端加油站第1期

移动时代的前端加密

相比其他被编译成二进制的应用,前端这种纯文本应用,太容易被解读和窜改。

前端为什么要加密?

加密重要的目的是出于对商业利益的保护。

小tip:中文英文左右padding一致两端对齐实现

一个定宽的容器,左右padding值20像素,结果输入一段文字后(有中文也有英文字符),会发现右侧根本就不对齐,有些地方距离右侧的空白大小也不是20像素,感觉不和谐,设计师就希望排列能够好看一点,右边要对齐。

Flexbox布局(CSS3 弹性布局,Flexible Box)之 基本概念解析

flex container(flex容器 或 弹性容器)

flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。

Git 使用规范流程

团队开发中,遵循一个合理、清晰的Git使用流程,是非常重要的。

否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。

下面是ThoughtBot 的Git使用规范流程。我从中学到了很多,推荐你也这样使用Git。

Font Boosting

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致。大家可以查看这个Demo(记得打开Chrome DevTools)。

ASYNC VS DEFER 属性

<script>脚本不设置任何属性。HTML文档解析过程中,遇到script文档时,会停止解析HTML文档,发送请求获取script文档(如果是外部文档的话)。脚本执行后,才恢复HTMl文档解析。

利用contentEditable属性与execCommand方法开发简洁的文本编辑器

在玉兔项目中我们的文本组件使用的contentEditable属性与execCommand方法结合开发出来的简洁文本编辑器。

QQ截图20150703154153

HTML中的contentEditable属性

contentEditable属性的作用是可以打开某些元素的可编辑状态,可供选择的值有空字符串,true,false,inherit(默认)。

当一个元素的contentEditable值为true时,那么就意味着该元素是可编辑的。

那么如果我如果想针对这个可编辑的元素中内容进行一些样式上的调整时应该怎么去做呢?

这时候就要结合JS的一个方法了,document.execCommand。

先看看语法:

execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)

String aCommandName
  命令名称
Boolean aShowDefaultUI
  是否展示用户界面,默认为false。Mozilla没有实现
String aValueArgument
  一些命令需要一些额外的参数值(如insertimage需要提供这个image的url)。默认为null。

execCommand可支持的属性(第一个参数):

backColor
改变文档的背景颜色。 在styleWithCss模式,它影响的是包含元素的背景。 这个命令要求提供一个颜色值作为第三个参数 (Internet Explorer 使用这个命令设置文本背景色)
bold
对选中文本或者插入元素设置、取消粗体显示. (Internet Explorer 使用STRONG 标签 而不是 B标签。)
contentReadOnly
转化文档进入只读或者可编辑模式. 这个命令要求提供给一个boolean值给第3个参数(ie不支持)。
copy
把当前选中区域复制到系统剪贴板。使用这个命令需要首先在 user.js 接口中进行激活。
createLink
当有选中区域的时候,使用这个命令转化选中区域为一个锚点,需要提供一个URI给第3个参数. 这个URI必须至少包含一个字符,空白字符也可。(Internet Explorer 会创建一个URI为空的a标签)
cut
剪切选中文本到剪切板. 同copy一样需要开启剪切板功能。
decreaseFontSize
给选中文本或者插入元素添加一个small标签。(Internet Explorer不支持)
delete
删除当前选中区域
enableInlineTableEditing
开启或禁用表的行和列的插入删除功能 ( Internet Explorer不支持)
enableObjectResizing
开启或禁用图片或者其他可resize元素的resize功能 ( Internet Explorer不支持)
fontName
改变选中文本或者插入元素的字体。需要给第3个参数提供一个字体值
fontSize
改变选中文本或者插入元素的字体大小。需要给第3个参数提供一个数字
foreColor
改变选中文本或者插入元素的字体颜色。需要给第3个参数提供一个颜色值
formatBlock
向当前选择的区域所在的行添加一个HTML块标记,如果这行上已经存在了其它块标记,会被添加的标记替换掉(在Firefox中,BLOCKQUOTE标记是一个例外,他会把已有的块元素包含在内)。需要给第三个参数提供一个标记的名字。事实上几乎所有块标记都是可以使用的(如“H1”、“P”、“DL”、“BLOCKQUOTE”)。(Internet Explorer只支持标题标记H1-H6、ADDRESS和PRE标记,且必须用标记分隔符< >将标记括起来,例如应当写成”<H1>”。)
forwardDelete
删除光标前的字符。这个效果和按了Delete键一样。
heading
向选取的文字或者插入点添加一个标题标记。需要标记名作为第3个参数(如”H1″,”H6″)。(不被Internet Explorer支持。)
hiliteColor
改变区或者插入点的背景色。需要传入颜色值作为第3个参数。要使用这个方法,UseCSS必须被打开。(不被Internet Explorer支持。)
increaseFontSize
向选区或者插入点添加一个BIG标记。(不被Internet Explorer支持。)
indent
缩进选区或者插入点所在的行。 在Firefox中,如果选区包含带有不同级别缩进的多行,只有选区中缩进最低的行会被缩进。
insertBrOnReturn
控制按下回车键的行为:是插入一个BR标记还是将当前块拆分为两个。 (不被Internet Explorer支持。)
insertHorizontalRule
在选区或者插入点上插入一个水平线(会删除选区内容)。
insertHTML
在选区或者插入点上插入一段HTML代码段 (会删除选区内容)。需要传入一个有效的HTML代码段作为第3个参数。 (不被Internet Explorer支持。)
insertImage
在选区或者插入点上插入图像(会删除选区内容)。需要传入有效的图像SRC URI字串作为第3个参数。URI必须至少包含一个字符,可以是空格。 (Internet Explorer会在传入URI为null值时建立一个链接。)
insertOrderedList
在选区或者插入点建立一个有序列表。
insertUnorderedList
在选区或者插入点建立一个无序列表。
insertParagraph
在选区或者插入点上产生一个段落(p标记)。 (Internet Explorer会在插入点上插入一个段落的同时删除选区内容。)
insertText
在选区或者插入点上插入一段纯文本 (会删除选区内容)。
italic
为选区或者插入点开关斜体。 (Internet Explorer会使用EM标记,而不是I标记。)
justifyCenter
使选区或者插入点所在块居中。
justifyFull
使选区或者插入点所在块文本两端对齐。
justifyLeft
使选区或者插入点所在块居左。
justifyRight
使选区或者插入点所在块居右。
outdent
去除选取或者插入点所在行的一个缩进。
paste
在选区或者插入点粘贴剪切板中的文字。(会替换当前选区的文本)。需要在user.js中打开剪切板功能。
redo
撤销之前的撤销(undo)操作。
removeFormat
删除当前选取上的所有格式。
selectAll
全选可编辑的所有内容。
strikeThrough
开启或关闭选区或者插入点的删除线。
subscript
开启或关闭选区或者插入点的上标功能。
superscript
开启或关闭选区或者插入点的下标功能。
underline
开启或关闭选区或者插入点的下划线功能。
undo
撤销上一个操作。
unlink
删除选取的超链接文本的超链接标记。
useCSS 
开启或关闭使用HTML标记或者CSS来生成标记。 需要传入一个boolean值作为第3个参数。 注意:这个参数逻辑上相反,false表示使用CSS,true表示使用HTML。 (不被Internet Explorer支持。)这个方法已经被废弃,请使用styleWithCSS方法替代。
styleWithCSS
用于替换 useCSS 方法。它的参数符合想象,即true表示用CSS来修饰或者生成标记,false表示用HTML格式标记来实现富文本格式。
~~~~~~~~~~~~~~~~~~~~~分割线~~~~~~~~~~~~~~~~~~~~~
通过上述不同参数,我们就可以针对编辑的内容进行样式的修改了。
例如
设置字体
document.execCommand(fontName,0,’宋体’);
设置颜色
document.execCommand(foreColor,0,’#7e2412′);
利用不同的参数,我们就可以快速的开发出一个简单的文本组件编辑器了。

注册登录浅析

常说登录墙,但是我更愿意把登录比作一扇门,目标是让它成为一扇可以让用户轻易打开的门,而不是一堵无法跨越的墙。

如何将自己网站的注册登录打造为一扇用户可以轻而易举开启的门呢?

本文主要从两个方面着手讨论。理由和设计

一、理由:我们要给用户一个理由,为什么要注册登录

如果不问三七二十一,在用户想要使用APP或查看网站信息的第一页,就强制他们注册或登录,会让用户极度困惑,因为我只是要查看里面一些基本的信息,这样做有什么意义?

面对这样的问题,你可能会说这仅仅在第一次啊,下次用户来的时候就在保持登录的状态了!”但是可能第一次用户就没有坚持到注册完成,那么也就自然没有下次了。我们要理解当用户对于他们使用你的app或者网站能得到什么并没有太多概念时,他们清楚的知道填一堆信息对他们来说是个负担(尤其在尺寸较小的触屏手机上,输入用户名和密码太崩溃了。)那他可能就中途放弃了。

所以要从APP或网站的自身属性下手,个人化or公共化。对于微信、QQ这样,强社交,具有高度个人化的产品,必须基于账号才能使用,或者邮件,银行之类的私密的个人应用,从安全性角度考虑,将注册登录界面放置在第一页,对用户来讲,都是容易接受的,作为新闻客户端,美图秀秀这种,是个简单工具类或者资讯类应用,那就没必要强制用户去登录了。

二、设计:注册登录位置后移,流程要化繁为简,细节要追求极致

注册登录位置后移

如果不是像QQ这样以用户的关系链为核心,功能与个人的账号紧密地联系在一起的前提下,尽可能得将注册登录后移,首先开放公共属性功能,先让用户知道产品是什么,让用户对产品的内容和定位有个清晰认可,如果对产品有了认同感,或者用户需要使用个性化属性功能时,再引导用户进行注册登录就会相对容易很多。微博目前也会开放部分公共展示内容,需要添加好友或浏览更多内容时才会引导注册登录。

流程要化繁为简

流程简化简单一点说就是步骤少一些,选择少一些。能不要的就不要,暂时不需要的也不要

首先要考虑的问题是需要一个什么样的帐号体系?自己开发还是第三方登录的?自己开发需要手机还是邮箱?还是两者都需要?没增加一个选择,用户流失的可能性就大了一分,所以一定要根据自己的业务需要慎重选择。

其次很多信息其实并不是在注册的时候就需要的,比如绑定手机号、绑定邮箱,添加个人详细信息等等,这些并不影响用户的基本体验,只是在将来体验更多长尾功能时所需要的,那么完全可以等到有需要的时候再去引导补充。比如电商网站,需要收货地址吗?非常需要,那就要在一开始注册的时候就填写,为用户增加一个障碍吗。不是,只要用户购买的时候再追加收货地址就可以了。

细节要追求极致

1.当需要填写的表单很多时,可以通过第一步,第二步这样的引导导航,让用户清楚的知道需要多少步骤就可以达到目标。同时清晰了解操作过程,不需要思考后续环节会出现什么页面。

图片1

2.使用对其排列、长度相等的表格项相同的字体来减少视觉干扰,表单项非常紧凑能够一眼就可以把所有的信息浏览完毕。

 图片2

3.明确的表示出哪些项目是必填的,那些是暂时可以跳过的。

 图片3

 4.当失焦的时候,显示确认信息,提示这条信息的是正确或者是错误。

图片4

 5.告知用户为什么要索取用户信息

 图片5

移动Sitemap如何提交

Sitemap(即站点地图)就是您网站上各网页的列表。创建并提交Sitemap有助于百度发现并了解您网站上的所有网页。您还可以使用Sitemap提供有关您网站的其他信息,如上次更新日期、Sitemap文件的更新频率等,供百度Spider参考。

百度对已提交的数据,不保证一定会抓取及索引所有网址。但是,我们会使用Sitemap中的数据来了解网站的结构等信息,这样可以帮助我们改进抓取策略,并在日后能更好地对网站进行抓取。

此外,Sitemap 与搜索排名没有关系。

百度Sitemap支持哪些格式

百度Sitemap协议支持三种格式:文本格式、xml格式、Sitemap索引格式,可以根据自己情况来选择任意一种格式组织sitemap。具体格式说明及示例如下:

1.第一种格式样例:txt文本格式
在一个txt文本列明需要向百度提交的链接地址,将txt文本文件通过站长平台进行提交

http://www.example.com/repaste/101562698_5230191316.html

http://www.example.com/repaste/101586283_5230215075.html

http://www.example.com/repaste/101639435_5230310576.html

此文本文件需要遵循以下指南:
· 文本文件每行都必须有一个网址。网址中不能有换行。
· 不应包含网址列表以外的任何信息。
· 您必须书写完整的网址,包括 http。
· 每个文本文件最多可包含 50,000 个网址,并且应小于10MB(10,485,760字节)。如果网站所包含的网址超过 50,000 个,则可将列表分割成多个文本文件,然后分别添加每个文件。
· 文本文件需使用 UTF-8 编码或GBK编码。

2.第二种格式样例:xml格式
单个xml数据格式如下:
<?xml version=”1.0″ encoding=”utf-8″?>
<!– XML文件需以utf-8编码–>
<urlset>
<!–必填标签–>
<url>
<!–必填标签,这是具体某一个链接的定义入口,每一条数据都要用<url>和</url>包含在里面,这是必须的 –>
<loc>http://www.yoursite.com/yoursite.html</loc>
<!–必填,URL链接地址,长度不得超过256字节–>
<lastmod>2009-12-14</lastmod>
<!–可以不提交该标签,用来指定该链接的最后更新时间–>
<changefreq>daily</changefreq>
<!–可以不提交该标签,用这个标签告诉此链接可能会出现的更新频率 –>
<priority>0.8</priority>
<!–可以不提交该标签,用来指定此链接相对于其他链接的优先权比值,此值定于0.0-1.0之间–>
</url>
<url>
<loc>http://www.yoursite.com/yoursite2.html</loc>
<lastmod>2010-05-01</lastmod>
<changefreq>daily</changefreq>
<priority>0.8</priority>
</url>
</urlset>
上述Sitemap向百度提交了一个url:http://www.yoursite.com/yoursite.html

若有多条url,按照上述格式重复<url></url>之间的片断,列明所有url地址,打包到一个xml文件,向站长平台进行提交。

3.第三种格式样例:Sitemap索引格式
如需提交大量sitemap文件,则可将其列在sitemap索引文件中,然后将该索引文件提交。您无需分别提交每个文件。
<?xml version=”1.0″ encoding=”utf-8″?>
<!– XML文件需以utf-8编码–>
<sitemapindex>
<!–必填,以 <sitemapindex> 开始标记作为开始,以 </sitemapindex> 结束标记作为结束–>
<sitemap>
<!–必填,以<sitemap>标签提交一个子sitemap文件–>
<loc>http://example.com/ext/xmlsitemap/add/201201/index_20120106.xml</loc>

<!–必填,识别sitemap的位置–>
<lastmod>2009-12-14</lastmod>
<!–选填,识别相对sitemap文件的修改时间–>
</sitemap>
<!–必填,标签闭合–>
</sitemapindex>
<!–必填,标签闭合–>

有多个Sitemap,按上述格式重复<sitemap></sitemap>之间的片断,列明所有Sitemap地址,向站长平台进行提交。

创建Sitemap时有哪些注意事项?

第一,一个Sitemap文件包含的网址不得超过 5 万个,且文件大小不得超过 10 MB。如果您的Sitemap超过了这些限值,请将其拆分为几个小的Sitemap。这些限制条件有助于确保您的网络服务器不会因提供大文件而超载。
  第二,一次性最多提交50个地址,提交地址的文件类型和更新周期必须一致。

  第三,如果验证了网站的主域,那么Sitemap文件中可包含该网站主域下的所有网址。

  第四,如果验证的www.example.com,你只能提交该验证网站的网址,不能出现其他网站的网址。

如何提交Sitemap

第一步,将需提交的网页列表制作成一个Sitemap文件,文件格式请阅读百度Sitemap协议都支持哪些格式。
   第二步,将Sitemap文件放置在网站目录下。比如您的网站为example.com,您已制作了一个sitemap_example.xml的 Sitemap文件,将sitemap_example.xml上传至网站根目录即example.com/sitemap_example.xml
  第三步,登录百度站长平台,确保提交Sitemap数据的网站已验证归属。
  第四步,进入Sitemap工具,点击“添加新数据”,文件类型选择“URL列表”,填写抓取周期和Sitemap文件地址
  最后,提交完之后,可在Sitemap列表里看到提交的Sitemap文件,如果Sitemap文件里面有新的网站链接,可以选择文件后,点击更新所选,即对更新的网站链接进行了提交。

什么是移动Sitemap协议,如何提交移动Sitemap协议

百度推出了移动Sitemap协议,用于将网址提交给移动搜索收录。百度移动Sitemap协议是在标准Sitemap协议基础上制定的,增加了<mobile:mobile/>标签,它有三种取值:
<mobile:mobile/> :移动网页
<mobile:mobile type=”mobile”/> :移动网页
<mobile:mobile type=”autoadapt”/>:自适配网页,适用于同一网址页面,会随设备不同改变展现的情况。
无该上述标签表示为PC网页

下 方样例相当于向百度移动搜索提交了一个移动网页:http://m.example.com/index.html,向PC搜索提交了一个传统网 页:http://www.example.com/index.html,同时向移动搜索和PC搜索提交了一个自适配网页http: //www.example.com/autoadapt.html:
<?xml version=”1.0″ encoding=”UTF-8″ ?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:mobile=”http://www.baidu.com/schemas/sitemap-mobile/1/”>
<url>
<loc>http://m.example.com/index.html</loc>
<mobile:mobile type=”mobile”/>
<lastmod>2009-12-14</lastmod>
<changefreq>daily</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>http://www.example.com/index.html</loc>
<lastmod>2009-12-14</lastmod>
<changefreq>daily</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>http://www.example.com/autoadapt.html</loc>
<mobile:mobile type=”autoadapt”/>
<lastmod>2009-12-14</lastmod>
<changefreq>daily</changefreq>
<priority>0.8</priority>
</url>
</urlset>

按照移动Sitemap协议做好Sitemap后,在Sitemap工具点击添加新数据提交,与提交普通Sitemap方式一致。

【技术讨论】伪造http-referer的方法

有些网站为了统计一些访问来源数据和一些访问合法性,所以一般都会加上referer参数。如果加了referer,那么单纯的通过浏览器我们是无法直接访问或是通过普通的函数方法无法抓取的。为了方便测试我们不可能每次都要去服务器上去测试,幸好我们有google和火狐的插件。这次就通过浏览器伪造和程序伪造分别唠叨一翻(仅说说我平时用的,大家有什么好的方法,欢迎赐教)。

首先不得不说浏览器插件就是强大。

一、第一个插件就是google的ModHeader插件,安装很简单,工具-》更多工具-》扩展程序-》获取更多扩展工具。

使用方法也很简单,如下图所示。这样设置好,然后直接在浏览器上访问链接就ok了

二、火狐的hackbar插件

安装方法和谷歌一样一样的。

使用方法如下图。

三、通过以上方法也有很多不方便的地方,如果我们访问其他的页面有可能会引起冲突,所以如果你是一名PHP开发攻城师,就可以自己伪造一下了

程序伪造就不得不提及curl拉。我们都知道HTTP Referer是header的一部分,所以每次我们发送的时候只要设置一下header就可以拉。请看下面的代码,只要以下代码的CURLOPT_HTTPHEADER我们就把一切搞定了

$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, “访问的地址”);

$optionArray = array(‘header’ => array(‘Referer:referer的值’,'Host:访问的域名’));

curl_setopt($ch, CURLOPT_HTTPHEADER, $optionArray['header']);
curl_exec ($ch);
curl_close ($ch);

PS:前提是PHP已经支持Curl。

如果没有你的php不支持,那也不需要担心,我们也可以用sock。

$server = ‘地址’;
$host = ‘地址’;
$target = ‘访问地址’;
$referer = ‘referer的值’;
$port = 80;
$fp = fsockopen($server, $port, $errno, $errstr, 30);
if (!$fp)
{
echo “$errstr ($errno)<br />\n”;
}
else
{
$out = “GET $target HTTP/1.1\r\n”;
$out .= “Host: $host\r\n”;
$out .= “Cookie: ASPSESSIONIDSQTBQSDA=DFCAPKLBBFICDAFMHNKIGKEG\r\n”;
$out .= “Referer: $referer\r\n”;
$out .= “Connection: Close\r\n\r\n”;
fwrite($fp, $out);
while (!feof($fp))
{
echo fgets($fp, 128);
}
fclose($fp);
}