原生js写法实现ajax请求方式
  • 内容
  • 评论
  • 相关
一般我们做ajax的异步请求都会首先考虑的是jquery,确实jquery的确非常简单,但是前提得加载它那核心包,如何使用原生的js来实现这一功能呢?
设计模型是使用删除uploadify无刷新上传的图片。

1479191393772571.png

这里新建一个方法delUploadifyPic,并传入两个参数,一个是异步请求的url,一个是图片路径,到js端。

var xmlHttpRequest = null;
     
    function delUploadifyPic(url,data)
    {
        if(window.ActiveXObject) // IE浏览器
        {
            xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest) // 除IE以外的其他浏览器
        {
            xmlHttpRequest = new XMLHttpRequest();
        }
        if(null != xmlHttpRequest)
        {                         
             /*
              * POST方式向服务器发出一个请求
              */
            xmlHttpRequest.open("POST", url, true);
              
            // 当发生状态变化时就调用这个回调函数
            xmlHttpRequest.onreadystatechange = ajaxCallBack;
             
            // 使用post提交时必须加上下面这行代码
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
             
            // 向服务器发出一个请求
            xmlHttpRequest.send("data="+data);    
        }
    }
     
    function ajaxCallBack()
    {
        if(xmlHttpRequest.readyState == 4)
        {
            if(xmlHttpRequest.status == 200)
            {
                var content = xmlHttpRequest.responseText;
                if(content==1){
                    document.getElementById('icon').setAttribute("src","");
                    //parentNode找父节点
                    //nextSibling下一个兄弟元素
                    //style.display隐藏
                    document.getElementById('icon').parentNode.nextSibling.style.display="none";
                }
            }
        }
    }
这里使用PHP作为程序后端语言来接收ajax请求传递过来的值。
//成功删除源文件即可
public function delUploadifyPic(){
    if(unlink("./public/uploads/".input('post.data'))){
        echo 1;
    }
}
点赞
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
原生js写法实现ajax请求方式
本文标签:这篇文章木有标签
版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。
本文链接:http://suppore.cn/262.html   百度已收录

发表评论

电子邮件地址不会被公开。 必填项已用*标注

00:00 / 00:00
顺序播放