什么是服务器

网页浏览过程的分析

如何配置自己的服务器程序（AMP）

什么是Ajax

无刷新数据读取

异步，同步

Ajax基础(2)

使用Ajax

基础请求显示txt的文件

字符集编码

缓存，阻止缓存

动态数据，请求js或（json）文件

eval的使用

DOM创建元素

局部刷新，请求并显示部分网页文件

Ajax原理

http请求方法

function ajax(url, fnSucc, fnFaild)

{

    //1.创建Ajax对象

    var oAjax=null;

    if(window.XMLHttpRequest)

    {

        oAjax=new XMLHttpRequest();

    }

    else

    {

        oAjax=new ActiveXObject("Microsoft.XMLHTTP");

    }

    //2.连接服务器

    oAjax.open('GET', url, true);

    //3.发送请求

    oAjax.send();

    //4.接收服务器的返回

    oAjax.onreadystatechange=function ()

    {

        if(oAjax.readyState==4)    //完成

        {

            if(oAjax.status==200)    //成功

            {

                fnSucc(oAjax.responseText);

            }

            else

            {

                if(fnFaild)

                    fnFaild(oAjax.status);

            }

        }

    };

}

简单ajax

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="ajax.js"></script>

<script>

window.onload=function ()

{

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()

    {

        ajax('data.txt', function (str){

            //str->'[1,2,3,4]'

            //alert(str);

            var arr=eval(str);

            alert(arr[3]);

        });

    };

};

</script>

</head>

<body>

请求服务器上的文件，这个文件放了一个数组<br />

请求文件放置数组里面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="ajax.js"></script>

<script>

window.onload=function ()

{

    var oUl=document.getElementById('ul1');

    var aBtn=document.getElementsByTagName('a');

    var i=0;

    for(i=0;i<aBtn.length;i++)

    {

        aBtn[i].index=i;

        aBtn[i].onclick=function ()

        {

            ajax('page'+(this.index+1)+'.txt', function (str){

                var aData=eval(str);

                oUl.innerHTML='';

                for(i=0;i<aData.length;i++)

                {

                    var oLi=document.createElement('li');

                    oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';

                    oUl.appendChild(oLi);

                }

            });

        };

    }

};

</script>

</head>

<body>

<ul id="ul1">

</ul>

<a href="javascript:;">1</a>

<a href="javascript:;">2</a>

<a href="javascript:;">3</a>

</body>

</html>

ajax和json的使用

GET---用于获取数据（浏览帖子）；

POST--用于上传数据（如用户注册）

GET，POST的区别

get是在url的传数据，安全性，容量，

缓存

本节重点

什么是Ajax，同步和异步的区别

http请求方法中，get和post方式用什么区别

Ajax基础2的更多相关文章

  1. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  2. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  3. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  4. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  5. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

  6. jQuery基础---Ajax基础教程（二）

    jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中, ...

  7. jQuery基础---Ajax基础教程

    jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...

  8. Ajax基础知识（二）

    接上一篇  Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...

  9. 原生AJAX基础讲解及兼容处理

    原文:原生AJAX基础讲解及兼容处理 AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML). AJAX不是新技术 ,但却是热门的技术.它 ...

随机推荐

  1. java中的各个数据结构区别

    ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,都允许直接序号索引元素,但是插入数据要设计到数组元素移动等内存操作,所以索引数据快插入数据慢 ...

  2. DIOCP 运作核心探密

    来自网友天地弦的DIOCP早已经广为人知了,有很多的同学都用上了它,甚至各种变异.修改版本也出了不少.我最近也在学习DIOCP,打算将它用于自己的服务端,今天让我们来一起探密它(DIOCP)的运作核心 ...

  3. Python基础之【第三篇】

    dir(): 默认打印当前模块的所有属性,如果传一个对象参数则打印当前对象的变量名 vars() 默认打印当前模块的所有属性,如果传一个对象参数则打印当前对象的变量名和值 reload() 将以前导入 ...

  4. python内置函数每个执行一次

      open    #   with open('log','r') as f:    或者   r=open(filename,r+) with open ('1.txt','r',encoding ...

  5. mysql分表的3种方法(转)

    一,先说一下为什么要分表 当一张的数据达到几百万时,你查询一次所花的时间会变多,如果有联合查询的话,我想有可能会死在那儿了.分表的目的就在于此,减小数据库的负担,缩短查询时间. 根据个人经验,mysq ...

  6. 图书管理系统——APP平台开发

    http://www.w3school.com.cn/php/ 初步计划采用PHP 开发网站. 一定要独立建立一套图书管理系统, 尤其唯一性质的概念,整合,甚至中英文图书概念的而整合.一本书一个页. ...

  7. 解决子元素margin让父辈元素位置一起改变的问题

    1.在父元素内添加内容,并且要在子元素块前面添加,后面添加内容无效. 内容可以是文字.图片甚至是空格,源代码里直接按空格无效,可以用占位符  2.让子元素或父元素浮动float:left. 缺点:在元 ...

  8. java批量生成excel代码分享

    package com.test.util; /** * @author ocq * */ import java.io.FileOutputStream; import java.io.IOExce ...

  9. Java数据结构 遍历 排序 查找 算法实现

    请查看:http://blog.csdn.net/zhanghao_hulk/article/details/35372571#t13

  10. 关于php cgi的配置

    http://blog.csdn.net/xiaolei1982/article/details/7103850 1,查看php-cgi的进程数 netstat -anpo | grep " ...