Javascript Ajax技术运用

AJAX:异步Javascript和XML(Asynchronous JavaScript And XML
）
作用：1.更新内容时无需刷新整个网页，只需更新部分
2.异步：无需等待环节（客户端发送请求后可以继续做其他事情，无需等待服务器返回数据后才做其他事 ）
AJAX的运用（主要依赖与XMLHttpRequest对象）：
工作过程：1.创建XMLHttpRequest
2.设置请求方式
3.定义回调函数
4.发送请求
（使用过程中一般会有3个页面：HTML页面，JS页面，服务器端处理页面（可能还连接数据库））
接下来主要讲下在前端所需要做的事，不考虑数据传送到了服务端页面对数据处理，然后返回）
1.创建XMLHttpRequest对象（考虑浏览器兼容）
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}
2.设置请求方式：
请求方式有两种GET和POST
对比：get传送的数据量较小，不能大于2KB。post传送的数据量较大
get安全性非常低，post安全性较高
xmlHttp.open(“GET”/”POST”,url,true/false) ,
url:服务端链接
true/false: true至异步，false指同步。
重要点：数据以什么格式传送到服务器端
a.若以GET方式传送，则数据附加在url后面，（即将数据作为Http的头部发送到服务器）以键值对的形式如url: test.php?name=”姓名”&password=”密码”。（在百度搜索框中输入的数据就以这种方式）
b.若以POST方式，则数据可以有多种形式传送（1.附加在URL上；2.以键值对；3.以文本，XML、JSON等数据格式；2和3将数据参数放于xmlHttp.send（）中发送）
3.定义回调函数：statsChanged()
xmlHttp.onreadystatechange=stateChanged ;
xmlHttp.onreadystatechange是一个readystate值变化时就会触发的一个事件：readystate的取值有：
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，服务器已经接收到全部内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
因此会执行4次函数调用，只有readystate为4时数据才返回完成了.
status有很多取值代表不同的意思（典型有）:
200 - 交易成功
404-服务器端没有查找到资源（资源不存在，在浏览网页时经常会 遇到404错误）….
回调函数执行数据返回后应该做的操作
服务器端返回的数据在xmlHttp.responseText中。
function stateChanged()
{

if (xmlHttp.readyState==4|| xmlHttp.readyState==”complete”)
{
if(xmlHttp.status==200){
//需要执行的操作
}
}
}
4.发送请求
xmlHttp.send();