ajax菜鸟教程html,菜鸟教程–AJAX[通俗易懂]

一.简介

1.AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

2.AJAX = 异步 JavaScript 和 XML。

3.通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二.原理：

1. 创建 XMLHttpRequest 对象

(1).XMLHttpRequest 对象：

所有现代浏览器均支持 XMLHttpRequest对象(IE5 和 IE6 使用ActiveXObject)

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

(2).variable=new XMLHttpRequest();

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

2.向服务器发送请求

(1).如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open(“GET”,”ajax_info.txt”,true);

xmlhttp.send();

说明：

open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true(异步)或 false(同步)

send(string)将请求发送到服务器。

string：仅用于 POST 请求

(2)get/post区别

更新服务器上的文件或数据库 使用post

向服务器发送大量数据(POST 没有数据量限制)

(3).get请求

一个简单的 GET 请求：

xmlhttp.open(“GET”,”/try/ajax/demo_get.php”,true);

xmlhttp.send();

————————————————

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open(“GET”,”/try/ajax/demo_get.php?t=” + Math.random(),true);

xmlhttp.send();

————————————————

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open(“GET”,”/try/ajax/demo_get2.php?fname=Henry&lname=Ford”,true);

xmlhttp.send();

(4).post请求

一个简单 POST 请求：

xmlhttp.open(“POST”,”/try/ajax/demo_post.php”,true);

xmlhttp.send();

—————————————————

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open(“POST”,”/try/ajax/demo_post2.php”,true);

xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

xmlhttp.send(“fname=Henry&lname=Ford”);

3.服务器 响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

说明：

responseText获得字符串形式的响应数据。

responseXML获得 XML 形式的响应数据。

例如：

(1).document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

————————————————————–

(2).xmlDoc=xmlhttp.responseXML;

txt=””;

x=xmlDoc.getElementsByTagName(“ARTIST”);

for (i=0;i

{

txt=txt + x[i].childNodes[0].nodeValue + “
“;

}

document.getElementById(“myDiv”).innerHTML=txt;

4.onreadystatechange 事件

1).当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

2).说明：

(1).onreadystatechange存储函数(或函数名)，每当 readyState 属性改变时，就会调用该函数。

(2)readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

(3)status

200: “OK”

404: 未找到页面

3).例如

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

}

}

注意： onreadystatechange 事件被触发 5 次(0 – 4)，对应着 readyState 的每个变化。

5.Ajax XML

获取我收藏的 CD

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open(“GET”, “cd_catalog.xml”, true);

xhttp.send();

}

function myFunction(xml) {

var i;

var xmlDoc = xml.responseXML;

var table=”

ArtistTitle”;

var x = xmlDoc.getElementsByTagName(“CD”);

for (i = 0; i

table += “

” +

x[i].getElementsByTagName(“ARTIST”)[0].childNodes[0].nodeValue +

“

” +

x[i].getElementsByTagName(“TITLE”)[0].childNodes[0].nodeValue +

“

“;

}

document.getElementById(“demo”).innerHTML = table;

}

W3Cschool菜鸟教程离线版下载链接

请在电脑上打开以下链接进行下载w3cschool 离线版(chm):http://pan.baidu.com/s/1bniwRCV(最新,2014年10月21日更新)w3cschool 离线版(htm …

菜鸟教程 Python100例 之实例29

学习编程的路,走得好艰辛… 为了巩固基础知识,把菜鸟教程网上的实例拿来练习.. 在做到实例29时,看了网站给出的代码,觉得可以加强一下功能,不由得动了一下脑筋,如下: 原文题目: 题目:给一个不多 …

【转载】jQuery Validate 菜鸟教程

文章1:http://www.runoob.com/jquery/jquery-plugin-validate.html          (jQuery Validate 菜鸟教程)

Http状态码大全(来自菜鸟教程)

HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于TCP/IP通信 …

菜鸟教程之学习Shell script笔记(下)

菜鸟教程Shell script学习笔记(下) 以下内容是学习菜鸟教程之shell教程,所整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-sh …

菜鸟教程之学习Shell script笔记(中)

菜鸟教程Shell script学习笔记(中) 以下内容是学习菜鸟教程之shell教程,所整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-sh …

菜鸟教程之学习Shell script笔记(上)

菜鸟教程之学习Shell script笔记 以下内容是,学习菜鸟shell教程整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-shell.ht …

C语言经典例题(菜鸟教程100例)

学习c语言基础,怎么能少了菜鸟教程上的100道例题呢,这里整理一下每道题的链接,希望大家能享受学习的乐趣 1,有1,2,3,4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 2,企业发放 …

学习笔记之HTML 教程 | 菜鸟教程

HTML 教程 | 菜鸟教程 http://www.runoob.com/html/html-tutorial.html 菜鸟教程在线编辑器 http://www.runoob.com/try/try …

随机推荐

Objective-C语法之KVO使用

本文转自:http://blog.csdn.net/yuquan0821/article/details/6646400/ 一,概述 KVO,即:Key-Value Observing,它提供一种机制 …

MyEclipse默认标签TODO,XXX,FIXME和自定义标签的使用

MyEclipse默认标签TODO,XXX,FIXME和自定义标签的使用 MyEclipse中的一些特殊的注释技术包括:1.    // TODO —— 表示尚未完成的待办事项.2.    // XX …

LR_问题_无法使用LR的Controller，提示缺少license

问题描述 无法使用LR的Controller,提示缺少license 问题解决 使用开始->所有程序->HP LoadRunner->loadrunner,在打开界面的左上角选择co …

[转]jquery中使用event.target的几点

转自: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html 1.this和event.target的区别: js中事件是会冒泡的,所 …

loadrunner入门篇-Vuser发生器

Vuser 发生器(Visual User Generator,VuGen),主要通过捕获客户端向服务器发送的HTTP请求,将这些请求录制成脚本,在回放时将捕获的HTTP请求再次发送,以达到模拟客户行 …

struts2之拦截器

1. 为什么需要拦截器 早期MVC框架将一些通用操作写死在核心控制器中,致使框架灵活性不足.可扩展性降低, Struts 2将核心功能放到多个拦截器中实现,拦截器可自由选择和组合,增强了灵活性,有利于 …

使用Hexo+Github一步步搭建属于自己的博客(基础)

前言:电脑系统为window 10专业版,64位 相关步骤: 1.安装Node.js和配置好Node.js环境,打开cmd命令行,成功界面如下 2.安装Git和配置好Git环境,安装成功的象征就是在电 …

OpenGL10-骨骼动画原理篇(1)

视频教程请关注 http://edu.csdn.net/lecturer/lecturer_detail?lecturer_id=440 本例程展示如何建立骨骼动画,有些人叫蒙皮动画 定义如下: 当前 …

Android开发之实现多次点击事件

在Android中给我们提供了单次点击事件.但并没有给我们提供双击,或者实现在一定时间内的多次事件.所以需要我们自己在单机监听上进行修改实现. 有如下两种实现方式: 1.定义一个存贮上一个第一次点击的 …