天空之城

您当前位置>>首页>>其它>>代码集>>原生ajax的简单应用

原生ajax的简单应用

来源:天空之城 - My Site   时间:2014-04-08 22:37:54   编辑:administrator   阅读数:160

[导读]原生js写的ajax简单应用,虽然现在js有很多强大的框架,大家比较熟知的应该就是jquery了,很多人似乎都已经习惯使用js框架而丢弃了原生js了,但是这里要说的一点就是一般情况下能用原生的尽量用原生(虽然相对可能会比较麻烦),因为在性能上相比较而言原生的会比较快;

    原生js写的ajax简单应用,虽然现在js有很多强大的框架,大家比较熟知的应该就是jquery了,很多人似乎都已经习惯使用js框架而丢弃了原生js了,但是这里要说的一点就是一般情况下能用原生的尽量用原生(虽然相对可能会比较麻烦),因为在性能上相比较而言原生的还是比较有优势的;至于为什么大家想想也应该知道(这个当然要在代码相同优秀的情况下,如果是一堆糟透的原生js那就另当别论了),当然从代码规范性以及可读性上感觉框架做的还是不错的,就好比php的框架一样,代码规范以及面向对象方面等等做的还是不错的,然后呢,功能强大也是主要的一点,我们只要使用这个轮子就行,js框架亦是如此;

    下面贴代码:ajax.rar

1.php(命名比较随意)

<?php
header("Content-Type:text/html;Charset=utf-8");
?>
原数值:<input type="text" value="100" id="number">
减去的数(不填默认为1):<input type="text" value="" id="des_num"/>
<input type="button" onclick="change_num()" value="减去" />
<script type="text/javascript">
<!--
//创建ajax引擎
function getXmlHttpObject(){
    var xmlHttpRequest;
    //根据不同浏览器使用对应的对象方法来获取对象xmlHttpRequest
    if(window.ActiveXObject){
        xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xmlHttpRequest=new XMLHttpRequest();
    }
    return xmlHttpRequest;
}
function change_num(){
    //获取ajax引擎对象
    var myXmlHttpRequest = getXmlHttpObject();
    if(myXmlHttpRequest){

        //获取参数
        var des_num = document.getElementById('des_num').value;
        var number  = document.getElementById('number').value;
        
        if(des_num==''){
            des_num = 1;
        }
        
        //创建引擎成功
        var url  = "2.php";
        //提交的数据
        var data = "number="+number+"&des_num="+des_num;
        
        myXmlHttpRequest.open("post",url,true);

        myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        myXmlHttpRequest.onreadystatechange = function(){
            //接收数据
            if(myXmlHttpRequest.readyState==4){
                if(myXmlHttpRequest.status==200){
                    //获取返回的值(多种模式Text,XML(PHP需设置XML格式返回)
                    var res     = myXmlHttpRequest.responseText;
                    document.getElementById('number').value = res;
                }
            }    
        }
        //发送数据
        myXmlHttpRequest.send(data);
        
    }
}
//-->
</script>

 

2.php

<?php 
$number  = $_POST['number'];
$des_num = $_POST['des_num'];
echo $number-$des_num;
exit();
?>

   

原生ajax的简单应用
原文地址:

上一篇:学习php过程中的迷茫、浮躁
下一篇:PHP设计模式之:工厂模式

    相关文章

    更多»
      just do it
      天空之城天空之城