ajax第二天学习

post方式发送请求

　　要首先设置请求头（参数设置为ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"）

　　-->send中放入要发送的参数（key=value&key=value）-->发送数据（ajax.send（context））

当xml作为载体的时候servlet中声明发送的格式为xml

　　response.setContextType("text/xml;charset=utf-8");

　　

<script type="text/javascript">

//定位button按钮，同时添加单击事件

document.getElementsByTagName("input")[0].onclick = function(){

//NO1)创建AJAX异步对象（每个浏览器内置的，无需第三方jar包）

var ajax = createAJAX();//0

//NO2)AJAX异步对象准备发送请求

var url = "${pageContext.request.contextPath}/TimeServletAjax?id="+new Date().getTime();

var method = "GET";

ajax.open(method,url);//1

//NO3）AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示

var content = null;

ajax.send(content);//2

//----------------------------------------等待

//NO4）AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数

//0-1-2-3-4,这些是可以触发函数的

//4-4-4-4-4，这些是不可以触发函数的

//以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的

ajax.onreadystatechange = function(){

//如果AJAX状态码为4

if(ajax.readyState == 4){

//如果服务器响应码是200

if(ajax.status == 200){

//NO5）从AJAX异步对象中获取服务器响应的结果

var str = ajax.responseText;

//NO6）按照DOM规则，将结果动态添加到web页面指向的标签中

document.getElementsByTagName("span")[0].innerHTML = str;

}

}

}

}

</script>

public class TimeServletAjax extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

String str = sdf.format(new Date());

//注意：在Web2.0时代，即异步方式下，不能用转发或重定向

//因为：转发或重定向会引起浏览器全部刷新，而不是局部刷新

//所以得用以输出流的方式将服务器的结果输出到浏览器

response.setContentType("text/html;charset=UTF-8");

PrintWriter pw = response.getWriter();

pw.write(str);

pw.flush();

pw.close();

}

}

XMLHttpRequest(即：AJAX)对象常用事件，方法和属性

（1）事件：

ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应，

是由服务器程序触发，不是程序员触发

（2）属性：

ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法

ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法

ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端

ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。

ajax.readyState==【4】：表示AJAX异步对象已经完完全全接收到了服务器的响应信             息，但接收到的数据不一定都正确

上述5种状态不是所有浏览器都相同，但状态4每种浏览器都相同

ajax.status==200：表示AJAX异步对象接收到响应码，如果是200的话，表示一切正常

ajax.responseText：表示从AJAX异步对象中获取HTML载体中的数据

ajax.responseXML：表示从AJAX异步对象中获取XML载体中的数据