什么是服务器

网页浏览过程的分析

如何配置自己的服务器程序（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. setTimeout不断重复执行

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. setTimeout(code,millisec) code  必需.要调用的函数后要执行的 JavaScript 代码串. ...

  2. Visual Studio无法查找或打开 PDB 文件解决办法

    Visual Studio无法查找或打开 PDB 文件解决办法 用VS调试程序时,有时会在VS底部的“输出”框中提示“无法查找或打开 PDB 文件”.这该怎么解决呢? 下面,我们以VS2013为例,来 ...

  3. wordpress数据库表说明

    wp系统所用的表不多,那么每张表具体都存些什么?今天给大家介绍一下,希望对你有帮助. wp_commentmeta: 用于保存评论的元信息,在将评论放入回收站等操作时会将数据放入此表,Akismet等 ...

  4. Django笔记-数据库操作（多对多关系）

    1.项目结构 2.关键代码: data6.settings.py INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', ' ...

  5. border opacity

    div { border: 1px solid rgb(127, 0, 0); border: 1px solid rgba(255, 0, 0, .5); -webkit-background-cl ...

  6. Flex调用java webservice

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  7. idea中的svn配置

    idea的使用之svn篇--有图超详细 http://ylq365.iteye.com/blog/1955291

  8. Struts2 自定义拦截器

    自定义拦截器(权限管理),包含了对ajax和表单请求的拦截 package com.interceptor; import java.io.IOException; import java.io.Pr ...

  9. Coding上传项目步骤

    step1:在coding上面创建一个项目mybokestep2:在git 命令台中进入项目的根目录下面,使用git init创建.git文件夹和.gitigonre文件,帮组本地与远程的链接step ...

  10. 如何在editplus中配置ctags?

    首先要说明的是, 在editPlus中的ctags功能确实是没有 vs vim等中的好用. 最主要的原因 是它不能直接在文件中 跳转. 而是要通过一个另外的框来实现, 这就大大的降低了跳转的速度和使用 ...