分类： 站长笔记

发布于

[转载]原生js实现ajax封装

一、什么是ajax？

定义：Ajax(Asynchronous Java and XML的缩写)是一种异步请求数据的web开发技术，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。

作用：提高用户体验，减少网络数据的传输量

二、ajax常见运用场景

表单验证是否登录成功、百度搜索下拉框提示和快递单号查询等等。

三、Ajax原理是什么

Ajax请求数据流程，其中最核心的依赖是浏览器提供的对象xhr，它扮演的角色相当于秘书，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面

四、ajax涉及的知识点

1、readyState：返回当前文档的载入状态

0-(未初始化)还没有调用send()方法

1-(载入)已调用send()方法，正在发送请求

2-(载入完成)send()方法执行完成，已经接收到全部响应内容

3-(交互)正在解析响应内容

4-(完成)响应内容解析完成，可以在客户端调用了

 2、status：HTTP状态码

     1XX：信息性状态码     ，表示接收的请求正在处理

2XX：成功状态码       ， 表示请求正常处理

3XX：重定向状态码    ，表示需要附加操作来完成请求

4XX：客户端错误状态  ，表示服务器无法处理请求

5XX：服务器错误状态  ，表示服务器处理请求出错

3、get和post的区别

五、原生JS实现ajax请求

 

<script>
    function ajax(options){
        options = options ||{};  //调用函数时如果options没有指定，就给它赋值{},一个空的Object
        options.type=(options.type || "GET").toUpperCase();/// 请求格式GET、POST，默认为GET
        options.dataType=options.dataType || "json";    //响应数据格式，默认json

        var params=formatParams(options.data);//options.data请求的数据

        var xhr;

        //考虑兼容性
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else if(window.ActiveObject){//兼容IE6以下版本
            xhr=new ActiveXobject('Microsoft.XMLHTTP');
        }

        //启动并发送一个请求
        if(options.type=="GET"){
            xhr.open("GET",options.url+"?"+params,true);
            xhr.send(null);
        }else if(options.type=="POST"){
            xhr.open("post",options.url,true);

            //设置表单提交时的内容类型
            //Content-type数据请求的格式
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(params);
        }

    //    设置有效时间
        setTimeout(function(){
            if(xhr.readySate!=4){
                xhr.abort();
            }
        },options.timeout)

    //    接收
    //     options.success成功之后的回调函数  options.error失败后的回调函数
    //xhr.responseText,xhr.responseXML  获得字符串形式的响应数据或者XML形式的响应数据
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                var status=xhr.status;
                if(status>=200&& status<300 || status==304){
                  options.success&&options.success(xhr.responseText,xhr.responseXML);
                }else{
                    options.error&&options.error(status);
                }
            }
        }
    }

    //格式化请求参数
    function formatParams(data){
        var arr=[];
        for(var name in data){
            arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
        }
        arr.push(("v="+Math.random()).replace(".",""));
        return arr.join("&");

    }
    //基本的使用实例
    ajax({
        url:"http://server-name/login",
        type:'post',
        data:{
            username:'username',
            password:'password'
        },
        dataType:'json',
        timeout:10000,
        contentType:"application/json",
        success:function(data){
　　　　　　。。。。。。//服务器返回响应，根据响应结果，分析是否登录成功
        },
        //异常处理
        error:function(e){
            console.log(e);
        }
    })
</script>

 

 

来源：https://www.cnblogs.com/qing-5/p/11368009.html

 

 

发布于

PHPMailer-用于PHP的功能齐全的电子邮件创建和传输类

Github开源地址： https://github.com/PHPMailer/PHPMailer/

Class Features

  • Probably the world's most popular code for sending email from PHP!
  • Used by many open-source projects: WordPress, Drupal, 1CRM, SugarCRM, Yii, Joomla! and many more
  • Integrated SMTP support - send without a local mail server
  • Send emails with multiple To, CC, BCC and Reply-to addresses
  • Multipart/alternative emails for mail clients that do not read HTML email
  • Add attachments, including inline
  • Support for UTF-8 content and 8bit, base64, binary, and quoted-printable encodings
  • SMTP authentication with LOGIN, PLAIN, CRAM-MD5, and XOAUTH2 mechanisms over SSL and SMTP+STARTTLS transports
  • Validates email addresses automatically
  • Protect against header injection attacks
  • Error messages in over 50 languages!
  • DKIM and S/MIME signing support
  • Compatible with PHP 5.5 and later
  • Namespaced to prevent name clashes
  • Much more!

Why you might need it

Many PHP developers need to send email from their code. The only PHP function that supports this is mail(). However, it does not provide any assistance for making use of popular features such as encryption, authentication, HTML messages, and attachments.

