ajax上

一、DOM练习： 1、左右选择搞定 2、省市二级联动 3、checkBox的全选、全不选二、JavaScript中的窗口操作三、基于JavaScript的客户端验证 ******四、AJAX原理 4.1概述 4.2编写步骤 1、测试与服务器的通信 a、创建XmlHttpRequest对象，固定写法： function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest(); }catch (e){ try{ //Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ try{ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){} } } return xmlHttp; } var xhr = createXmlHttpRequest(); b、注册状态变化的事件处理： xhr.onreadystatechange=function(){ if(xhr.readyState==4){ //真正的处理 if(xhr.status==200||xhr.status==304){ //服务器正确返回 var data = xhr.responseText;//服务器返回的数据 //把返回的数据写到div中 document.getElementById("d1").innerHTML=data; } } } c、初始化xhr对象 xhr.open("GET","/ajaxday02/servlet/ServletDemo1?time="+new Date().getTime()); d、向服务器发送数据 xhr.send(null); 4.3XmlHttpRequest详解（JavaScript对象）常用属性： readyState：代表着XmlHttpRequest对象的当前状态 0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法） 1 (初始化) 对象已建立，尚未调用send方法 2 (发送数据) send方法已调用，但是当前的状态及http头未知 3 (数据传送中) 已接收部分数据，因为响应及http头不全， 4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据只有为4，客户端操作相应的处理 ------------------------------------------------- status：代表服务器的HTTP相应码。200是成功。304服务器端内容没有改变。 ------------------------------------------------- responseText：服务器返回文本数据。 onreadystatechange：当XmlHttpRequest对象的readyState发生变化时，都会触发该事件。常用方法： open(method,url,isAsync):初始化XmlHttpRequest对象。 method：请求方式。一般使用get或者post url：请求的服务器地址。可以使用相对路径或者绝对路径。特别注意：如果该地址没有变化，浏览器一般不会再次发出请求的。解决办法，加上一个时间戳。 /ajaxday02/servlet/ServletDemo1?time="+new Date().getTime() isAsync：是否是异步请求。默认是true。 send(requestData):向服务器发送请求数据。没有传递null。数据时用在POST请求方式的。数据形式：username=admin&password=123 通过XmlHttpRequest向服务器发送POST请求： //设置请求消息头，告知服务器，发送的正文数据的类型。 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//固定写法 //发送数据 xhr.send("username=admin&password=123"); 4.4服务端返回的数据 HTML数据 responseText：他是XmlHttpRequest对象的一个属性。服务器返回的数据会封装到此属性中。 XML数据 responseXML:返回的是xml对象的DOM对象。 *****JSON数据

ajax上

猜你在找的Ajax相关文章