Ajax:即“Asynchronous JavaScript and XML”(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换;JavaScript操作DOM实现动态效果;运用XHTML+CSS表达信息;XML和XSLT操作数据。此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换。
使用方法
XMLHttpRequest五步使用法:
1.创建对象;
3.使用open方法设置和服务器交互的基本信息;
4.设置发送的数据,开始和服务器端交互;
5.实现回调函数.
由于每次应用XMLHttpRequest对象时,都要进行五步操作,因此,可将该对象的使用封装为js文件中,传递部分参数使用其方法就可以完成相应功能,实现如下:
- //使用封装方法人员只提供http的请求,URL地址,数据,成功和失败的回调的方法
- //1.定义XMLHttpRequest对象的构造方法
- var MyXMLHttpRequest =function(){
- var xmlhttprequest;
- if(window.XMLHttpRequest){
- //IE7,IE8,FireFox,Mozillar,Safari,Opera
- //alert("IE7,FireFox,Mozillar,Safari,Opera");
- xmlhttprequest = new XMLHttpRequest();
- //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题
- if(xmlhttprequest.overrideMimeType){
- xmlhttprequest.overrideMimeType("text/xml");
- }
- }else if(window.ActiveXObject){
- //IE6,IE5.5,IE5
- alert("IE6,IE5");
- var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
- for (var n=0;n<activexName.length;n++){
- try{
- xmlhttprequest = new ActiveXObject(activexName[i]);
- break;
- }catch(e){
- }
- }
- }
- if(xmlhttprequest === null){
- alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
- } else {
- this.xmlhttp=xmlhttprequest;
- }
- };
- //用户发送请求的方法
- MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback){
- if (this.xmlhttp !== undefined && this.xmlhttp !== null){
- method = method.toUpperCase();
- if(method !== "POST" && method !== "GET") {
- alert("HTTP的请求方式必须是GET或POST");
- return;
- }
- if(url === null || url === undefined) {
- alert("HTTP的请求地址必须设置");
- return;
- }
- var tmpxmlhttp = this.xmlhttp;
- //2.注册回调函数
- this.xmlhttp.onreadystatechange = function(){
- //5.判断和服务器的交互是否完成,还要判断服务器端是否正确返回了数据
- if (tmpxmlhttp.readyState == 4) {
- //表示和服务器的交互已经完成
- if(tmpxmlhttp.status == 200){
- //表示服务器的相应代码是200,正确的返回了数据
- //纯文本数据的接收方法
- var responseText = tmpxmlhttp.responseText;
- var responseXML = tmpxmlhttp.responseXML;
- if(callback === undefined || callback === null) {
- alert("没有设置处理数据正确返回的方法");
- alert("返回的数据:" + responseText);
- } else {
- callback(responseText,responseXML);
- }
- }else {
- if(failback === undefined || failback === null){
- alert("没有设置处理数据返回的处理方法");
- alert("Http的相应码:" + tmpxmlhttp.status + "相应码的文本信息:" + xml.statusText);
- } else {
- failback(tempxmlhttp.status,tempxmlhttp.statusText);
- }
- }
- }
- }
- //3.使用open方法设置和服务器端交互的基本信息
- this.xmlhttp.open(method,true);
- //如果是POST方式,需要设置请求头
- if(method === "POST") {
- this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencode");
- }
- //4.设置发送的数据,开始和服务器端交互。
- this.xmlhttp.send(data);
- } else{
- alert("XMLHttpRequest对象创建失败,无法数据");
- }
- }
- //取消当前响应,关闭连接并且结束任何未决的网络活动
- MyXMLHttpRequest.prototype.abort = function(){
- this.xmlhttp.abort();
- }
扩展问题
1.浏览器缓存
2.中文乱码
3.跨域访问
对于问题1、问题3都可以通过更改url地址的方法得以解决。问题1可在url地址尾添加时间戳,问题3通过代理方式进行解决。只需在send()中的第三步执行前添加相应判断即可:
问题3对应代理服务端实现:
- /**
- * Handles the HTTP <code>GET</code> method.
- *
- * @param request servlet request
- * @param response servlet response
- * @throws ServletException if a servlet-specific error occurs
- * @throws IOException if an I/O error occurs
- */
- @Override
- protected void doGet(HttpServletRequest request,HttpServletResponse response)
- throws ServletException,IOException {
- //获取参数,最后得到请求URL地址类似于:url = http://192.168.../AJAX/AJAXServer?aa=11&bb=22&cc=33
- StringBuilder url = new StringBuilder();
- url.append(request.getParameter("url"));
- //获取访问的跨域地址url = http://192.168.../AJAX/AJAXServer
- Enumeration enu = request.getParameterNames();
- boolean flag = false; //定义标志变量,表示是否为拼接的第一个参数
- while(enu.hasMoreElements()){
- String paramName = (String) enu.nextElement();
- if(!paramName.equals("url")){
- String paramValue = request.getParameter(paramName);
- paramValue = URLEncoder.encode(paramValue,"utf-8");
- if(!flag){
- url.append("?").append(paramName).append("=").append(paramValue);
- flag = true;
- } else {
- url.append("&").append(paramName).append("=").append(paramValue);
- }
- }
- }
- response.setContentType("text/html;charset=utf-8");
- PrintWriter out = response.getWriter();
- if(url != null && url.length() > 0){
- URL connectionUrl = new URL(url.toString());
- BufferedReader reader = new BufferedReader(new InputStreamReader(connectionUrl.openStream(),"utf-8"));
- String line;
- while((line = reader.readLine()) != null){
- out.println(line);
- }
- reader.close();
- }
- }
- /**
- * Handles the HTTP <code>POST</code> method.
- *
- * @param request servlet request
- * @param response servlet response
- * @throws ServletException if a servlet-specific error occurs
- * @throws IOException if an I/O error occurs
- */
- @Override
- protected void doPost(HttpServletRequest request,IOException {
- //获取参数,最后得到请求URL地址类似于:url = http://192.168.../AJAX/AJAXServer?aa=11&bb=22&cc=33
- String url = request.getParameter("url");
- //获取访问的跨域地址url = http://192.168.../AJAX/AJAXServer
- StringBuffer paramBuffer = new StringBuffer();
- Enumeration enu = request.getParameterNames();
- boolean flag = false; //定义标志变量,表示是否为拼接的第一个参数
- while(enu.hasMoreElements()){
- String paramName = (String) enu.nextElement();
- if(!paramName.equals("url")){
- String paramValue = request.getParameter(paramName);
- paramValue = URLEncoder.encode(paramValue,"utf-8");
- if(!flag){
- paramBuffer.append(paramName).append("=").append(paramValue);
- flag = true;
- } else {
- paramBuffer.append("&").append(paramName).append("=").append(paramValue);
- }
- }
- }
- response.setContentType("text/html;charset=utf-8");
- PrintWriter out = response.getWriter();
- if(url != null && url.trim().length() > 0){
- URL connectUrl = new URL(url);
- URLConnection connection =connectUrl.openConnection();
- connection.setDoOutput(true);
- OutputStreamWriter writer = new OutputStreamWriter(connection.getOutputStream());
- writer.write(paramBuffer.toString());
- writer.flush();
- BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream(),"utf-8"));
- String line;
- while((line = reader.readLine()) != null){
- out.println(line);
- }
- writer.close();
- reader.close();
- }
- }
对于问题2
(1)响应数据解决中文乱码的方法:保证页面端定义的charset和http响应头的Content-Type中定义的charset一致。
①http响应头的Content-Type中charset设置为utf-8
②仅仅使用"MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"这两个中的一个来创建XMLHttpRequest对象。
(2)请求数据中文乱码解决方法:由于服务器端getParameter()方法会自动进行一次ISO8859规则解码,因此页面端应使用javascript中的encodeURI()方法对请求数据进行两次编码,服务器端使用URLDecode(utf-8)进行一次解码。
总结
XMLHttp详细属性、方法介绍:http://www.w3school.com.cn/xmldom/dom_http.asp
Ajax异步交互主要通过XMLHttpRequest对象实现,搜索Suggest、GoogleMap等应用的友好体验使得此对象的使用愈显重要,希望本文对读者更好的使用XMLHttpRequest提供了一定帮助。