Ajax

 

一 概述

1.什么是Ajax？

Ajax是XMLHttpRequest对象与CSS、JavaScript、XML、DOM等多种技术的组合，能够在不刷新整个页面的情况下，更新页面的部分信息，从而提高响应速度。

二 XMLHttpRequest

1.XMLHttpRequest是Ajax技术的核心，是一个具有应用程序接口的JavaScript对象，绝大多数浏览器都支持该对象。

2.不同的浏览器、同一浏览器的不同版本创建XMLHttpRequest的方法不同，下面是一种兼容目前所有情况的创建方式：

var xmlHttp;
if(window.XMLHttpRequest)
     xmlHttp=new XMLHttpRequest();
else
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

三 Ajax应用的一般步骤

1.初始化请求：

xmlHttp.open(method,url,async)；

• method：请求方式，"GET""POST"。
• url：请求资源的路径。
• async：是否采用异步机制，默认为true。采用了异步机制浏览器在等待服务器响应的同时还可以做其他事情，不然浏览器会阻塞。

2.设定回调函数，即处理响应结果的函数：

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4&xmlHttp.status==200){
          xxxx=xmlHttp.responseText/responseXML;
     }
}

• readyState：响应进度码，用来表示响应的处理进度，4表示请求响应结束。
• status：响应结果码，表示响应的结构，200表示响应成功。
• respponseText/responseXML为响应内容。

3.发送请求：

xmlHttp.send(content);

用于指定发送的数据，如果没有数据，可以为null或者空。

采用POST请求时，数据只能通过send方法发送，设置如下：

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在open方法之后设定
xmlHttp.send("name01=value01&name02=value02");

四 JQuery提供的封装

JQuery简化了Ajax操作，常用的操作如下：

• ${selector}.load(url,[data],[callback])：将响应内容插入指定标签。
• $.get(url,[callback])：以get请求的方式执行Ajax。
• $.post(url,[data],[callback])：以post请求的方式执行Ajax。
• 数据格式：{name:"value"}，其中name是变量，不加双引号。

callback回调函数有三个参数，依次为data、statusText、xhr。

五 Ajax应用

Ajax主要应用于在表单数据提交前验证表单数据、级联操作等。