ajax ascychronous javascript and xml(异步的js与xml) 是一种锦上添花的技术,实质上是利用浏览器内置的对象(ajax对象,类型是XMLHttpRequest)向 服务器发送异步(ajax对象在向服务器发送请求时,不会打断用户的其他操作)的请求,ajax对象 根据服务器返回的数据局部更新页面,整个过程当中,页面无刷新 如何获得ajax对象?BOM对象 DOM对象 区分浏览器 var xhr=null; if(window.XMLHttpRequest){ //非低版本的IE xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHttp"); } 相关属性: onreadystatechange:给ajax对象绑定一个事件函数 readyState:ajax对象与服务器的通讯状态 0:(未初始化)对象已经创建,open方法还未调用 1:(已经初始化)open方法已经调用 2:(发请求)send方法已被3调用 3:发送数据,ajax对象已经接受了服务器返回的部分数据 4:ajax接受了服务器返回的全部数据 responseText:服务器返回的数据类型是文本 responseXML:服务器返回的数据类型是xml status:服务器返回的状态码(200 404 500 302...) 通过ajax对象向服务器发送请求 step1、先获取ajax对象 step2、初始化 xhr.open("get/post","url",true/false); 参数1:请求类型get/post 参数2:请求地址"check?username=zs" 注: 如果是get请求,请求参数跟在请求地址后 如果是post请求,请求参数通过send方法传递 参数3:请求方式 true:异步请求 服务器响应回来之前用户可以继续其他操作 false:同步请求 如果服务器响应的时间较长,浏览器的页面会出现锁死的状态 注意:如果是post请求,添加以下设置 //设置响应消息头 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); 否则服务器接受到的参数值是null step3、绑定事件函数 xhr.onreadystatechange=function(){} step4、发请求,调用send方法 xhr.send(null);//get请求 xhr.send("username=zs");//post请求
如果ajax对象发请求时,采用的是get请求方式,那么IE浏览器会有以下两个问题:
a、缓存问题
如果是get请求,IE浏览器会将数据保存下来,当再次发送请求时,
如果请求地址未发生改变,则浏览器会将缓存中的数据返回,
并不会真正的向服务器发送新的请求
解决方案:
--把请求方式改成post
--在请求地址后追加参数,比如new Date().getTime()
b、中文乱码
如果是get请求,IE浏览器在处理参数时,使用的是gbk编码格式,
而chrom/firefox采用的是utf-8
encodeURI(uri)===>将uri中的数据采用utf-8的格式处理
向服务器发请求
浏览器--->服务器
ajax--->服务器
区别:
浏览器会销毁当前页面,用户在原页面上输入的数据不复存在
服务器响应回来的是一个新的页面,如果希望局部更新数据,
减少浏览器与服务器的数据交互量,可以使用ajax对象发请求