开始研究Ajax. 第一天

海心歌

海心歌

2016-02-19 12:58

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享开始研究Ajax. 第一天的教程,热爱PS的朋友们快点看过来吧!
开始研究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
    titleHello.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;ichildren.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修饰。
展开更多 50%)
分享

猜你喜欢

开始研究Ajax. 第一天

Web开发
开始研究Ajax. 第一天

产后第一天运动

电脑网络
产后第一天运动

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

塑形 从产后第一天开始!

哺乳 妊娠纹 分娩方式 孕前
塑形 从产后第一天开始!

新妈妈的第一天

电脑网络
新妈妈的第一天

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Java Applet 入门 第一天

编程语言 网络编程
Java Applet 入门 第一天

产后第一天怎么调理

产妇
产后第一天怎么调理

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

微软实时通信API多客户端通信实战(2)

微软实时通信API多客户端通信实战(2)

ASP小偷程序如何利用XMLHTTP实现表单的提交

ASP小偷程序如何利用XMLHTTP实现表单的提交
下拉加载更多内容 ↓