锐客网

  1. 首页 > it技术 > >

JAVA学习笔记(Ajax)

1.1什么是Ajax
AsynchronousJavascriptAndXml（异步的JavaScript和Xml）。是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊对象（XMLHttpRequest，一般称之为Ajax对象）异步地（Ajax对象在向服务器发送请求时，浏览器并不会销毁当前页面，用户仍然可以对当前页面作其他的操作）向服务器发送请求，服务器送回部分数据（不是一个完整的新的页面，而是文本或者Xml文档），在浏览器端，可以利用这些数据部分更新当前页面。整个过程，页面无刷新，不打断用户的操作。
以前，都是先销毁原来的页面，然后发送请求，等待服务器发送响应，再生成新页面。
Ajax的工作流程：


JAVA学习笔记(Ajax)
文章图片
1.2Ajax对象：如何获得Ajax对象
由于XMLHttpRequest（Ajax对象）没有标准化，所以要区分浏览器。
function getXhr(){//注意：后面的案例都将用到此函数
varxhr=null;
if(window.XMLHttpRequest){
xhr=newXMLHttpRequest(); //非IE浏览器
}else{
xhr=newActiveXObject('Microsoft.XMLHttp'); //IE浏览器
}
return xhr;
}
注意事项：后面的案例也会用到以下函数
function $(id){ //依据id返回dom节点
return document.getElementByid(id);
}
function $F(id){ //返回id对应的值
return $(id).value;
}
1.3Ajax对象的属性
（1）onreadystatechange:绑定一个事件处理函数（监听器），该函数用来处理readystatechange事件。Ajax对象的readyState属性发生改变，比如从0到1，则会产生onreadystatechange事件。
（2）responseText:获得服务器返回的文本数据
（3）responseXML:获得服务器返回的Xml文档
（4）status:获得状态码
（5）readyState:返回Ajax对象与服务器通讯的状态，返回值是一个number类型的值，一共有5个值，分别是：
<1>0：（未初始化）对象已经建立，但是尚未进行初始化（没有调用open方法）
<2>1：（初始化）对象已经建立，没有调用send方法
<3>2：（发送数据）send方法已经调用
<4>3：（数据传送中）已经接受部分数据
<5>4：（响应结束）Ajax对象已经获得了服务器返回的所有的数据
1.4编程步骤
（1）发送get请求
step1：获得Ajax对象，比如：varxhr=getXhr(); //调用之前定义的函数
step2：使用Ajax对象发送get请求：
①调用xhr.open('get',check_username.do?username=chang&age=23,true); 方法：建立与服务器之间的连接，三个参数依次为：请求方式、请求资源路径、请求是同步还是异步。true：表示异步请求（Ajax对象发送请求时，用户可以对当前页面作其他的操作，不会销毁页面）。false：表示同步请求（Ajax对象发送请求时，浏览器会锁定当前页面，用户只能等待，不会销毁页面）。
②xhr.onreadystatechange=func1(); ：绑定一个事件处理函数（监听器）
③xhr.send(null); ：发送请求参数，因为参数已经写在了请求资源路径中，所以这里为null。
step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就是一般不需要返回一个完整的页面，只需要返回部分的数据。
step4：编写事件处理函数
functionf1(){
if(xhr.readyState==4){
vartxt=xhr.responseText; dom操作……
}
}
（2）发送post请求
step1：获得Ajax对象，比如：varxhr=getXhr(); //调用之前定义的函数
step2：使用Ajax对象发送post请求
①xhr('post','check_username.do',true); ：建立连接
②xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); ：发送一个content-type消息头
③xhr.onreadystatechange=func1(); //绑定一个事件处理函数（监听器）
④xhr.send('username=chang'); //发送请求参数
注意事项：
与get请求不同，请求参数要放到send方法里面。
因为按照HTTP协议的要求，发送post请求时，应该发送一个content-type消息头，而Ajax对象在默认情况下，不会发送这个消息头，所以，需要调用setRequestHeader方法来添加。
step3：编写服务器端的处理程序，跟以前相比，有一点点改变，就是一般不需要返回一个完整的页面，只需要返回部分的数据。
step4：编写事件处理函数
1.5编码问题
（1）发送get请求
乱码产生的原因：IE浏览器内置的Ajax对象会使用“GBK”或“GB2312”对中文参数进行编码，而其他浏览器（Chrom、Firefox）内置的Ajax对象会使用“utf-8”对中文参数进行编码。服务器端，默认会使用“ISO-8859-1”去解码。因为编码与解码所使用的字符集（编码格式）不一致，所以，会出现乱码问题。
解决方法：
step1：设置服务器使用指定的字符集去解码。比如，可以修改Tomcat的server.xml配置（conf文件夹中），添加URIEncoding="utf-8"（告诉服务器，对于所有的get请求，默认使用“utf-8”去解码），修改之后重新启动服务器。
step2：使用encodeURI()函数（JS中内置函数）对请求地址进行编码。encodeURI()函数会使用“utf-8”进行编码
（2）发送post请求
①乱码问题产生的原因：所有浏览器（一般指三大浏览器：Chrom、Firefox、IE）内置的Ajax对象都会使用”utf-8”对中文参数进行编码，而服务器默认情况下，会使用“ISO-8859-1”去解码。
注意事项：Firefox特殊，本应是乱码，但能正常显示。通过截取消息头发现Firefox会在消息头中自动添加"charset=utf-8"。
②解决：服务器端添加：request.setCharacterEncoding("utf-8");
1.6Ajax的优点
（1）页面无刷新，不打断用户的操作
（2）按照需要获取数据，客户端（浏览器）与服务器之间的数据传输量大大减少
（3）是一种标准化的技术，不需要下载任何插件
1.7缓存问题（IE浏览器）
（1）发送get请求时
IE浏览器（其他浏览器没这个问题）内置的Ajax对象会检查请求地址是否访问过，如果访问过，则不再向服务器发送请求。
（2）解决方式
方式一：在请求地址后面添加一个随机数，用于欺骗IE，例如：
xhr.open('get','getNumber.do?'+Math.random(),true);
方式二：使用post方式发请求


