AJAX简单入门

来源：互联网发布：acg音乐知乎编辑：程序博客网时间：2024/05/21 07:22

这些天一直在看AJAX视频，看了视频之后，发现AJAX并不是那么简单，有些知识点理解起来有点困难，而且好多都是陌生的概念，因此想写篇博客来简单的了解一下，对AJAX有一个进一步的认识，然后再接着看视频，完成其中的例子就会好很多了。好了，废话不多说，看内容。

AJAX指“异步JavaScript及XML”（Asynchronous JavaScript And XML）。AJAX是一种在2005年由Google推广开来的编程模式，是一种创建交互式网页应用的网页开发技术。Web应用的交互如Flickr，Backpack和Google在这方面已经有质的飞跃。该术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得，并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。通过AJAX，你可以创建更好、更快以及更友好的Web应用程序。AJAX基于JavaScript和HTTP请求（HTTP requests）。

AJAX的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer5中首次引入，它是一种支持异步请求的技术。简言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。

XMLHttpRequest对象

XMLHttpRequest是AJAX的基础。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页。

创建XMLHttpRequest对象

语法：Variable = new XMLHttpRequest();

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

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

为了应对所有的现代浏览器，包括IE5和IE6，需要检查浏览器是否支持XMLHttpRequest对象，如果支持，则创建XMLHttpRequest对象，如果不支持，则创建ActiveXObject：

Var xmlhttp;// 判断浏览器是否支持XMLHttpRequest对象，并创建对象if (window.XMLHttpRequest){    // 支持IE7+，FireFox，Chorme，Opera，Safari等浏览器    xmlhttp = new XMLHttpRequest();}else{    // 支持IE5，IE6    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}

向服务器发送请求

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

xmlhttp.open("GET","test1.txt",true);xmlhttp.send();

方法描述open(method,url,async)

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

method：请求的类型：GET或POST
url：文件在服务器上的位置
async：true（异步）或false（同步）

send(string)

将请求发送到服务器

string：仅用于POST请求

GET还是POST？

与POST相比,GET更简单也更快,并且在大部分情况下都能用。然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据流限制）
发送包含未知字符的用户输入时，POST比GET更稳固也更可靠

服务器响应

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

属性描述responseText 获得字符串形式的响应数据。 responseXML获得XML形式的响应数据。

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要的属性：

属性描述onreadystatechange 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。 readyState存有XMLHttpRequest的状态，从0到4发生变化。

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

status 200：“OK”
404：未找到页面使用Callback函数

callback函数是一种以参数形式传递给另一个函数的函数.如果网站上存在多个AJAX任务,那么就应该为创建XMLHttpRequest对象编写一个标准的函数,并为每个AJAX任务调用该函数。该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）：

function myFunction(){     loadXMLDoc("ajax_info.txt",function()     {          if (xmlhttp.readyState == 4 && xmlhttp.status == 200)          {               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;           }      });}