ajax原理及常见应用

原理：

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

XMLHttpRequest是Ajax的基础，所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）；

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

1、为了应对所有现代浏览器，包括IE5、IE6，需要检查浏览器是否支持XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2、向服务器发送请求   （使用XMLHttpRequest对象的open()和send()方法）

eg.  GET

xmlhttp.open("GET",'test1.txt','true')

xmlhttp.send();

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

method：请求的类型（GET/POST）；

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

async：true（异步）/false（同步）

send（string）：将请求发送到服务器

string：仅用于POST请求

3、GET和POST区别

get和post都是向服务器发送的一种请求，只是发送机制不同。

(1)get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。

(2)可传递数据的大小不同。GET方式通过URL提交数据，则get可提交的数据量和url的长度有直接关系。实际上，url本身不存在参数上限的问题，http协议规范没有对url长度进行限制。这个限制是特定的浏览器及服务器对url的限制。IE对url长度的限制是2083字节（2k+35）。其他浏览器，理论上没有长度限制，其限制取决于操作系统的支持。需要明确的是：这是对整个url的长度的限制，而不仅仅是针对参数值数据长度

(3)get方式会带来安全问题。这是因为GET方式请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的历史记录中读取到这些数据（类似于账号密码之类的重要信息不要带在get里面）。在某种情况下，这种方式会带来严重的安全问题。而post方式相对就比较安全。

(4)get请求和post请求在服务端也是有区别的

在客户端使用get请求的时候，服务端使用Request.QueryString来获取参数，而客户端使用post请求的时候，服务端使用Request.From来获取参数。

HTTP标准包含这两种方法是为了达到不同的目的。post用于创建资源，资源的内容会被编入HTTP请示的内容中。

当请求无需进行其他操作的时候（eg.  项目中总是会用到查询，搜索）就可以使用GET方法；当请求需要有其他操作的时候，则用POST；

get和post方法的实际运用需要结合需求和安全性等问题进行选择

4、异步（true/false）

AJAX指的是异步javascript和XML。XMLHttpRequest对象如果要用于Ajax的话，其open(）方法的async参数必须设置为true；

5、服务器响应

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

（1）responseText

如果来自服务器的响应并非XML，则使用responseText属性

responseText属性返回字符串形式的响应，使用方法可以为：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

（2）responseXML属性

如果来自服务器的响应式XML。而且需要作为XML对象进行解析，使用responseXML属性

eg.  请求book.xml文件，并解析响应

xmlDoc = xmlhttp.responseXML;
txt = "";
x=xmlDoc.getElementsByTagName("ARTIST");
for(i=0;i<x.length;i++){
    txt = txt+x[i].childNodes[0].nodeValue+"<br/>"
}
document.getElementById("myDiv").innerHTML=txt;

 6、onreadystatechange事件

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

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

readyState属性存有XMLHttpRequest的状态信息

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState等于4且状态为200时，表示响应已就绪：

 

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

7、使用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;
    }
  });
}