Formatting email correctly is surprisingly difficult. There are myriad overlapping RFCs, requiring tight adherence to horribly complicated formatting and encoding rules – the vast majority of code that you'll find online that uses the mail() function directly is just plain wrong! Please don't be tempted to do it yourself – if you don't use PHPMailer, there are many other excellent libraries that you should look at before rolling your own. Try SwiftMailer, Zend/Mail, ZetaComponents etc.

The PHP mail() function usually sends via a local mail server, typically fronted by a sendmail binary on Linux, BSD, and macOS platforms, however, Windows usually doesn't include a local mail server; PHPMailer's integrated SMTP implementation allows email sending on Windows platforms without a local mail server.

License

This software is distributed under the LGPL 2.1 license, along with the GPL Cooperation Commitment. Please read LICENSE for information on the software availability and distribution.

对应的机翻中文版：

班级特色

  • 可能是全球最受欢迎的用于从PHP发送电子邮件的代码！
  • 已被许多开源项目使用：WordPress，Drupal，1CRM，SugarCRM，Yii和Joomla！还有很多
  • 集成的SMTP支持-在没有本地邮件服务器的情况下发送
  • 发送带有多个“收件人”，“抄送”，“密件抄送”和“回复”地址的电子邮件
  • 不阅读HTML电子邮件的邮件客户端的多部分/备用电子邮件
  • 添加附件，包括内联
  • 支持UTF-8内容以及8位，base64，二进制和带引号的可编码
  • 通过SSL和SMTP + STARTTLS传输使用LOGIN，PLAIN，CRAM-MD5和XOAUTH2机制进行SMTP身份验证
  • 自动验证电子邮件地址
  • 防止标题注入攻击
  • 超过50种语言的错误消息！
  • DKIM和S / MIME签名支持
  • 与PHP 5.5及更高版本兼容
  • 命名空间以防止名称冲突
  • 多得多！

为什么可能需要它

许多PHP开发人员需要从其代码发送电子邮件。支持此功能的唯一PHP函数是mail()。但是，它对使用诸如加密，身份验证，HTML消息和附件之类的流行功能没有任何帮助。

正确格式化电子邮件非常困难。有无数重叠的RFC，需要严格遵守极其复杂的格式和编码规则-您在网上会发现mail()直接使用该功能的绝大多数代码是完全错误的！ 请不要尝试自己动手做-如果您不使用PHPMailer，则在滚动自己的应用程序之前，还应该查看许多其他优秀的库。试试SwiftMailer，Zend / Mail，ZetaComponents等。

PHP mail()函数通常通过本地邮件服务器发送，通常sendmail在Linux，BSD和macOS平台上以二进制文件开头，但是Windows通常不包括本地邮件服务器。PHPMailer的集成SMTP实现允许在Windows平台上发送电子邮件，而无需本地邮件服务器。

执照

该软件与LGPL 合作承诺书一起在LGPL 2.1许可下分发。请阅读许可以获得有关软件可用性和发行的信息。

发布于

CSS重置样式Normalize.css

Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。

 

normalize.css的目标如下：

保留有用的浏览器默认值，而不是删除它们。

规范化各种HTML元素的样式。

纠正错误和常见的浏览器不一致。

通过微妙的改进提高可用性。

使用注释和详细文档解释代码。

它支持多种浏览器（包括移动浏览器），并且包括对HTML5元素，排版，列表，嵌入式内容，表单和表格进行规范化的CSS。

 

Github地址

https://github.com/necolas/normalize.css

 

 

发布于

CSS3 @media查询的应用

网页制作过程中经常会遇到自适应的情况,不同设备分辨率不一样,如何能使用网页适应设备呢?

在css3中有个技术@media 查询,可以帮到我们解决这个问题.

 

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}

注意：建议在书写css的过程中，@media查询带的css写在后面，以避免被前面的css覆盖

知识扩展

@media only screen and

only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)
你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

 

媒体类型

值 描述
all 用于所有设备
aural 已废弃。用于语音和声音合成器
braille 已废弃。 应用于盲文触摸式反馈设备
embossed 已废弃。 用于打印的盲人印刷设备
handheld 已废弃。 用于掌上设备或更小的装置，如PDA和小型电话
print 用于打印机和打印预览
projection 已废弃。 用于投影设备
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备
tty 已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv 已废弃。 用于电视和网络电视

发布于

PHP版微信公众号开发接口配置信息验证代码

微信公众平台接口测试帐号申请

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

无需公众帐号、快速申请接口测试号直接体验和测试公众平台所有高级接口

 

