一.ajax 学习
问题：目前来，所有的请求的发送都是通过浏览器自己直接进行发送，响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保留原有页面内容的情况下显示新的响应内容。
解决:使用ajax技术
ajax原理:请求由ajax引擎对象发送，响应数据，浏览器不会直接进行处理，而是流转给发请求的ajax引擎对象。这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新的响应资源。
本质：js的DOM操作中的数据由程序员自己写死声明，变成从服务器动态的获取。
使用：
1 创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){ ajax=new XMLHttpRequest//火狐 谷歌 }else if(window.ActiveXObject){ ajax=new ActiveXObject("Msxml2.XMLHTTP");//ie } 2 声明ajax监听函数 ajax.onreadystatechange=function(){ //判断数据状态码 if(ajax.readyState==4){//4 表示响应数据成功接收 //判断响应状态码 if(ajax.status==200){ //获取响应数据 //普通文本 //json格式数据 var data=ajax.responseText; //xml数据 //var doc=ajax.responseXML; var data=ajax.responseText; //处理响应数据(js的DOM操作) var showdiv=document.getElementById("showdiv"); showdiv.innerHTML=data; }else if(ajax.status==404){ var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="请求资源未找到"; }else if(ajax.status==500){ var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="服务器繁忙"; } } } 3 创建并发送请求 ajax.open(method,url,async) ajax.send("请求数据") 解释: method：表示请求的方式，值为get/post url:表示请求地址，一般为要请求的servlet的别名。 async:表示异步还是同步请求，true表示异步，false表示同步，默认为异步。 注意： 如果请求方式是get方式，则请求数据需要拼接在url的后面，以？隔开，键值对。并且send中要写null 如果是post请求方式，则在send方法中书写请求数据即可。并且要声明数据的提交格式为键值对。 示例： //使用get方式 ajax.open("get","user?uname="+uname,true); ajax.send(null); //post方式 ajax.open("post","user", true); //设置请求数据的格式 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("un="+uname); 4 ajax的响应数据格式 普通文本： 后台在接收到ajax请求后，处理后直接响应普通字符串给ajax josn数据： 后台在接收到ajax请求后，处理后响应json格式的字符串给 ajax： ajax处理代码中使用eval()方法将json数据转换为js对的对象，将对象中的数据通过js的dom操作显示到页面中。 注意： json格式： var 对象名={ 键名:值, 键名:值, ........ } xml数据： 后台在接收到ajax请求后，处理后响应xml格式的字符串给ajax。 前台使用ajax.responseXML进行数据接收，返回的是xml文档对象(document)。 使用document对象将xml中取出并显示到页面中即可 注意：后台的响应数据格式必须设置成xml格式 resp.setContentType("text/xml;charset=utf-8"); 注意： ajax是前端的技术，由浏览器进行解析执行。 使用流程（原生）： 1创建ajax引擎对象 2覆写onreadystatechange函数 判断数据状态码 判断响应状态码 获取响应数据处理响应信息 3创建并发送请求 封装：相同的保留，不同的传参。最终封装成一个js文件。 jquery中的ajax： 使用方式： 1 $.get(url,data,fn) 2 $.post(url,data,fn) 3 $.ajax({ type:"get", url:"data", success:function(data){ alert(data); } }) 注意： $.get和$.post方式中的data为json格式的请求数据 以上三种方式，请求成功后的回调函数中的形参表示响应的数据。 <!-- ajax的使用 ajax的基本流程 //创建ajax引擎对象 //复写onreadystatement函数 //判断ajax状态码 //判断响应状态码 //获取响应内容(响应内容的格式) //普通字符串：responseText //json(重点)：responseText 其实就是讲述数据按照json的格式拼接好的字符串，方便使用eval方法 将接受的字符串数据直接转换为js的对象 json格式： var 对象名={ 属性名:属性值, 属性名:属性值, …… } //XML数据：responseXML.返回document对象 通过document对象将数据从xml中获取出来 //处理响应内容(js操作文档结构) //发送请求 //get请求 get的请求实体拼接在URL后面，？隔开，键值对 ajax.open("get","url"); ajax.send(null); //post请求 有单独的请求实体 ajax.open("post", "url"); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.send("name=张三&pwd=123"); ajax的状态码 ajax状态码: readyState：0,1,2,3,4 4: 表示响应内容被成功接收 响应状态码: status 200:表示一切OK 404:资源未找到 500：内部服务器错误 ajax的异步和同步 ajax.open(method,urL,async) async：设置同步代码执行还是异步代码执行 true代表异步，默认是异步 false代表同步 --> <script type="text/javascript"> function getData(){ //创建ajax引擎对象 var ajax; if(window.XMLHttpRequest){//火狐 ajax=new XMLHttpRequest(); }else if(window.ActiveXObject){//ie ajax=new ActiveXObject("Msxml2.XMLHTTP"); } //复写onreadystatement函数 ajax.onreadystatechange=function(){ //判断Ajax状态吗 if(ajax.readyState==4){ //判断响应状态吗 if(ajax.status==200){ //获取响应内容 var result=ajax.responseText; //处理响应内容 //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML=result; }else if(ajax.status==404){ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="请求资源不存在"; }else if(ajax.status==500){ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="服务器繁忙"; } }else{ //获取元素对象 var showdiv=document.getElementById("showdiv"); showdiv.innerHTML="<img src='img/2.gif' width='200px' height='100px'/>"; } } //发送请求 ajax.open("get","ajax",true); ajax.send(null); alert("哈哈"); }
