26@ajax_day01
1、ajax是什么?
异步的javascript和xml
在传统的web应用当中,点击提交按钮,浏览器会在将数据发送给服务器的同时,会将整个页面销毁,然后,等待服务器返回一个新的页面回来,浏览器再次解析。
为了解决这种“等待-响应-等待”的弊端,可以使用ajax技术,ajax技术的实质是利用浏览器内置的一个特殊的对象(XmlHttpRequest)异步地向服务器发送请求,在该对象发送请求的同时,浏览器不会销毁之前的页面,也就是说,用户仍然可以对以前的页面进行任何的操作。当服务器处理请求完毕,会将结果(不是一个完整的页面,只是部分数据,一般以文本或者xml文本)返回给XmlHttpRequest对象。然后,可以利用javascript将这些结果数据更新到原有的页面(即使用dom操作)。整个过程,页面无任何的刷新,不打断用户的操作。
2、XmlHttpRequest对象
1)如何获得该对象
该对象并没有标准化,要区分浏览器。
ie浏览器不支持XMLHttpRequest类型,其它浏览器支持。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function getXmlHttpRequest(){ 2 var xmlHttpRequest = null; 3 if ((typeof XMLHttpRequest) != 'undefined') { 4 xmlHttpRequest = new XMLHttpRequest(); 5 }else { 6 xmlHttpRequest = 7 new ActiveXObject('Microsoft.XMLHttp'); 8 } 9 return xmlHttpRequest; 10 }
2)属性
onreadystatechange: 注册监听器(绑订事件处理代码)
readyState: 与服务器之间通讯的状态,该状态有0,1,2,3,4五个值,当值为4时,表示收到了服务器返回的所有的数据。
0 (未初始化) 对象已建立,但是尚未初始化。(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法。
2 (发送数据) send方法已调用。
3 (数据传送中) 已接收部分数据。
4 (数据接收完毕) 此时,可以调用responseText获取数据。
responseText:获取服务器返回的文本数据
responseXML:获得服务器返回的xml数据
status:获得状态码
3、编程
step1 获得XmlHttpRequest对象
var xhr = getXhr();
step2 发请求
1) 发送get请求
//open(请求方式,请求地址,同步还是异步);
//如果有请求参数,应该添加到请求地址后面
// true表示异步,false表示同步
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 xhr.open('get','check_username.do?username=zs',true); 2 xhr.onreadystatechange=f1; 3 xhr.send(null);
2)发送post请求
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 xhr.open('post','check_username.do',true); 2 //为xhr生成的请求数据包添加一个content-type消息头。 3 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); 4 xhr.onreadystatechange=f1; 5 xhr.send("username=zs");
step3 编写服务器端的代码,来处理请求。
step4 在监听器(事件处理代码当中)处理服务器返回的数据。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 function f1(){ 2 //只有状态等于4 3 if(xhr.readyState == 4){ 4 //获得服务器返回的数据 5 var txt = xhr.responseText; 6 //var xml = xhr.responseXML; 7 //dom操作 8 ... 9 } 10 }
练习:
使用ajax方式对验证码进行验证。
4、ajax编程需要注意的两个问题
1)缓存问题
当采用get方式向服务器发请求时,ie浏览器会先查询缓存当中有没有结果,如果有,则不会向服务器发请求。
解决方案:
a, 在请求地址后面添加一个随机数
b, 或者使用post方式
2)编码问题
a, 链接地址当中有中文
浏览器(不管什么浏览器)一定会使用utf-8对链接地址中的中文进行编码。
解决方式:
对于tomcat, tomcat_home/conf/server.xml,添加 URLEncoding="utf-8",
重新启动服务器。
b,链接地址中包含了中文参数
浏览器会对链接地址中的中文参数进行编码,会使用打开链接所在的页面的编码格式来编码。
解决方式一:
step1 对于tomcat, tomcat_home/conf/server.xml,添加 URLEncoding="utf-8",重新启动服务器。
step2 要保证链接所在的页面以"utf-8"的编码格式打开。
解决方式二:
step1 对于tomcat, tomcat_home/conf/server.xml,添加 URLEncoding="utf-8",重新启动服务器。
step2 对链接地址中的中文参数使用URLEncoder.encode(参数,"utf-8");
c,ajax编程当中如何向服务器发送中文参数
在ajax应用当中,不是浏览器向服务器发请求,是XMLHttpRequest对象向服务器发请求,该对象也会对请求中的中文参数进行编码。
当使用get方式时,ie浏览器内置的XMLHttpRequest对象(其实是ActiveXObject)会采用gbk编码,而其它浏览器,采用utf-8编码。
解决方式:
step1 对于tomcat, tomcat_home/conf/server.xml,添加 URLEncoding="utf-8",重新启动服务器。
step2 使用encodeURI函数(javascript内置的一个函数)对中文进行编码。
当使用post方式发请求时,浏览器(所有浏览器)会对中文参数统一进行utf-8编码。
解决方式:
request.setCharacterEncoding("utf-8");
练习:
使用ajax方式实现一个级联下拉列表