学习Ajax技术总结
主要知识点：
一.AJAX简介
二.AJAX工作原理
三.XMLHttpRequest对象
一.
1.什么是ajax？
Ajax(Asynchronous JavaScript and XML,异步的JavaScript和XML)，思维方式是“老技术，新思想”，产生的主要目的是用于页面的局部刷新。
理解"老技术,新思想":Ajax是一系列技术的集合，例如在实现与服务器的异步通信时，需要用到XML、javascript、XMLHttpRequest等、使用这几种技术可以实现与服务器的异步通信。
理解异步：向服务器发送了请求代码接着往下走，不必等待服务器返回结果后代码再向下运行。从之前的代码开发中可以发现，每当用户向服务器端发送请求时，哪怕需要的只是更新一点点的局部的内容服务器端都会将一个整体的页面进行刷新，并重新生成代码，这样程序的性能肯定会降低的。而如果采用Ajax局部刷新技术，整体页面就不会随着用户的每次请求而整体变化，只会在局部的位置上有所改变，这样的实现方式减小了用户与服务器交互的信息量，会使程序的性能更高。
Ajax的优势：
（1）改善表单验证方式，不需要打开新的页面，也不再需要将整个页面的数据进行提交。
（2）不需要刷新页面就可以改变页面的内容，减少用户等待时间。
（3）异步与服务器进行交互，在交互过程中用户无需等待，仍可以继续操作。
2. web的发展史：
web应用程序发展至今大体经历了三个阶段，第一个阶段使用的是简单的静态页面，第二个阶段使用的是asp、asp.net、php和jsp等动态脚本语言，第三个阶段是web2.0，而ajax就是web2.0中的核心技术。
二.Ajax应用的五个步骤
1.建立XMLHttpRequest对象
2.设置回调函数
3.使用open方法与服务器连接
4.向服务器端发送数据
5.在回调函数针对不同的相应状态进行处理。
XMLHttpRequest对象是ajax的核心技术之一，这个对象可以用javascript来创建，在不同的浏览器中有不同的创建方法，但是创建成功以后，其使用方法是相同的。
Ajax的实现：
1.建立XMLHttpRequest对象：
1、创建XMLHttpReques对象
function createXMLHttpRequest() {
// 这是最复杂的一步 需要针对IE和其他浏览器建立这个对象写不同的代码
if(window.XMLHttpRequest)
{
//针对FireFox Opera IE7 IE8
xmlHttp = new XMLHttpRequest();
//针对某些特定版本的mozilla的bug修正
if(xmlHttp.overrideMimeType)
{
xmlHttp.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject)
{
//针对IE6及之前的版本
//两个可以用于创建XMLHttpRequest对象的控件名,保存在一个js数组中,排在前面的较新
var activeXName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeXName.length;i++)
{
try
{
//取出一个控件名进行创建，如果创建成功就终止创建
//如果创建失败，回抛异常，可以继续循环，继续尝试创建
xmlHttp = new ActiveXObject(activeXName[i]);
break;
}catch(e) {}
}
}
}
2.发送客户端请求
XMLHttpRequest常用方法：
open(String method,String url,Boolean asynch)其中method可以是get或post，url是指所要访问的服务器资源的位置，aysnch是指异步访问服务器还是同步，默认是异步。send(content)可以向服务器发送请求，此方法中的参数会作为请求中的内容发送到服务器。
XMLHttpRequest常用属性：
readState属性描述了请求的状态，可以取下面的5个值：0（未初始化）、1（正在加载）、2（已加载）、3（交换中）、和4（已完成）。
onreadyStatechange属性，每个状态的改变都会调用这个事件处理器、使用这个属性可以监听状态的变化、并提供对应得处理方法。
status属性描述了服务器的状态码，可以是200、404等。
responseText是服务器以文本字符串返回的响应。
responseXML是服务器以XML格式返回的响应。
function sendRequest(url) {
createXMLHttpRequest();
MLHttpReq.open("GET", url, true);
//指定响应函数
XMLHttpReq.onreadystatechange = handleResponse;
// 发送请求
XMLHttpReq.send(null);
}
3.处理响应结果
function handleResponse() {
// 判断对象状态
if (XMLHttpReq.readyState == 4) {
// 信息已经成功返回，开始处理信息
if (XMLHttpReq.status == 200) {
var out = "";
//返回的数据包含三种格式
//1.文本类型（简单的类型）2.XML文档类型（内容较大）3.json（流行）
var domXML = XMLHttpReq.responseXML;
var response= domXML.getElementsByTagName("response")[0].firstChild.nodeValue;
document.getElementById("hello").innerHTML = response;
}
}
}
4、服务器返回XML应做如下设置
//设置返回的文本内容格式
response.setContentType("text/xml;charset=utf-8");
//设置页面是否缓存
response.setHeader("Cache-Control", "no-cache");
三、AJAX的应用
1、检测用户名是否存在
2、检测用户名和密码是否正确
需要注意的内容：
1、不同浏览器下XMLHttpRequest对象的创建方式
2、设置回调函数不要加括号
3、open方法三个参数含义，还需要注意get方式和post方式服务器端地址的不同写法
4、GET方式和POST方式send的参数的不同之处，以及POST方式下send之前需要设置请求头信息的工作
5、如何判断正确的响应数据已经返回，此外还需要注意如何获取响应数据内容。
6、页面缓存问题
用Ajax实现省，市，区三级级联的代码：
/**
* 用Ajax实现三级级联的代码
*/
var xmlHttp;//aja核心对象名称
/**
* 创建XMLHttpRequest对象
*/
function createXMLHttpRequest(){
//判断当前使用的浏览器类型
if(window.XMLHttpRequest){
/*根据浏览器的类型创建合适的XMLHttpRequest对象，
如果为普通的火狐内核浏览器，则直接使用new XMLHttpRequest()来创建
* 如果为IE内核的浏览器，则通过new ActiveXObject()
*/
xmlHttp = new XMLHttpRequest();//针对FireFox Opera IE7 IE8
//针对某些特定版本的mozilla的bug的修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml")
}
}else if(window.ActiveXObject){
//针对IE6之前的版本
//两个用于创建XMLHttpRequest对象的控件名，保存在一个数组中，排在前面的较新
var activeXName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i < activeXName.length;i++){
try{
//取出一个控件名进行创建，如果创建成功就终止创建
//如果创建失败，回抛异常，可以继续循环，继续创建
xmlHttp = new ActiveXObject(activeXName[i]);
break;
}catch(e){
}
}
}
/**
*
* @param {Object} proCode
*/
function changeCities(proCode){
createXMLHttpRequest();//创建XMLHttpRequest对象
//打开请求
//open(method,url,async)
//创建一个HTTP 请求，并指定请求模式get，通过地址重写的方式将userName和pwd传递到jsp中
xmlHttp.open("get","getCitiesByProServlet?province="+proCode,true);
//发送内容，如果是以Get方式请求URL，则发送null
//如果以post方式请求，则需要发送内容
//需要设置请求头信息
//xmlHttp.setRequestHeader("Content","application/x-www-form-urencoded");
//监听各个时候的状态
xmlHttp.onreadystatechange = callback;//回调函数
xmlHttp.send("null");//发送请求，不传递任何参数
}
/**
* 处理响应结果
*/
function callback(){
//判断交互是否完成
if(xmlHttp.readyState == 4){
//判断服务器状态码是否返回成功，200的HTTP状态码表示操作正确
if(xmlHttp.status == 200){
//返回的数据包含三种格式
//1.文本类型（简单的类型）2.XML文档类型（内容较大）3.json（流行）
//如果是文本类型 var text = xmlHttp.responseText;
var domXml = xmlHttp.responseXML;//接收返回的内容
clearSelect("city");
//得到city返回的数组
var cityNodes = domXml.getElementsByTagName("city");
for(var i = 0;i<cityNodes.length;i++){
//分别得到city下面子元素的内容
var code = cityNodes[i].getElementsByTagName("code")[0].firstChild.nodeValue;
var name = cityNodes[i].getElementsByTagName("name")[0].firstChild.nodeValue;
//alert("code="+code+",name="+name);
addOption(code,name);
}
}
}
}
//添加选项
function addOption(code,name){
var cityDom = document.getElementById("city");
//创建元素
var city = document.createElement("option");
//设置其value
city.setIdAttribute("value",code);
//添加显示的文本值
city.appendChild(document.createTextNode(name));
//添加到DOM中
cityDom.appendChild(city);
}
function clearSelect(selectId){
var selectDom = document.getElementById(selectId);
//如果其子元素长度大于0，就移除该子元素
while(selectDom.childNodes.length > 0){
selectDom.removeChild(selectDom.childNodes[0])
}
}
}
