ajax的使用及数据的获取

在写ajax之前，先复习一下form表单。首先form表单的主要功能是用来向服务端提交数据的，其属性有action，method，enctype,等。

1，action属性：是提交的路径（服务器的路径）uri.(url统一资源定位，uri项目内部的资源定位)；

2，method属性：其属性值主要有两个“post”和“get”，是form表单提交的传输方式。其中“post”和“get”的区别有如下四点：（1）,“post”提交时，地址栏不会显示提交上的数据信息及内容，而“get”提交时会在地址栏显示我们所提交数据的键值对。（2），“post”的提交量最大无上限，“get”的最大提交量3k.（3），在我们提交的数据中有中文时要用“post”提交，用“get”提交会产生乱码。（4），在文件上传时一定要用“post”。

3,enctype属性：multiport/form-data。此属性用于文件上传时，一般是在有需要文件上传的时候再回添加此属性。

另外，在进行表单验证时，一定用onsubmit。

4，AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

使用ajax四部曲：

第一步：XMLHttpRequest 对象用于和服务器交换数据。

var xhr=new XMLHttpRequest();//IE6及以下的版本需要做兼容

第二步：将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 方法。

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

open()方法有三个参数,method代表HTML的请求方式：GET和POS。第二个参数是要访问的URL。第三个参数表示是否异步，是布尔值true（异步)或 false（同步）。

第三步：http的请求监听状态，有5个状态。

<1>[0]请求初始化。<2>[1]请求已提交。<3>[2]请求已发送。<4>[3]请求处理中。<5>[4]请求已完成。

xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){

alert(reponseText);//表示接收的字符串类型

}

第四部：xhr.send();

ajax的数据获取：

通过字符串获取：

function getData(node){
var xhr=new XMLHttpRequest();
var did=node.value;
// xhr.open("GET","personJson.do?did="+did,true);//通过get提交
xhr.open("POST","personJson.do",true);//通过post提交，sent()传递地址
// xhr.open("POST","personJson.do?did="+did,true);//通过post提交也可用
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
var data=eval(xhr.responseText);//获取数据
var box=document.getElementById("box");
var str="";
for(var i=0;i<data.length;i++){
str+=data[i].id+"--->"+data[i].name+"--->"+data[i].age+"<br/>";
}
box.innerHTML=str;//eval把字符串转化为javascript脚本

}
}
// xhr.send();//open()写地址
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("did="+did);//post提交通过send传递地址的话需要在上面写xhr.setRequestHeader
}