Ajax

Ajax：一种提升用户体验，使用异步操作使得无需重新加载整个网页的情况下，能够更新部分网页的技术。

使用案例

  function createXMLHttpRequest() {
	      try {
	          return new XMLHttpRequest();
	      } catch(e) {
	          try {
	          return new ActiveXObject("Msxml2.XMLHTTP");
	      } catch(e) {
	          try {
	              return new ActiveXObject("Microsoft.XMLHTTP");
	          } catch(e) {
	              alert("哥们儿，你用的是什么浏览器啊？");
	              throw e;
	          }
	      }
	      }
  }
window.onload=function(){	//从文档加载完执行函数
  	//获取XMLHttpRequest对象
  	var xmlHttp=createXMLHttpRequest();
  	xmlHttp.open("GET","<c:url value='/provinceServlet'/>",true);
  	xmlHttp.send(null);
  	xmlHttp.onreadystatechange=function(){
	    //标准请求：当readyState为4时表示服务器请求完成，status是状元码：如200、404、405
	    if(xmlHttp.readyState==4 && xmlHttp.status==200){
            // 获取服务器的响应内容
            var text = xmlHttp.responseText;
            alert(text);
            //获取XML格式的响应内容
            var xml=xmlHttp.responseXML;
        }
  	}
}

 

• 使用步骤：

 1、获取XMLHttpRequest对象，以下为在javascript中获取XMLHttpRequest对象方法

function createXMLHttpRequest() {
      try {
          return new XMLHttpRequest();
      } catch(e) {
          try {
          return new ActiveXObject("Msxml2.XMLHTTP");
      } catch(e) {
          try {
              return new ActiveXObject("Microsoft.XMLHTTP");
          } catch(e) {
              alert("哥们儿，你用的是什么浏览器啊？");
              throw e;
          }
      }
      }
  }
window.onload=function(){	//从文档加载完执行函数
  	//获取XMLHttpRequest对象
  	var xmlHttp=createXMLHttpRequest();
}

2、连接服务器并设置参数

    > 请求方式：GET或POST
    > 请求的URL：指定服务器端资源，例如；/day23_1/AServlet
    > 请求是否为异步：如果为true表示发送异步请求，否则同步请求！

        xmlHttp.open("GET", "<c:url value='/AServlet'/>", true)

3、发送请求给服务器，服务器返回网页的部分更新数据

        xmlHttp.send(null);//当为Get请求时将null改为请求的参数("username=xxx&password=123")

4、注册监听函数，当状态值改变时触发

  * xmlHttp对象一共有5个状态：
    > 0状态：刚创建，还没有调用open()方法; 
    > 1状态：请求开始：调用了open()方法，但还没有调用send()方法
    > 2状态：调用完了send()方法了；
    > 3状态：服务器已经开始响应，但不表示响应结束了！
    > 4状态：服务器响应结束！（通常我们只关心这个状态！！！）
  * 得到xmlHttp对象的状态：
    > var state = xmlHttp.readyState;//可能是0、1、2、3、4
  * 得到服务器响应的状态码
    > var status = xmlHttp.status;//例如为200、404、500
  * 得到服务器响应的内容
    > var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
    > var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容，它是Document对象了！

//给异步对象注册监听器，当状态值改变时触发
xmlHttp.onreadystatechange=function(){
	    //标准请求：当readyState为4时表示服务器请求完成，status是状元码：如200、404、405
	    if(xmlHttp.readyState==4 && xmlHttp.status==200){
  		  // 获取服务器的响应内容
	          var text = xmlHttp.responseText;
        }
}

• 当发送POST请求时：在ajax里一般Get请求不带参数（如果有参数，则直接放在url中发送），ajax一般

                                          设置Post请求带有参数。

添加一步：设置Content-Type请求头，必须放在open方法后面：
  > xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

改动以下俩处：

* open：xmlHttp.open("POST" ....);
* send：xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体（即请求参数）