快捷搜索:

pjblog发表评论用的ajaxJS,边学边练

作者: w88官方网站手机版  发布:2019-08-24

效果1. 当鼠标放在某日上时,如果当天有备忘录,则会显示出来,如下图:
w88官方网站手机版 1

  Ajax其实已经使用很久了,但一直也没有时间正经的找本书系统看看,最近时间比较充裕可以好好补习一下了。本系列是基于Ajax和PHP结合进行讲解,主要是想和正在学习或想要学习Ajax的朋友分享下经验。希望大家多多拍砖共同交流。

document.write('<DIV id="loadingg"  style="HEIGHT:65px; WIDTH: 200px;POSITION: absolute; Z-INDEX:1000;border:3px;solid;text-align:center;sans-serif;color:#000000;background-color:#FFFFFF;opacity:.7;-moz-opacity:.7;filter: Alpha(Opacity=75, FinishOpacity=50, Style=1, StartX=0, StartY=1, FinishX=200, FinishY=100); display:none;"><br/><font color="#708090"><b>数据正在读取中,请等候...</b></font><br/><img src="images/loading.gif"/></DIV>')
function showloading() 
{
var obj=document.getElementById("loadingg")
if (obj.style.display!="")
{
obj.style.left=((document.documentElement.clientWidth-parseFloat (obj.style.width))/2) document.documentElement.scrollLeft "px";
obj.style.top=((document.documentElement.clientHeight-parseFloat (obj.style.height))/2) document.documentElement.scrollTop "px";
obj.style.display="";
}else{obj.style.display="none";}
}

复制代码 代码如下:

  众所周知,Ajax并不是一个新生的语言,它是一系列语言的结合体:HTML/XHTML、CSS、DOM、XML、XSLT、XMLHttp、JavaScript。可以说Ajax涉及的知识面的确是很广的,在Web开发中为我们提供了很方便的交互式用户体验模式。以往我们浏览网页的原理是由Client向Server提交页面申请,再由Server将申请通过HTTP传回给Client生成浏览页面:

function $(id)
{
    return document.getElementById(id);    
}
function echo(obj,html)
{
    $(obj).innerHTML=html;
}
function fopen(obj)
{
    $(obj).style.display="";
}
function fclose(obj)
{
    $(obj).style.display="none";
}
function createxmlhttp()
{
    var xmlhttp=false;
    try    {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
     } 
    catch (e) {
          try {
               xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          } 
        catch (e) {
               xmlhttp = false;
         }
     }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
          xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) {//设置MiME类别
            xmlhttp.overrideMimeType('text/xml');
        }
    }    

function checkfortasks (thedate, e){
//找到页面中taskbox对应<div>设置为可见
theObject = document.getElementById("taskbox");
theObject.style.visibility = "visible";
//初始化taskbox位置
var posx = 0;
var posy = 0;
//定位taskbox位置为鼠标位置
posx = e.clientX document.body.scrollLeft;
posy = e.clientY document.body.scrollTop;
theObject.style.left = posx "px";
theObject.style.top = posy "px";
//设置PHP请求页面
serverPage = "taskchecker.php?thedate=" thedate;
//设置PHP返回数据替换位置
objID = "taskbox";
var obj = document.getElementById(objID);
//发送请求并加载返回数据
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

w88官方网站手机版 2

    return xmlhttp;    
}

效果2. 当鼠标点击某日录入姓名时,系统会自动检索姓名是否存在,并可以通过选择填入姓名框中,如图:
w88官方网站手机版 3

  使用Ajax后的工作原理如下图,可见通过Ajax在用户交互方面有了很大改进,用户可以不用为提交了Form而长时间等待服务器应答,而且通过Ajax也可以开发出华丽的Web交互页面。

