Ajax入门

1、概述

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

解决的问题传统的开发模式中每次提交数据使用转发而不是重定向，原来的页面会保存到历史记录中，造成浏览器的负担ajax的局部网页刷新技术能解决这个问题

2、ajax在js中的使用
1》获取ajax对象

function getAjax() {                var ajax=null;                try{                    ajax=new ActiveXObject("microsoft.xmlhttp");                }catch(e){                    try{                        ajax=new XMLHttpRequest();                    }catch(e){                        alert("你的浏览器改换了不支持Ajax");                    }                }                return ajax;            }

2》ajax准备发送请求

var path="${pageContext.request.contextPath}/action名.action;ajax.open("POST",path);

3》开始发送请求

//设置请求头ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');var content="userName='root'&userPwd='root'";ajax.send(content);//content表示要带的参数

4》接收请求（响应请求）

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState的值表示的意义
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
state的值
200：服务器响应正常。
304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。
400：无法找到请求的资源。
401：访问资源的权限不够。
403：没有权限访问资源。
404：需要访问的资源不存在。
405：需要访问的资源被禁止。
407：访问的资源需要代理身份验证。
414：请求的URL太长。
500：服务器内部错误。
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

ajax.onreadystatechange=function(){                            if(ajax.readyState==4){                                if(ajax.status==200){                                      var time=ajax.responseText;                                     var spanTime=document.getElementById('spanTime');                                     spanTime.innerHTML=time;                                }                            }                        }

获取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;

POST请求与Get请求的区别：
Get请求的参数在URL上,如果是POST请求需要把数据放到send（data）的data里面
Get请求不需要设置请求头
POST请求头需要设置在open和send之间
3、ajax在jQuery中的使用

$(document).ready(function(){            $("#btnInput").click(function(){                $.ajax({                type:"post",                url:"",                success: function(data){                    $("#spanTime").html(data);                }                });            });        });....<span>当前时间:</span>        <span id="spanTime">14:45:23</span><br />        <input type="button" id="btnInput" value="获取时间" />

由于ajax带来的新的问题：

对搜索引擎不友好
　要实现ajax下的前后退功能成本较大
　可能造成请求数的增加
　跨域问题限制