开始研究Ajax. 第一天




开始研究Ajax. 第一天

首先,我是一个不适合学习程序的人,也不喜欢,因为我非常马虎,每次都会写错很多代码。不过出于对DOM,JS,CSS热爱,还是开始研究Ajax了。

什么是Ajax?
我答:首先Ajax的四个组成部分为[XMLHttpRequest],[Javascript],[DOM],[CSS].这四个东西暂且不多解释。这四个东西的作用是 [XMLHttpRequest]负责与Web服务器通信,[Javascript]通过控制[DOM]来控制页面,[CSS]做页面修饰,当然也是被控制的对像。这就是Ajax。我所理解的。

下面是一个实例!
Ajax的Hello页! Hello The World!

CODE:

[Copy to clipboard]

<html>
<head>
    <title>Hello.the World</title>

<style type="text/css"><!--
    .declared { color:red; font-size:14px; }
    .programmed { color:blue; font-size:12px; font-weight:bold;}
--></style>

<script>
    window.onload=function() {
        var hello=document.getElementById('hello');  //通过ID找到元素
        hello.className='declared';

var empty=document.getElementById('empty');
        addNode(empty,"reader of");
        addNode(empty,"Ajax in Action!");

var children=empty.childNodes;
        for (var i=0;i<children.length;i++) {
            children[i].className='programmed';
        }

empty.style.border='solid green 2px';  //直接为节点设置样式
        empty.style.width="200px";
    }

function addNode(el,text){
        var childEl=document.createElement("div");  //创建新元素
        el.appendChild(childEl);
        var txtNode=document.createTextNode(text);  //创建文本元素
        childEl.appendChild(txtNode);
    }
</script>
</head>
<body>
    <p id="hello">Hello</p>
    <div id="empty"></div>
</body>
</html>
这个例子就是通过Javascript控制DOM,在页里面写内容还有就是对页面内容用CSS修饰。

(0)

相关推荐

  • 开始研究Ajax. 第一天

    开始研究Ajax. 第一天 首先,我是一个不适合学习程序的人,也不喜欢,因为我非常马虎,每次都会写错很多代码.不过出于对DOM,JS,CSS热爱,还是开始研究Ajax了. 什么是Ajax?我答:首先Ajax的四个组成部分为[XMLHttpRequest],[Javascript],[DOM],[CSS].这四个东西暂且不多解释.这四个东西的作用是 [XMLHttpRequest]负责与Web服务器通信,[Javascript]通过控制[DOM]来控制页面,[CSS]做页面修饰,当然也是被控制的对

  • Ajax基础详解教程(一)

    什么是Ajax? 在研究ajax之前首先让我们先来讨论一个问题 --什么是Web 2.0 .听到 Web 2.0 这个词的时候,应该首先问一问 "Web 1.0 是什么?" 虽然很少听人提到 Web 1.0,实际上它指的就是具有完全不同的请求和响应模型的传统 Web.比如,到 hdu.edu.cn 网站上点击一个按钮.就会对服务器发送一个请求,然后响应再返回到浏览器.该请求不仅仅是新内容和项目列表,而是另一个完整的 HTML 页面.因此当 Web 浏览器用新的 HTML 页面重绘时,可

  • Ajax+js实现异步交互

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 创建ajax核心对象 与服务器建立连接 向服务器发送请求 接收服务器响应的数据 看似神秘的异步交互当明确这4步后,也许在大家脑海里已经有了初步的思路了 首先我们创建ajax的核心对象,由于浏览器的兼容问题我们在创建ajax核心对象的时候不得考虑其兼容问题,因为要想实现异步交互的后面步骤都基于第一步是否成功的创建了ajax核心对象. functio

  • asp.net 使用ObjectDataSource控件在ASP.NET中实现Ajax真分页

    ListView控件本身并没有分页功能,不过借助于ASP.NET中新增加的DataPager控件,我们可以非常方便地对ListView中的数据设置分页,这几乎不需要开发人员写一行代码,将ListView控件放到页面上,设置好布局和DataSource,然后再添加一个DataPager控件,将它的PagedControlID属性设置成ListView的ID,PageSize中设置每页要显示的数据条数,然后在Fields中设置好分页的样式(当然你完全可以不用去管样式,ASP.NET会根据内置的样式来

  • Ajax简单的异步交互及Ajax原生编写

    一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 1.创建ajax核心对象 2.与服务器建立连接 3.向服务器发送请求 4.接收服务器响应的数据 看似神秘的异步交互当明确这4步后,也许在大家脑海里已经有了初步的思路了 首先我们创建ajax的核心对象,由于浏览器的兼容问题我们在创建ajax核心对象的时候不得考虑其兼容问题,因为要想实现异步交互的后面步骤都基于第一步是否成功的创建了ajax核心对象.

  • Ajax的使用四大步骤

    什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 如何使用ajax? 第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据. var xhttp; if (window.XMLHttpRequest) { //现代主流浏览器 xhttp = new XMLHttpRequest(); } else { // 针对浏览器,比如

  • 使用ajax技术无刷新动态调用新浪股票实时数据

    新浪的财金频道一直感觉做得很好.但由于最近网速慢的缘故,查看股票信息时网页老是打不开.这几天一直在研究ajax,于是用jquery自己做了一个自动读取新浪股票实时数据的页面. <html> <head> <title>ajax test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <scri

  • 使用Ajax进行文件与其他参数的上传功能(java开发)

    文件上传: 记得前一段时间,为了研究Ajax文件上传,找了很多资料,在网上看到的大部分是form表单的方式提交文件,对于Ajax方式提交文件并且也要提交表单中其他数据,发现提及的并不是很多,后来在同事的帮助下,使用ajaxfileupload最终完成了文件上传与其他提交的操作,现在分享给大家,希望大家能有有所帮助. 操作步骤: 1 导入jar包: 我们在使用文件上传时,需要使用到两个jar包,分别是commons-io与commons-fileupload,在这里我使用的两个版本分别是2.4与1

  • ajax图片上传,图片异步上传,更新实例

    最近在研究ajax图片上传,图片异步上传,更新,留作参考. 直接上源码吧: js源码: /// <reference path="jquery-1.8.3.js" /> /// <reference path="ajaxForm/jquery.form.js" /> /*! * jQuery upload * 用于上传单个文件,上传成功后,返回文件路径. * 本插件依赖jQuery,jquery.form 请在使用时引入依赖的文件 * * D

  • 轻松理解JavaScript之AJAX

    摘要 AJAX技术是网页构建的必备技能之一,本文希望能帮助大家轻松的学习这项技术 一.什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 二.如何使用ajax? 第一步:创建xmlhttprequest对象 创建xmlhttprequest对象,XMLHttpRequest对象用来和服务器交换数据. var xmlhttp =new XMLHttpRequest(); 第二步:注册回调函数 onreadystatechange函数,当服务

随机推荐