原生Ajax 和jQuery Ajax的区别示例分析


Posted in Javascript onDecember 17, 2014

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开。服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置。打开时,在浏览器地址栏输入“localhost/指定页面”或者“127.0.0.1/指定页面”打开。

下面列出demo的HTML、PHP、原生ajax 、jq ajax代码。

HTML代码:

<!doctype html>

<html>

<head>

    <title>ajax示例</title>

    <meta charset='utf-8' />

    <link rel="stylesheet" type="text/css" href="css/common.css" />

    <style type="text/css">

        .main{height:400px;width:800px;margin:100px auto 0;border:1px solid #000;}

        .list{height:400px;width:200px;float:left;background:#ddd;}

        .inf{height:400px;width:600px;float:right;background:#ccc;text-align:center;}

        .list li{width:200px;text-align:center;margin:50px 0 0;font-size:24px;cursor: pointer;

        }

        .inf img{width:360px;height:270px;margin:15px auto;}

        .inf p{width:580px;text-align:left;text-indent:2em;font-size:14px;margin:0 10px;}

    </style>

</head>

<body>

    <div class='main'>

        <div class='list' id='list'>

            <ul>

                <li name='spring' id='spring'>春</li>

                <li name='summer' id='summer'>夏</li>

                <li name='fall' id='fall'>秋</li>

                <li name='winter' id='winter'>冬</li>

            </ul>

        </div>

        <div class='inf' id='inf'>

        <!--要插入的内容-->

        </div>

    </div>

</body>

<script type="text/javascript" charset="utf-8" src="js/jQuery.js"></script>

</html>

PHP代码:

<?php

$details = array (

    'spring'    =>    "<img src='images/spring.jpg' alt='' /><p>人间四月芳菲尽,山寺桃花始盛开</p>",

    'summer'    =>    "<img src='images/summer.jpg' alt='' /><p>水晶帘动微风起,满架蔷薇一院香</p>",

    'fall'    =>    "<img src='images/fall.jpg' alt='' /><p>金井梧桐秋叶黄,珠帘不卷夜来霜</p>",

    'winter'        =>    "<img src='images/winter.jpg' alt='' /><p>梅须逊雪三分白,雪却输梅一段香</p>"

);

echo $details[$_REQUEST['LiName']];

?>

原生ajax:

<script type="text/javascript">

    var lis = document.getElementById('list').getElementsByTagName('li');

    window.onload = initPage;

    function initPage() {

        for (var i=0; i<lis.length; i++) {

            txt = lis[i];

            txt.onclick = function () {

                getDetails(this.id);

            }

        }

    }

    function creatRequest() {

        try {

            request = new XMLHttpRequest();

        }

        catch (tryMS) {

            try {

                request = new ActiveXObject("Msxml2.XMLHTTP");

            }

            catch (otherMS) {

                try {

                    request = new ActiveXObject("Miscrosoft.XMLHTTP");

                }

                catch (failed) {

                    request = null;

                }

            }

        }

        return request;

    }

    function getDetails(itemName) {

        request = creatRequest();

        if (request == null) {

            alert('没有成功创建请求')

            return;

        }

        var url = "getDetails.php?LiName="+escape(itemName);

        request.open("GET",url,true);

        request.onreadystatechange = displayDetails;

        request.send(null);

    }

    function displayDetails() {

        if (request.readyState == 4) {

        if (request.status == 200) {

            detailDiv = document.getElementById("inf");

            detailDiv.innerHTML = request.responseText;

        }

      }

    }   

</script>

JQ ajax:

<script type="text/javascript">

$('#list li').click ( function () {                       

        $.ajax({                           

            type:'GET',                            

            data:'',                           

            url:"getDetails.php?LiName="+this.id,                           

            success:function(data){                                

                $('#inf').html(data);                                

            },

            dataType:'text',

            error:function (){                

                alert("失败!");            

            }

        })                    

    });

</script>
Javascript 相关文章推荐
Javascript继承机制的设计思想分享
Aug 28 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
个人小程序接入支付解决方案
May 23 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 #Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 #Javascript
javascript实现根据身份证号读取相关信息
Dec 17 #Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 #Javascript
javascript操作数组详解
Dec 17 #Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 #Javascript
javascript实现节点(div)名称编辑
Dec 17 #Javascript
You might like
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
Apache站点配置SSL强制跳转443
2021/03/09 Servers
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
Javascript window对象详解
2014/11/12 Javascript
Javascript中神奇的this
2016/01/20 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
解决vue热替换失效的根本原因
2018/09/19 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
浅谈python标准库--functools.partial
2019/03/13 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python FTP批量下载/删除/上传实例
2019/12/22 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python对一个数向上取整的实例方法
2020/06/18 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Python使用shutil模块实现文件拷贝
2020/07/31 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
表彰会主持词
2014/03/26 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android