ajax教程(一)：ajax介绍与快速入门

一．Ajax介绍

静态：指在客户端浏览器解析并运行。如：Html,css,Javascript,Ajax

动态：是指由服务器端解析并运行。如：Asp，Jsp，Php

传统web应用程序工作流程图：

用户操作--->等待------->操作----->等待

Ajax工作原理图：

无刷新

二．什么是ajax

• Asynchronous ：异步
• Javascript 
• And 
• XML 

Ajax就是利用Javascript和xml技术实现与服务器交互并传送数据的一种技术

三．使用ajax

ajax对象:XMLHttpRequest

怎么在各种浏览器里得到这个XMLHttpRequest对象呢？？？？？

1. 不同浏览器创建xmlhttprequest对象的方式

IE：new ActiveXObject("Microsoft.XMLHTTP")

其它：new XMLHttpRequest();

在高版本IE浏览器中，目前也支持第二种方法

//在IE实例化ajax对象的方式
//var xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
//alert(xmlHttp);
//在其它浏览器里实例化ajax对象的方式，在高版本IE也兼容
//var xmlHttp=new XMLHttpRequest();
//alert(xmlHttp);

无论客户端使用哪种浏览器，都可以创建出相应的ajax对象？？？？？2. 问题：如何写程序可以兼容所有的浏览器？

function CreateXmlHttp(){
var str=window.navigator.userAgent;
if(str.indexOf('MSIE')<0)
return new XMLHttpRequest();
else
return new ActiveXObject('Microsoft.XMLHTTP');
}

ajax对象的常用方法： 四． ajax对象的相关属性和方法

• open(method,url)

初始化ajax对象的信息

Method：http请求类型（get、post）

url：要请求的页面地址

在调用open方法，没用对服务器发送请求，仅仅是表初始化ajax对象的信息

• setRequestHeader(header,value)

设置http请求头信息

• send(content)

发送请求 

Content：数据

只有调用send方法时，ajax对象才会真正向服务器页面发送请求

send(null);

Ajax对象的常用属性：

• onreadystatechange：当ajax对象的状态码发生改变时所触发的回调函数
• readyState ：ajax对象的状态码

0：表示对象已建立，但未初始化

1：表示对象已初始化，但未发送

2：已调用send方法进行请求

3：正在接收数据（接收到一部分）

4：接收完成

• status ：http响应状态码
• statusText ：http响应信息
• reponseText：服务器返回的数据（文本字符串）
• responseXML ：服务器返回的数据（xml格式的数据）

以上两个属性都表示服务器返回的数据，具体要使用哪个，要看服务器返回数据的类型

如：服务器返回的是xml格式的数据，我们就需要使用responseXML进行接收

如：服务器返回的就是普通的字符串，我们使用responseText进行接收

五．ajax快速入门

页面加载之后，会使用ajax对象异步向服务器发一个请求，由服务器返回一个‘hello,ajax’的字符串，再由客户端的alert弹出

六．利用ajax发送数据#p#php教程-ajax学习笔记#e#

刚才我们写的程序，没有给服务器传递任何值，只是由服务器返回固定的信息，现在我有这样的需求，我写上一个人名，将人名传给服务器，由服务器连接上hello,人名字符串，并返回，由ajax回调函数接收并弹出

function display(){
var username=document.getElementById('username').value;
var url='demo03.php?username='+username;
xmlHttp=CreateXmlHttp();
xmlHttp.open('get',url);
xmlHttp.Onreadystatechange=callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
} }

例题：利用ajax实现两个的加法以上这题我们发现请求不同的名字的时候，弹出的名字还是一样；原因可能是产生缓存，

function display(){
var first=document.getElementById('first').value;
var secOnd=document.getElementById('second').value;
var url='demo04.php?first='+first+'&secOnd='+second;
xmlHttp=CreateXmlHttp();
xmlHttp.open('get',url);
xmlHttp.Onreadystatechange=callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
document.getElementById('num').value=xmlHttp.responseText;
} } 

当我们的ajax对象采用get形式请求服务器页面时，IE浏览器会将这次的结果缓存到本地，下次如果还请求这个url，会直接调出这个缓存文件，解决办法：七．解决缓存问题

• 方法一：随机数http://localhst/index.php?id=10&m=随机数

• 方法二：时间http://localhost/index.php?id=10&t=时间戳 

• setRequestHeader("If-Modified-Since","0");

表示告诉服务器，我有一个相应的缓存文件，这个文件的最后修改时间为0，然后服务器拿到这个消息后会和服务器上的文件的最后修改时间进行比较，如果不同，则返回最新结果（200），如果相同

• header("Cache-Control: no-cache, must-revalidate");

以上四种方式前三种：其实并不是真正的禁用缓存，而是让每次都缓存一个文件，其中第三种方法，是表示每次都取得最新数据，它们其实都有缓存

第四种方法可以禁止缓存

八．使用post传输数据

http请求类型：get、post。

get和post有什么不同？

Get传参时会把数据附加url后面

Post传参时会把数据放到http请求空白行之后

Get一般用于传送普通文本数据

Post可以传递文本数据和文件

Get方式对参数大小有限制1024

Post可以理解为无限制

如何使用ajax的post请求某个服务器页面？？？

• xmlhttp.open("post",“action.php");
• xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
• xmlhttp.send(data);

Tip：post请求不缓存

function display(){
var first=document.getElementById('first').value;
var secOnd=document.getElementById('second').value;
var data='first='+first+'&secOnd='+second;
xmlHttp=CreateXmlHttp();
xmlHttp.open('post','demo08.php');
xmlHttp.setRequestHeader(
'Content-Type','application/x-www-form-urlencoded');
xmlHttp.Onreadystatechange=callback;
xmlHttp.send(data);
}
function callback(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
document.getElementById('num').value=xmlHttp.responseText;
} }

注意：Ajax程序的html文件，不要以右键--à浏览器形式来运行，这种方式表示运行的本地系统的普通文件，无法去请求http服务器页
面