function getdata(url,obj1,obj2)
{
w88官方网站手机版,        var xmlhttp=createxmlhttp();
        if(!xmlhttp)
        {
            alert("你的浏览器不支持XMLHTTP!!");
            return;
        }
        showloading() 
        xmlhttp.onreadystatechange=requestdata;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);
        function requestdata()
        {

复制代码 代码如下:

w88官方网站手机版 4

                fopen(obj1);
                //echo(obj1,"正在加载数据,请稍等......");
                //alert(xmlhttp.readyState)
                if(xmlhttp.readyState==4)
                {
                    if(xmlhttp.status==200)
                    {
                        if(obj1!=obj2){fclose(obj1);};
                        echo(obj2,xmlhttp.responseText);
                        showloading() 
                    }
                }

function autocomplete (thevalue, e){
//定位页面中autocompletediv(显示检索姓名的标签)的<div>位置
theObject = document.getElementById("autocompletediv");
//设置为可见
theObject.style.visibility = "visible";
theObject.style.width = "152px";
//设置检索标签位置
var posx = 0;
var posy = 0;

  在使用Ajax时,需要创建XMLHttpRequest对象,不同浏览器的创建方式略有不同:

        }
}
function postdata(url,obj,data)
{       var rnd=Math.random()
        var xmlhttp=createxmlhttp();
        if(!xmlhttp)
        {
            alert("你的浏览器不支持XMLHTTP!!");
            return;
        }
        showloading() 
        xmlhttp.open("POST", url, true);
        xmlhttp.onreadystatechange=requestdata;
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlhttp.send(data);
        function requestdata()
        {
            fopen(obj);
            echo(obj,"正在提交数据,请稍等......");
            if(xmlhttp.readyState==4)
            {
                if(xmlhttp.status==200)
                {
                    echo(obj,xmlhttp.responseText);
                    reget(rnd);
                    setTimeout("echo('showresult','')",2000);
                    echo('Message','')
                    showloading() 
                }
            }
        }
}
function lTrim(str)
{
  if (str.charAt(0) == " ")
  {
    //如果字串左边第一个字符为空格
    str = str.slice(1);//将空格从字串中去掉
    //这一句也可改成 str = str.substring(1, str.length);
    str = lTrim(str);    //递归调用
  }
  return str;
}

posx = (findPosX (document.getElementById("yourname")) 1);
posy = (findPosY (document.getElementById("yourname")) 23);

Copy to Clipboardw88官方网站手机版 5引用的内容:[www.bkjia.com] var xmlHttp=null;
try
{
// Firefox, Opera 8.0 , Safari 非IE浏览器
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//IE浏览器
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}

//去掉字串右边的空格
function rTrim(str)
{
  var iLength;

theObject.style.left = posx "px";
theObject.style.top = posy "px";
//设定事件为键盘录入
var theextrachar = e.which;

  在利用Ajax向服务器提交请求时,需要先确定三点:

  iLength = str.length;
  if (str.charAt(iLength - 1) == " ")
  {
    //如果字串右边第一个字符为空格
    str = str.slice(0, iLength - 1);//将空格从字串中去掉
    //这一句也可改成 str = str.substring(0, iLength - 1);
    str = rTrim(str);    //递归调用
  }
  return str;
}

if (theextrachar == undefined){
theextrachar = e.keyCode;
}
//设定加载检索名单位置
var objID = "autocompletediv";

  1. 使用GET或POST方式提交请求?

//去掉字串两边的空格
function trim(str)
{
  return lTrim(rTrim(str));
}

//设定PHP请求页面,并将用户输入的姓名传值过去(同时考虑到Backspace作用)
if (theextrachar == 8){
if (thevalue.length == 1){
    var serverPage = "autocomp.php";
}
else{
    var serverPage = "autocomp.php" "?sstring=" thevalue.substr(0, (thevalue.length -1));
}
}
else{
var serverPage = "autocomp.php" "?sstring=" thevalue String.fromCharCode(theextrachar);
}
//发送请求并加载返回数据
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

  2. 需要请求的页面(Page)或代码(Script)?

function f(obj)
{
    return trim(eval("document.ajax_post." obj ".value"));
    //return trim($(obj).value);
}

文件打包下载

  3. 将请求的页面或代码加载到页面什么位置?