请把以下代码保存成php文件,然后在接口配置信息中的URL填写此文件网址

然后文件中的Token值修改成一致即可(Token值自己定义).

 

<?php

/**
 * wechat php test
 */

//define your token
define("TOKEN", "你设置的Token值");
$wechatObj = new wechatCallbackapiTest();
$wechatObj->valid();


class wechatCallbackapiTest
{
	public function valid()
  {
    $echoStr = $_GET["echostr"];


    //valid signature , option
    if($this->checkSignature()){
    	echo $echoStr;
    	exit;
    }
  }


  public function responseMsg()
  {
		//get post data, May be due to the different environments
		$postStr = $GLOBALS["HTTP_RAW_POST_DATA"];


   	//extract post data
		if (!empty($postStr)){
       
       	$postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA);
        $fromUsername = $postObj->FromUserName;
        $toUsername = $postObj->ToUserName;
        $keyword = trim($postObj->Content);
        $time = time();
        $textTpl = "<xml>
							<ToUserName><![CDATA[%s]]></ToUserName>
							<FromUserName><![CDATA[%s]]></FromUserName>
							<CreateTime>%s</CreateTime>
							<MsgType><![CDATA[%s]]></MsgType>
							<Content><![CDATA[%s]]></Content>
							<FuncFlag>0</FuncFlag>
							</xml>";      
				if(!empty( $keyword ))
        {
       		$msgType = "text";
        	$contentStr = "Welcome to wechat world!";
        	$resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr);
        	echo $resultStr;
        }else{
        	echo "Input something...";
        }


    }else {
    	echo "";
    	exit;
    }
  }
		
	private function checkSignature()
	{
    $signature = $_GET["signature"];
    $timestamp = $_GET["timestamp"];
    $nonce = $_GET["nonce"];	
    		
		$token = TOKEN;
		$tmpArr = array($token, $timestamp, $nonce);
		sort($tmpArr);
		$tmpStr = implode( $tmpArr );
		$tmpStr = sha1( $tmpStr );
		
		if( $tmpStr == $signature ){
			return true;
		}else{
			return false;
		}
	}
}

?>

来源:https://blog.csdn.net/qq_39618374/article/details/80535901

 

 

 

 

发布于

JS正则匹配style,width,height等属性

JS正则匹配style,width,height等属性

 

 

