ajax技术

1.什么是ajax

ajax = 异步javascript+xml
ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量的数据交换，axjax可以使网页实现异步更新。通俗的说就是不用再刷新整张网页的情况下，对网页的某部分进行异步更新。
传统的网页如果需要更新内容，必须刷新整张网页。

2.ajax的工作原理

ajax的原理简单来说就是通过XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据。然后用javascript来操作DOM而更新页面。XMLHttpRequest是ajax的核心机制。它是在IE5中首先引入的。是一种支持异步请求的技术。

3.XMLHttpRequest包含的属性
open：规定请求类型，url以及是否异步处理请求
method：请求的类型：GET或POST
url：文件在服务器的位置
async：true(异步) false(同步)
send：将请求发送到服务器
string：仅用于POST请求，可以在这里传递参数
responseText：获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
onreadystatchange：存储函数（或函数名）每当 readyState 属性改变时，就会调用该函数
readyState：存储XMLHttpRequest的状态，从0到4发生变化：

• 0：请求初始化
• 1：服务器连接已建立
• 2：请求已接收
• 3：请求处理中
• 4：请求已完成，且相应已就绪

status:：状态 200成功 404未找到页面
setRequestHeader：向请求添加http头

• header：规定头的名称
• value：规定头的值

4.创建XMLHttpRequest

//获取XMLHttprequest实例对象
var http
if(window.XMLHttpRequest){
  http = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
}else{
    http = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
http.open('GET','/a.php',true);//建立请求信息 GET请求 异步发送
http.onreadystatchange(function(){
    if(http.readyState == 4 && http.status == 200){
      //请求成功接收数据
    console.log(http.responseText);
  }else{
      //请求未成功 进行错误处理
  }
})
http.send();//发送请求

//获取XMLHttprequest实例对象
var http
if(window.XMLHttpRequest){
  http = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
}else{
    http = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
http.open('POST','/a.php',true);//建立请求信息 POST请求 异步发送
http.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头信息
http.onreadystatchange(function(){
    if(http.readyState == 4 && http.status == 200){
      //请求成功接收数据
    console.log(http.responseText);
  }else{
      //请求未成功 进行错误处理
  }
})
http.send("id=123&name=zhang");//发送请求