关于Ajax

什么是Ajax?

Asynchronous JavaScript + XML（异步JavaScript和XML）:由多种技术组成。使用Ajax技术不必刷新整个页面，只需对页面的局部进行更新，可以节省网络带宽，提高网页加载速度，从而缩短用户等待时间，改善用户体验。

Ajax简史：

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

Ajax工作原理：

多种技术的总和 = JavaScript + 异步数据获取技术XMLHttpReuqest + xml + DOM + XHTML和CSS

XMLHttpReuqest：JavaScript的API，支持浏览器发送GET或POST请求，通过向服务器发送HTTP请求，浏览器返回数据时使用JavaScript只修改页面中的一部分内容。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

优点：可以和XHTML无缝集成，无需插件
缺点：依赖JavaScript，影响浏览器默认行为

1、创建XMLHTTPRequest对象:

httpRequest  = new XMLHttpRequest()  
httpRequest  = new ActiveXObject('Msxml2.XML')    ----IE6及以上
httpRequest  = new ActiveXObject('Microsoft.XMLHTTP')

//兼容处理
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

2、属性：

onreadystatechange: 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

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

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

readyState：

创建－初始化请求－发送请求－接收数据－解析数据－完成

readyState 状态	状态说明
`(0)未初始化`	此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。
`(1)载入`	此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。
`(2)载入完成`	此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。
`(3)交互`	此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。
`(4)完成`	此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

responseText: 获取从服务器返回的数据，返回字符串形式的响应
responseXML:获取从服务器返回的数据，返回XML 对象
请求 books.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;

status: 200---->"OK" 404---->not found

3、方法：

1、httpRequest.open('GET', 'http://www.example.org/some.file', true);:

method：请求的类型；GET 或 POST
url：文件在服务器上的位置,文件可以是任何类型
async：true（异步）或 false（同步），使用ajax必须设置为异步

2、httpRequest.send();

string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

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

GET:

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST:

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

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

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header,value)向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

Callback函数：

callback 函数是一种以参数形式传递给另一个函数的函数，如果在一个网站存在多个 AJAX 任务，那么将创建 XMLHttpRequest 对象编写成一个的函数，并为每个 AJAX 在任务调用该函数。

var xmlhttp;
function loadXMLDoc(url,cfunc)  {
    if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  }
  else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=cfunc;
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}
function myFunction() {
  loadXMLDoc("/ajax/test1.txt",function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

常用案例：

1、showHint()---------AJAX服务器页面-ASP和PHP

function showHint(str) {
  var xmlhttp;
  if (str.length==0) {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  }
  else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","gethint.asp?q="+str,true);
  xmlhttp.send();
}

源代码解释：

如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。

如果输入框不为空，showHint() 函数执行以下任务：

创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

2、showCustomer()-----------数据库

function showCustomer(str) {
  var xmlhttp;
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  }
  else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getcustomer.asp?q="+str,true);
  xmlhttp.send();
}

showCustomer() 函数执行以下任务：

检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入域中的内容）

关于Ajax

什么是Ajax?

Ajax简史：

Ajax工作原理：

常用案例：

推荐阅读更多精彩内容