Ajax的Get和Post的区别：
Get方式：用get方式可传送简单数据，但大小一般限制在1kb下，数据追加到url中发送（http的header传送），也就是说，浏览器将各个表单字段元素及其数据按照url参数的格式附加在请求房中的资源路径后面，另外最重要的一点事，它会被客户端的浏览器魂村起来，那么别人就可以从浏览器的历史记录中读取到客户的数据，因为，在某些情况下，get方法会带来严重的安全性问题
Post方式：当使用Post方式的时候，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为url地址的参数进行传递，使用POST方式传递的数据量要比GET方式传送的数据量大得多
总之，GET方式传送数据量小，处理效率高，安全性地，会被缓存，但是POST却不会
1.POST传输数据时，不需要在URL中显示出来，而GET方法要在URL中显示
2.POST传输的数据量大，可以达到2MB，而GET方法由于受到URL长度的限制，只能传递大约1024KB
3.POST是为了将数据传送到服务器，GET就是为了从服务器获取的数据，而GET之所以也能传送数据，只是用来设计告诉服务器，你到底需要什么样的数据。POST的信息作为http请求的内容，而GET是在http头部传输的
在客户端使用get请求时，服务器端使用Request.QueryString来获取参数，而客户端使用post请求时，服务器端使用Request.From来获取参数
【JAVA学习笔记(Ajax)】Ajax是与服务器交换数据并且更新部分网页的艺术，在不重新加载整个页面的情况下，有很多使用AJAX的应用程序案例：开心网等

    推荐阅读


    上一篇：青春有幸

    下一篇：不要碰我，你一碰我我就会死