AJAX的概括（异步传输）
AJAX的概括（异步传输）
一、AJAX的概括（异步传输）：
1、区别： 传统的javaweb程序只有在用户提交完表单时，服务器端才会验证，然后在跳转页面给出相应的结果。
而AJAX实现的是在页面不刷新的前提下实现客户端与服务器端的请求和响应。
2、使用AJAX技术必须学会使用XMLHttpRequest对象。
XMLHttpRequest对象：由JavaScript创建并使用，客户端可以只从服务器端获取需要的信息，通过与DOM和CSS的 结合， 可以实现局部刷新,同时还可以通过XMLHttpRequest对象异步提交信息，将输入的数据在后台提交到服务器 而无需刷新页面。
（1）、创建XMLHttpRequest对象：
//1.创建对象
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari等浏览器使用
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5等浏览器使用
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
（2）、使用open方法创建一个请求：
//发送请求
xmlhttp.open("method","url",asynchronous);
method:指定请求的类型,一般为get或post；
url:指定请求的地址，可以是绝对地址或相对地址，可以附带查询字符串；
asynchronous:可选参数，表示请求是同步还是异步，异步请求为true,同步请求为false,默认为true。
//设置请求头
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//确定发送请求
xmlhttp.send(body);
body:表示要向服务器发送的数据，格式为查询字符串的形式。
var body=“userName=tom&sex=male”;
注:body参数是必须的，如果不发送任何数据，用xmlhttp.send(null)
（3）、监听响应
xmlhttp.onreadystatechange=function () {-------------------------》返回结果集；
if (xmlhttp.readyState==4&&xmlhttp.status==200){ -----------------》判断是否请求成功
var ss=eval("("+xmlhttp.responseText+")");-------------------------》使用responseText获得返回的文本
var xian=" <tr><td>用户编号</td><td>用户名</td><td>用户密码</td></tr>";
for (var i=0;i<ss.length;i++){
xian+="<tr><td>"+ss[i].id+"</td><td>"+ss[i].name+"</td><td>"+ss[i].password+"</td></tr>";
}
document.getElementById("s").innerHTML=xian;
}
}
3、整体步骤：
1.创建一个XMLHttpRequest对象
2.为XMLHttpRequest对象指定一个函数，来处理XMLHttpRequest对象状态的改变。
方法是设置XMLHttpRequest对象的onreadystatechange属性。
3.建立一个连接。XMLHttpRequest对象的open()方法会和服务器端建立一个连接。
函数中有三个参数:第一个指定请求发送的方式，第二个指定发送的目标资源URL，第三个指示请求是异步还是同 步，默认为true异步。
4.向服务器发送请求。XMLHttpRequest对象的send()方法会把请求发送到指定的url
5. 服务器发送回xml或text类型的信息，在客户端对其进行解析
使用responseXML属性获取XML文档：
在使用responseText属性获取返回的纯文本时，服务器端无需特殊的操作。而使用responseXML属性，
服务器端返回的必须是一个XML格式的文档，要求返回的HTTP头的content-type设置为”text/XML”
responseXML可以直接将服务器返回的XML文档转换为对象，这个对象已经完成对XML的解析，可以使用 DOM模型规定的方法对其进行操作。
4、总结：
1)由触发事件(单击、失去焦点、鼠标事件、onload())去触发一个JavaScript函数
2)要获取数据(这些数据是要向后台发送的)
3)创建XMLHttpRequest对象req
4)req.open("get/post",url,true); //url->"a.jsp/b.php/c.asp/pre?username="+usernmae+"&password=123"+"&password2="+password;
4.1)中文处理,encodeURI(encodeURI(username))->URLDecoder.decode(username,"UTF-8");
4.2)IE提交相同内容时不再向服务器发送，可以通过加一个随机数Math.random();
5.1)根据传过来的数据进行判断，并将信息(纯文本)返回客户端
PrintWriter pw=response.getWriter();
pw.write(info);
response.getWriter().write(info);
5.2)如果服务器组装一个XML文件
response.setContentType("text/xml;charset=UTF-8");
info="<message><info>用户名不能为空</info></message>";
6.1)接收纯文本信息
req.onreadystatechange=callback;监控req对象中的readyState属性值的变化，当这个值变化时会触发callback函数
0这是readyState起始值，表示对象已经建立，但还没有初始化，这时还没有调用open方法。
1表示open方法已经调用，但没有调用send方法
2表示send方法已经调用
3表示请求已经发送成功，正在接收数据
4表示数据已经接收成功，此时相当于直接使用浏览器打开网页，状态栏显示完成
当readyState的值为4时可以开始进行处理了，如果传来的是纯文本用req.responseText接收
if(req.readyState==4){
alert(req.responseText);
}
6.2)接收xml信息
req.responseXML //该方法会自动将字符串<message><info>用户名不能为空</info></message>转成document对象
var node=xmlDoc.getElementsByTagName('info');
alert(node[0].nodeName);
alert(node[3].firstChild.nodeValue);
7)将接收到的信息放到合适的位置上。
geturl方式:
xmlHttp.open("get","read.jsp?faqId="+faqId+"&username=abc",true);
5、解析JSON数据：
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写同时也易于机器解析和生成。
一般使用eval函数解析JSON数据：
首先eval函数是为了将json格式的字符串转换为JS对象；
语法如下：
response.setContentType("text/html;charset=UTF-8");
ArrayList<Student> list=new ArrayList<>();
list.add(new Student(101,"123","123"));
list.add(new Student(101,"456","123"));
list.add(new Student(101,"789","123"));
list.add(new Student(101,"741","123"));
//把对象转化为JSON字符串
response.getWriter().write(JSON.toJSONString(list));
//将JSON字符串转化为js对象。
var myObject = eval('(' + myJSONString + ')');