function SaveReply()
{
    if(f("username")=="")
    {
        alert("请填写用户名");
        return false;
    }
    if(f("Message")=="")
    {
        alert("内容不可為空");
        return false;
    }
    var validate,password,log_DisKey=0,log_DisURL=0,log_DisSM=0
    validate=""
    password=""
    if(document.ajax_post.log_DisKey.checked){
        log_DisKey=f("log_DisKey")
        }
    if(document.ajax_post.log_DisURL.checked){
        log_DisURL=f("log_DisURL")
        }
    if(document.ajax_post.log_DisSM.checked){
        log_DisSM=f("log_DisSM")
        }
    if((typeof eval(document.ajax_post.validate))!="undefined"){
        if(f("validate")=="")
        {
            alert("请填写验证码");
            return false;
        }else{
            validate=f("validate");
        }
    }    
    if((typeof eval(document.ajax_post.password))!="undefined"){
        password=f("password");
    }
    data="username=" escape(f("username")) "&password=" escape(password) "&validate=" escape(validate) "&log_DisSM=" escape(log_DisSM) "&log_DisURL=" escape(log_DisURL) "&log_DisKey=" escape(log_DisKey) "&Message=" escape(f("Message")) "&logID=" escape(f("logID")) "&action=" escape(f("action"));
    //alert(data);
    postdata("wbc_blogcomm.asp","showresult",data);
    return true;
}

Copy to Clipboardw88官方网站手机版 6引用的内容:[www.bkjia.com] function makerequest(serverPage, objID) {
//将要被替换的页面位置obj
var obj = document.getElementById(objID);
//发出页面(serverPage)请求
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//将服务器返回的信息替换到页面位置obj
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

您可能感兴趣的文章:

  • JavaScript直播评论发弹幕切图功能点集合效果代码
  • 使用AngularJS和PHP的Laravel实现单页评论的方法
  • javascript无刷新评论实现方法
  • Json实现异步请求提交评论无需跳转其他页面
  • js写的评论分页(还不错)
  • js实现简单的星级选择器提交效果适用于评论等
  • JS类定义原型方法的两种实现的区别评论很多
  • javascript发表评论或者留言时的展开效果
  • 一个jsp AJAX评论系统
  • JS扩展Z-Blog图片验证码的单击自动刷新与评论内容自动保存
  • 原生js实现回复评论功能

  其中readyState表示当前对象状态,分为0~4的类别,0: uninitialized, 1: loading, 2: loaded, 3: interactive, 4: complete。status表示HTTP响应状态,常见状态有200 OK,304 Not Modified,401 Unauthorized,403 Forbidden,404 Not Found,500 Internal Server Error,503 Service Unavailable。代码中认定readyState==4和status==200为正常状态。

  下面再来看一个简单的代码,当用户点击Page1~4时,相应的链接文件将会显示在My Webpage页面中。

w88官方网站手机版 7

Copy to Clipboardw88官方网站手机版 8引用的内容:[www.bkjia.com] <html>
<head>
<title>Ajax Sample</title>
<script type="text/javascript">
var xmlHttp=null;
try
{
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function makerequest(serverPage,objId)
{
var obj = document.getElementById(objId);
xmlHttp.open("GET", serverPage);
xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
obj.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send(null);
}
</script>
<body onload="makerequest ('content1.html','hw')">
<div align="center">
<h1>My Webpage</h1>
<a href="content1.html" onclick="makerequest('content1.html','hw'); return false;">Page 1</a>
<a href="content2.html" onclick="makerequest('content2.html','hw'); return false;">Page 2</a>
<a href="content3.html" onclick="makerequest('content3.html','hw'); return false;">Page 3</a>
<a href="content4.html" onclick="makerequest('content4.html','hw'); return false;">Page 4</a>
//这里就是将要替换content1~4.html内容的位置。
<div id="hw"></div>
</div>
</body>
</html>

源代码下载:点击

转自:

...

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:pjblog发表评论用的ajaxJS,边学边练

关键词: www.w88985.c

上一篇:javascript数组的运用,呼之欲出array
下一篇:没有了