Ajax

Ajax(Asynchronous javascript and xml)
异步的js和xml
ajax使用js异步访问访问服务器，服务器响应数据给客户端text、xml、json
优点：增强用户体验，因服务器只用响应部分内容减轻了服务器压力

Ajax发送异步请求
1、得到XMLHttpRequest对象
2、打开与服务器连接xmlHttp.open()
3、发送请求xmlHttp.send(请求方式,URL,true(异步请求)/..)
4、读取服务器响应
xmlHttp对象的5个状态
0：刚创建
1：请求开始
2：请求已发送
3：服务器开始响应
4：服务器响应结束
得到XMLHttp对象状态
var state = xmlHttp.reaydyState;
得到服务器响应的状态码
var status = xmlHttp.status;
得到服务器的相应内容
var content = xmlHttp.responseText;//得到服务器响应的文本格式内容
var content = xmlHttp.responseXML;//得到服务器响应的xml内容（Document对象）
！XMLHttpRequest（异步请求对象）在不同浏览器中创佳语法不同

<script type="text/javascript">function createXMLHttpRequest() {try {return new XMLHttpRequest();//大多数浏览器} catch (e) {try {return ActvieXObject("Msxml2.XMLHTTP");//IE6.0} catch (e) {try {return ActvieXObject("Microsoft.XMLHTTP");//IE5及更早版本} catch (e) {throw e;}}}}</script>

！发送post请求
open()打开与服务器连接后，设置请求头
    xmlHttp.setRequestHead("Content-Type","application/x-www-form-urlencoded");
！

-----------------------------------------------------------------------------------------------------------------

发送GET请求

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("UTF-8");response.getWriter().print("This is AJAX.");}

window.onload = function(){    var btn =document.getElementById("btn");    btn.onclick = function(){        //注册监听        //1.得到XMLHttpRequest异步请求对象        var xmlHttpRequest = createXMLHttpRequest();        //2.打开与服务器的连接        xmlHttpRequest.open("GET","<c:url value='/Aservlet'/>",true);        //3.发送请求        xmlHttpRequest.send(null);//GET请求没有请求体，但是必须给null        //4.给异步请求对象的onreadystatechange事件注册监听器        xmlHttpRequest.onreadystatechange = function(){            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){                var text = xmlHttpRequest.responseText;//获取响应内容                //将相应内容添加到h1                var h1 = document.getElementById("h1");                h1.innerHTML=text;            }        };    };};

发送POST请求

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("UTF-8");String username=request.getParameter("username");response.getWriter().print(username+"This is AJAX.");}

window.onload = function(){var btn =document.getElementById("btn");btn.onclick = function(){//注册监听//1.得到XMLHttpRequest异步请求对象var xmlHttpRequest = createXMLHttpRequest();//2.打开与服务器的连接xmlHttpRequest.open("POST","<c:url value='/Aservlet'/>",true);xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//3.发送请求xmlHttpRequest.send("username=Hello!");//GET请求没有请求体，但是必须给null//4.给异步请求对象的onreadystatechange事件注册监听器xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){var text = xmlHttpRequest.responseText;//获取响应内容//将相应内容添加到h1var h1 = document.getElementById("h1");h1.innerHTML=text;}};};};

响应内容为XML

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String xml = "<students>" +"<student number='ITCAST_1001'>" +"<name>zhangSan</name>" +"<age>18</age>" + "<sex>male</sex>" +"</student>" +"</students>";response.setContentType("text/xml;charset=utf-8");response.getWriter().print(xml);}

window.onload = function(){var btn =document.getElementById("btn");btn.onclick = function(){//注册监听//1.得到XMLHttpRequest异步请求对象var xmlHttpRequest = createXMLHttpRequest();//2.打开与服务器的连接xmlHttpRequest.open("GET","<c:url value='/BServlet'/>",true);//3.发送请求xmlHttpRequest.send(null);//GET请求没有请求体，但是必须给null//4.给异步请求对象的onreadystatechange事件注册监听器xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status ==200){var doc = xmlHttpRequest.responseXML;//获取响应内容// 处理浏览器的差异if(window.addEventListener) {number = ele.getElementsByTagName("number")[0].textContent;//其他浏览器} else {number = ele.getElementsByTagName("number")[0].text;//IE支持}if(window.addEventListener) {name = ele.getElementsByTagName("name")[0].textContent;//其他浏览器} else {name = ele.getElementsByTagName("name")[0].text;//IE支持}if(window.addEventListener) {age = ele.getElementsByTagName("age")[0].textContent;//其他浏览器} else {age = ele.getElementsByTagName("age")[0].text;//IE支持}if(window.addEventListener) {sex = ele.getElementsByTagName("sex")[0].textContent;//其他浏览器} else {sex = ele.getElementsByTagName("sex")[0].text;//IE支持}var text = number + ", " + name + ", " + age + ", " + sex;//将相应内容添加到h1var h1 = document.getElementById("h1");h1.innerHTML=text;}};};};