原生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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
js中数组的常用方法小结
Dec 30 Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
详解Vue之计算属性
Jun 20 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
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
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
PHP教程 变量定义
2009/10/23 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
深入php多态的实现详解
2013/06/09 PHP
PHPMailer发送邮件
2016/12/28 PHP
Js实现无刷新删除内容
2015/04/29 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
vue实现评价星星功能
2020/06/30 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
详解python中executemany和序列的使用方法
2017/08/12 Python
python语言基本语句用法总结
2019/06/11 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python之字典对象的几种创建方法
2020/09/30 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
文明家庭先进事迹材
2014/01/27 职场文书
一年级班主任感言
2014/03/08 职场文书
生物学专业求职信
2014/07/23 职场文书
工作收入住址证明
2014/10/28 职场文书
房屋认购协议书
2015/01/29 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python