str=str.replace(/[ t]*style[ t]*=[ t]*("[^"]+")|('[^']+')/ig,"");
str=str.replace(/[ t]*width[ t]*=[ t]*("[^"]+")|('[^']+')/ig,"");
str=str.replace(/[ t]*height[ t]*=[ t]*("[^"]+")|('[^']+')/ig,"");
str=str.replace(/[ t]*width[ t]*=[ t]*[^ t]+/ig,"");
str=str.replace(/[ t]*height[ t]*=[ t]*[^ t]+/ig,"");

 

 

使用实例

图片自适应问题,保留宽度,删除高度

 

html部分

<body onload='clearheight()'>
<div id='con'>
<p>这里是内容,很多图片内容啊<p>
</div>
</body>

js部分

<script type="text/javascript"> 
function clearheight() 
{ 
var e=document.getElementById("con"); 
var scon=e.innerHTML; 
scon = scon.replace(/[ t]*height[ t]*=[ t]*("[^"]+")|('[^']+')/ig,""); 
scon = scon.replace(/[ t]*height[ t]*=[ t]*[^ t]+/ig,"");
e.innerHTML=str1; 
} 
</script>

 

 

 

 

 

 

 

发布于

Proxmox VE强大的开源服务器解决方案

Proxmox VE（英语：Proxmox Virtual Environment，通常简称为PVE），是一个开源的服务器虚拟化环境Linux发行版。Proxmox VE基于Debian，使用基于Ubuntu的定制内核，包含安装程序、网页控制台和命令行工具，并且向第三方工具提供了REST API，在Affero通用公共许可证第三版下发行。

发布于

js中的匿名函数

来源:https://www.cnblogs.com/ranyonsue/p/10181035.html

收藏主要用于学习.如有侵权请联系,必删.

 

匿名函数顾名思义指的是没有名字的函数，在实际开发中使用的频率非常高！也是学好JS的重点。

匿名函数：没有实际名字的函数。

首先我们声明一个普通函数：

//声明一个普通函数，函数的名字叫fn

function fn(){

console.log("张培跃");

}

然后将函数的名字去掉即是匿名函数：

 

//匿名函数，咦，运行时，你会发现报错啦！

function (){

console.log("张培跃");

}

到此，你会发现单独运行一个匿名函数，由于不符合语法要求，报错啦！解决方法只需要给匿名函数包裹一个括号即可：

//匿名函数在其它应用场景括号可以省略

(function (){

//由于没有执行该匿名函数，所以不会执行匿名函数体内的语句。

console.log("张培跃");

})

如果需要执行匿名函数，在匿名函数后面加上一个括号即可立即执行！

(function (){

//此时会输出张培跃

console.log("张培跃");

})()

倘若需要传值，直接将参数写到括号内即可：

(function (str){

//此时会输出张培跃好帅！

console.log("张培跃"+str);

})("好帅！")

 

匿名函数的应用场景

1、事件

<input type="button" value="点我啊！" id="sub">

<script>

//获得按钮元素

var sub=document.querySelector("#sub");

//给按钮增加点击事件。

sub.onclick=function(){

alert("当点击按钮时会执行到我哦！");

}

</script>

 

2、对象

var obj={

name:"张培跃",

age:18,

fn:function(){

return "我叫"+this.name+"今年"+this.age+"岁了！";

}

};

console.log(obj.fn());//我叫张培跃今年18岁了！

 

3、函数表达式

//将匿名函数赋值给变量fn。

var fn=function(){

return "我是一只小小小小留下，怎么飞也飞不高！"

}

//调用方式与调用普通函数一样

console.log(fn());//我是一只小小小小留下，怎么飞也飞不高！

 

4、回调函数

setInterval(function(){

console.log("我其实是一个回调函数，每次1秒钟会被执行一次");

},1000);

 

5、返回值

//将匿名函数作为返回值

function fn(){

//返回匿名函数

return function(){

return "张培跃";

}

}

//调用匿名函数

console.log(fn()());//张培跃

//或

var box=fn();

console.log(box());//张培跃

 

模仿块级作用域

块级作用域，有的地方称为私有作用域。JavaScript中是没有块级作用域的，例如：

if(1==1){//条件成立，执行if代码块语句。

var a=12;//a为全局变量

}

console.log(a);//12

 

for(var i=0;i<3;i++){

console.log(i);

}

console.log(i);//4

if(){}for(){}等没有自己的作用域。如果有，出了自己的作用域，声明的变量就会立即被销毁了。但是咱们可以通过匿名函数来模拟块级作用域：

 

(function(){

//这里是我们的块级作用域（私有作用域）

})();

 

尝试块级作用域：

function fn(){

(function(){

var la="啦啦啦！";

})();

console.log(la);//报错---la is not defined

}

fn();

 

匿名函数的作用：

1、通过匿名函数可以实现闭包，关于闭包在后面的文章中会重点讲解。在这里简单介绍一下：闭包是可以访问在函数作用域内定义的变量的函数。若要创建一个闭包，往往都需要用到匿名函数。

2、模拟块级作用域，减少全局变量。执行完匿名函数，存储在内存中相对应的变量会被销毁，从而节省内存。再者，在大型多人开发的项目中，使用块级作用域，会大大降低命名冲突的问题，从而避免产生灾难性的后果。自此开发者再也不必担心搞乱全局作用域了。

发布于

一个页面同时使用多个TinyMCE编辑器

来源:

http://tinymce.ax-z.cn/general/multiple-editors.php

一个配置共享多个编辑器实例

该官方提供的例子，将页面分成两个单独的可编辑区域。每个区域共享一个编辑器。每个区域的div使用了相同的class（.myeditablediv）。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>
  tinymce.init({
    selector: '.myeditablediv',
    inline: true
  });
  </script>
</head>

<body>
  <h1>Multple editors on a page: Section 1</h1>
  <form method="post">
    <div class="myeditablediv">Click here to edit the first section of content!</div>
  </form>

  <h1>Multple editors on a page: Section 2</h1>
  <form method="post">
      <div class="myeditablediv">Click here to edit the second section of content!</div>
  </form>
</body>
</html>

多个实例，每个具有唯一配置

简单说就是init两次，每次selector不一样就是了，不废话直接上官方示例代码。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script">
  tinymce.init({
    selector: '#myeditable-h1',
    inline: true,
    menubar: false,
    toolbar: 'undo redo'
  });
  </script>
  <script>
  tinymce.init({
    selector: '#myeditable-div',
    inline: true
  });
  </script>
</head>

<body>
  <form method="post">
    <h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
  </form>

  <form method="post">
    <div id="myeditable-div">
      <p>This section of content can be edited. Click here to see how.</p>
    </div>
  </form>
</body>
</html>

 

说明:

在做网页开发时,有时会遇到一个表单使用多个编辑器,通常编辑器的配置是一样的,这时我们只需要统一给编辑器一个class即可简单实现一个页面同时使用多个TinyMCE编辑器.