AJAX用途

通过访问后台，更新页面的一小部分数据。

AJXA简介

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

AJAX原理

AJAX的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。

第一步，创建用于连接服务器的XHR对象

XMLHttpRequest 是 AJAX 的基础。

XmlHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。

创建XMLHTTP对象

var xmlhttp
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest()
} else {
  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
}

第二步，用XHR对象发送请求

向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法。

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

接口参数：

open(method,url,async)  
规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true（异步）或 false（同步）

send(string)    
将请求发送到服务器。

string：仅用于 POST 请求

get还是post

大部分情况下，GET更简单也更快
在以下情况中，请使用 POST 请求：
1. 无法使用缓存文件（更新服务器上的文件或数据库）
1. 向服务器发送大量数据（POST 没有数据量限制）
1. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

使用get方法发送信息

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true); 
xmlhttp.send();

url后面可以带需要传递的参数

get请求的特点

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
* GET 请求只应当用于取回数据*

post

用来上传数据

setRequestHeader() 来添加 HTTP 头

xmlhttp.open("POST","ajax_test.html",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader(header,value) ：
向请求添加 HTTP 头。

header: 规定头的名称

value: 规定头的值

POST请求的特点

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 请求不能被收藏为书签
POST 请求对数据长度没有要求

第三步 XHR确定事件完成

MLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。

onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

status 200: “OK”
404: 未找到页面

    xmlhttp.onreadystatechange=function() //用来判断的事件
  { 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) //请求已完成，响应已就绪
{ 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
} 
  }

onreadystatechange会改变5次，每当readyState属性改变时，便会调用该事件。

第四步 XHR响应

服务端用httop响应用户，此时我们会对服务器响应的状态进行监听。
为了获得响应，我们使用以下两个属性：

responseText 获得字符串形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 获得 XML 形式的响应数据,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;

实际使用

要结合后台代码

ajax简单总结