AJAX入门知识（1）

认识AJAX

1、AJAX指异步JavaScript及XML

2、AJAX不是一个新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它可使因特网应用程序更小、更快，更友好。

3、AJAX使用Http请求，由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。通过利用 AJAX，您的 JavaScript 会通过 JavaScript 的XMLHttpRequest 对象，直接与服务器来通信。通过使用 XMLHttpRequest 对象，web 开发者可以做到在页面已加载后从服务器更新页面！

4、游览器对AJAX的支持，由于AJAX的要点是XMLHttpRequest 对象，针对不同的游览器，创建 XMLHttpRequest 对象的方法是有差异的，我们可以是用一下代码来根据不同的游览器来实现创建 XMLHttpRequest 对象：

function ajaxFunction(){var xmlHttp;try{//Firefox,Opera8.0+,SafarixmlHttp = new XMLHttpRequest();alert("success!");}catch(e){//IE 6.0+try{xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");alert("success!");}catch(e){try{//IE5.0+xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");alert("success!");}catch(e){alert("您的游览器不支持AJAX");return false;}}}}

当然我们也可以这样判断一个游览器是否支持XMLHttpRequest 对象，并且创建相应的对象实例

function funXHR(){var xmlHttp;if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, SafarixmlHttp = new XMLHttpRequest();}else{// code for IE6, IE5xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}

AJAX基础知识

1、关于XMLHttpRequest对象

a)onreadystatechange属性，onreadystatechange属性存有处理服务器相应的函数，

xmlHttp.onreadystatechange=function(){ //代码段  定义一个空函数，可同时对 onreadystatechange 属性进行设置}

b)readyState属性，readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState可能值：0（请求未初始化在调用 open() 之前）、1（请求已提出，调用 send() 之前）、2（请求已发送，这里通常可以从响应得到内容头部）3、（请求处理中，响应中通常有部分数据可用，但是服务器还没有完成响应）4,、（请求已完成，可以访问服务器响应并使用它）

xmlHttp.onreadystatechange=function(){ //请求已经完成if(xmlHttp.readyState == 4){//从服务器的response获得数据}}

c)responseText属性，可以通过该属性取回由服务器返回的数据

xmlHttp.onreadystatechange=function(){ //请求已经完成if(xmlHttp.readyState == 4){//从服务器的response获得数据document.getElementById("time").value = xmlHttp.responseText;//将一个ID为time的HTML元素的值设置为responseText}}

2、向服务器发送请求

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

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

open（method,url,async）参数：method表示请求类型，有GET或POST（推荐使用POST）；url表示请求的文件在服务器上的位置，async表示异步（true）或同步（false）

send（）方法表示将请求发送到服务器。

3、服务器的响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText(字符串方式的响应) 或 responseXML 属性（XML 形式的响应）。

对于responseText方式可以直接使用其值

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//设置一个ID为myDiv的HTML元素的值为responseText；

对于responseXML，其响应内容为responseXML对象，需要对其内容进行提取后使用。