Ajax技术原理与应用案例.pdfVIP

1.AJAX介绍

2.AJAX的操作

3.总结AJAX请求流程

Ajax是AsynchronousJavaScriptandXML的缩写，即“异步的JavaScript和XML

技术”。

AJAX是一种用于创建快速页的技术。

通过在与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这

意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传

统的网页（不使用AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用AJAX的应用程序案例：、地图、开心网等等。

XMLHttpRequest是AJAX的基础。

XMLHttpRequest对象

所有现代浏览器均支持XMLHttpRequest对象。

XMLHttpRequest用于在与服务器交换数据。这意味着可以在不重新加

载整个网页的情况下，对网页的某部分进行更新。

创建XMLHttpRequest对象

所有现代浏览器均内建XMLHttpequest对象。

创建XMLHttpRequest对象的语法：

variable=newXMLHttpRequest();

老版本的InternetExplorer（IE5和IE6）使用ActiveX对象：

variable=newActiveXObject(“.XMLHTTP”);

为了应对所有的现代浏览器，包括IE5和IE6，请检查浏览器是否支持

XMLHttpRequest对象。如果支持，则创建XMLHttpRequest对象。如果不支

持，则创建ActiveXObject：

varxmlhttp;

if(window.XMLHttpRequest){

xmlhttp=newXMLHttpRequest();//IE7+FirefoxChromeOperaSafari

}else{

xmlhttp=newActiveXObject(“.XMLHTTP”);//IE5,IE6

}

向服务器发送请求：

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

方法：

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

xmlhttp.send();

open方法：

open(method,url,async)

规定请求的类型、URL以及是否异步处理请求

method：请求的类型；GET或POST

url：文件在服务器上的位置async：true（异步）或false（同步）

send方法：

send(string)

将请求发送到服务器。

string：仅用于POST请求

GET请求：

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

xmlhttp.open(“GET”,”demo.php?name=lijieage=20”,true);

xmlhttp.send();

POST请求：

如果需要像HTML表单那样POST数据，请使用setRequestHeader()来添加

HTTP头。然后在send()方法中规定您希望发送的数据：

xmlhttp.open(“POST”,”demo.php”,true);

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

urlencoded”);//向请求添加HTTP头

xmlhttp.send(“name=lijieage=20”);

url-服务器上的文件

open()方法的url参数是服务器上文件的地址：

xmlhttp.open(“GET”,”demo.php”,true);

该文件可以是任何类型的文件，比如.txt和.xml，或者服务器文件，比

如.php

同步-True或False

AJAX指的是异步JavaScript和XML(AsynchronousJavaScriptandXML)

XMLHttpRequest对象如果要勇于AJAX的话，其open()方法的async参数必须

设置为true:

xmlhttp.open(“GET”,”demo.php”,true);

对于web开发人员来说，发送异步请求是一个巨大的进步。很多在服务器

执行