ajax 普通文本 XML解析 json 解析

ajax
1、获取xmlHttpRequest，创建异步对象

    var xmlHttp= createXMLHttpRequest();
    function createXMLHttpRequest() {
        try {
            return new XMLHttpRequest();//主流浏览器
        } catch (e) {
            try {
                return new  ActiveXObject("MSXML2.XMLHTTP");//IE6.0
            } catch (e) {
                try {
                    alert(3);
                    return new ActiveXObject("Microsoft.XMLHTTP");//IE5.5
                } catch (e) {}
            }
        }
    }

2、调用open方法，打开与服务器的连接，open方法，有3个参数，一个是请求方式，一个是请求url，一个是是否是异步
为了防止缓存重复请求不执行，加了个随机数Math.random()
get请求

xmlHttp.open("GET", '<c:url value="/AServlet"><c:param name="a"></c:param></c:url>'+Math.random(), true);

post请求

xmlHttp.open("POST", '<c:url value="/AServlet"><c:param name="a"></c:param></c:url>'+Math.random(), true);

post请求必须设置请求头 application/x-www-form-urlencoded

    xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");

3、调用send方法

    xmlHttp.send(null);

post请求带参数xmlHttp.send("test=abc&dd=90");

4、状态检测获取数据

    xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var h2 = document.getElementById("h1");
                    h2.innerHTML = xmlHttp.responseText;
                }
            };

AJAX使用中可能遇到了浏览器使用了缓存而没有去请求服务器的问题
1、可以禁用缓存（我也没懂怎么搞）
2、可以在url后面添加一个随机数，使得每次请求都是不一样的URL就可以了
我使用了URL+Math.random()

解析xml数据
服务器端返回xml类型的数据
必须设置响应头ContentType:text/xml;charset=UTF-8

String xml="<students>"+
                "<student id='itcast_1001'>"+
                "<name>李四</name>"+
                "<age>23</age>"+
                "<sex>女</sex>"+
                "</student>"+
                "</students>";
        response.setContentType("text/xml;charset=utf-8");
        response.getWriter().append(xml);

web端处理响应
注意document的解析获取属性值getAttribute(“id”)
获取标签中的文本内容childNodes[0].nodeValue，这种方式兼容性比较好的
标签中的文本也属于节点的，命名为文本节点，使用nodeValue获取节点的值

var doc=xmlHttp.responseXML;//获取服务器响应的xml
var stu=doc.getElementsByTagName("student")[0];
var id=stu.getAttribute("id");//获取id属性值
var name=stu.getElementsByTagName("name")[0].childNodes[0].nodeValue;//获取name的值
var age=stu.getElementsByTagName("age")[0].text;//兼容差
var sex=stu.getElementsByTagName("sex")[0].innerHTML;//兼容差
var info=id+", "+name+", "+age+", "+sex;
var h2 = document.getElementById("h1");
h2.innerHTML=info;

也参考https://blog.csdn.net/u013719339/article/details/73181122

JSON解析
服务器端返回JSON串（使用了jackson框架）

Map map= new HashMap();
map.put("id", "id1001");
map.put("name", "zhangsan");
map.put("age",22);
map.put("sex", "女");
ObjectMapper mapper= new ObjectMapper();
String json=mapper.writeValueAsString(map);
response.getWriter().append(json);
//{"sex":"女","name":"zhangsan","id":"id1001","age":22}

web端解析

var text=xmlHttp.responseText;
var json=eval("("+text+")");//eval执行一下变成json对象
//或者使用var json=JSON.parse(text);但是低版本浏览器不支持必须引入json2.js文件来保持完美的兼容性
var str=json.id+", "+json.name+", "+json.age+", "+json.sex;
var h2 = document.getElementById("h1");
h2.innerHTML=str;
//怎么看都是JSON比较简单，非常推荐JSON作为数据交换