Ajax核心技术之XMLHttpRequest

前端之家收集整理的这篇文章主要介绍了Ajax核心技术之XMLHttpRequest前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。


Ajax:即“Asynchronous JavaScript and XML”(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换;JavaScript操作DOM实现动态效果;运用XHTML+CSS表达信息;XMLXSLT操作数据。此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换。

使用方法

XMLHttpRequest五步使用法

1.创建对象;

2.注册回调函数

3.使用open方法设置和服务器交互的基本信息;

4.设置发送的数据,开始和服务器端交互;

5.实现回调函数.

由于每次应用XMLHttpRequest对象时,都要进行五步操作,因此,可将该对象的使用封装为js文件中,传递部分参数使用其方法就可以完成相应功能,实现如下:

  1. //使用封装方法人员只提供http的请求,URL地址,数据,成功和失败的回调的方法
  2.  
  3. //1.定义XMLHttpRequest对象的构造方法
  4. var MyXMLHttpRequest =function(){
  5. var xmlhttprequest;
  6. if(window.XMLHttpRequest){
  7. //IE7,IE8,FireFox,Mozillar,Safari,Opera
  8. //alert("IE7,FireFox,Mozillar,Safari,Opera");
  9. xmlhttprequest = new XMLHttpRequest();
  10. //解决浏览器在服务器端响应由于没有Text头的时候可能无法工作的问题
  11. if(xmlhttprequest.overrideMimeType){
  12. xmlhttprequest.overrideMimeType("text/xml");
  13. }
  14. }else if(window.ActiveXObject){
  15. //IE6,IE5.5,IE5
  16. alert("IE6,IE5");
  17. var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
  18. for (var n=0;n<activexName.length;n++){
  19. try{
  20. xmlhttprequest = new ActiveXObject(activexName[i]);
  21. break;
  22. }catch(e){
  23. }
  24. }
  25. }
  26. if(xmlhttprequest === null){
  27. alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
  28. } else {
  29. this.xmlhttp=xmlhttprequest;
  30. }
  31. };
  32. //用户发送请求的方法
  33. MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback){
  34. if (this.xmlhttp !== undefined && this.xmlhttp !== null){
  35. method = method.toUpperCase();
  36. if(method !== "POST" && method !== "GET") {
  37. alert("HTTP的请求方式必须是GET或POST");
  38. return;
  39. }
  40. if(url === null || url === undefined) {
  41. alert("HTTP的请求地址必须设置");
  42. return;
  43. }
  44. var tmpxmlhttp = this.xmlhttp;
  45. //2.注册回调函数
  46. this.xmlhttp.onreadystatechange = function(){
  47. //5.判断和服务器的交互是否完成,还要判断服务器端是否正确返回了数据
  48. if (tmpxmlhttp.readyState == 4) {
  49. //表示和服务器的交互已经完成
  50. if(tmpxmlhttp.status == 200){
  51. //表示服务器的相应代码是200,正确的返回了数据
  52. //纯文本数据的接收方法
  53. var responseText = tmpxmlhttp.responseText;
  54. var responseXML = tmpxmlhttp.responseXML;
  55. if(callback === undefined || callback === null) {
  56. alert("没有设置处理数据正确返回的方法");
  57. alert("返回的数据:" + responseText);
  58. } else {
  59. callback(responseText,responseXML);
  60. }
  61. }else {
  62. if(failback === undefined || failback === null){
  63. alert("没有设置处理数据返回的处理方法");
  64. alert("Http的相应码:" + tmpxmlhttp.status + "相应码的文本信息:" + xml.statusText);
  65. } else {
  66. failback(tempxmlhttp.status,tempxmlhttp.statusText);
  67. }
  68. }
  69. }
  70. }
  71. //3.使用open方法设置和服务器端交互的基本信息
  72. this.xmlhttp.open(method,true);
  73. //如果是POST方式,需要设置请求头
  74. if(method === "POST") {
  75. this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencode");
  76. }
  77. //4.设置发送的数据,开始和服务器端交互。
  78. this.xmlhttp.send(data);
  79. } else{
  80. alert("XMLHttpRequest对象创建失败,无法数据");
  81. }
  82. }
  83. //取消当前响应,关闭连接并且结束任何未决的网络活动
  84. MyXMLHttpRequest.prototype.abort = function(){
  85. this.xmlhttp.abort();
  86. }


扩展问题

1.浏览器缓存

2.中文乱码

3.跨域访问

对于问题1、问题3都可以通过更改url地址的方法得以解决。问题1可在url地址尾添加时间戳,问题3通过代理方式进行解决。只需在send()中的第三步执行前添加相应判断即可:

  1. //解决缓存的转换:增加时间戳
  2. if(url.indexOf("?") >= 0 ){
  3. url = url + "&t=" + (new Date()).valueOf();
  4. } else {
  5. url = url + "?t=" + (new Date()).valueOf();
  6. }
  7. //解决跨域的问题
  8. if(url.indexOf("http://") >= 0) {
  9. url.replace("?","&");
  10. url = "Proxy?url=" + url;
  11. }

问题3对应代理服务端实现:


  1. /**
  2. * Handles the HTTP <code>GET</code> method.
  3. *
  4. * @param request servlet request
  5. * @param response servlet response
  6. * @throws ServletException if a servlet-specific error occurs
  7. * @throws IOException if an I/O error occurs
  8. */
  9. @Override
  10. protected void doGet(HttpServletRequest request,HttpServletResponse response)
  11. throws ServletException,IOException {
  12. //获取参数,最后得到请求URL地址类似于:url = http://192.168.../AJAX/AJAXServer?aa=11&bb=22&cc=33
  13. StringBuilder url = new StringBuilder();
  14. url.append(request.getParameter("url"));
  15. //获取访问的跨域地址url = http://192.168.../AJAX/AJAXServer
  16. Enumeration enu = request.getParameterNames();
  17. boolean flag = false; //定义标志变量,表示是否为拼接的第一个参数
  18. while(enu.hasMoreElements()){
  19. String paramName = (String) enu.nextElement();
  20. if(!paramName.equals("url")){
  21. String paramValue = request.getParameter(paramName);
  22. paramValue = URLEncoder.encode(paramValue,"utf-8");
  23. if(!flag){
  24. url.append("?").append(paramName).append("=").append(paramValue);
  25. flag = true;
  26. } else {
  27. url.append("&").append(paramName).append("=").append(paramValue);
  28. }
  29. }
  30. }
  31. response.setContentType("text/html;charset=utf-8");
  32. PrintWriter out = response.getWriter();
  33. if(url != null && url.length() > 0){
  34. URL connectionUrl = new URL(url.toString());
  35. BufferedReader reader = new BufferedReader(new InputStreamReader(connectionUrl.openStream(),"utf-8"));
  36. String line;
  37. while((line = reader.readLine()) != null){
  38. out.println(line);
  39. }
  40. reader.close();
  41. }
  42. }
  43.  
  44. /**
  45. * Handles the HTTP <code>POST</code> method.
  46. *
  47. * @param request servlet request
  48. * @param response servlet response
  49. * @throws ServletException if a servlet-specific error occurs
  50. * @throws IOException if an I/O error occurs
  51. */
  52. @Override
  53. protected void doPost(HttpServletRequest request,IOException {
  54. //获取参数,最后得到请求URL地址类似于:url = http://192.168.../AJAX/AJAXServer?aa=11&bb=22&cc=33
  55. String url = request.getParameter("url");
  56. //获取访问的跨域地址url = http://192.168.../AJAX/AJAXServer
  57. StringBuffer paramBuffer = new StringBuffer();
  58. Enumeration enu = request.getParameterNames();
  59. boolean flag = false; //定义标志变量,表示是否为拼接的第一个参数
  60. while(enu.hasMoreElements()){
  61. String paramName = (String) enu.nextElement();
  62. if(!paramName.equals("url")){
  63. String paramValue = request.getParameter(paramName);
  64. paramValue = URLEncoder.encode(paramValue,"utf-8");
  65. if(!flag){
  66. paramBuffer.append(paramName).append("=").append(paramValue);
  67. flag = true;
  68. } else {
  69. paramBuffer.append("&").append(paramName).append("=").append(paramValue);
  70. }
  71. }
  72. }
  73.  
  74. response.setContentType("text/html;charset=utf-8");
  75. PrintWriter out = response.getWriter();
  76. if(url != null && url.trim().length() > 0){
  77. URL connectUrl = new URL(url);
  78. URLConnection connection =connectUrl.openConnection();
  79. connection.setDoOutput(true);
  80. OutputStreamWriter writer = new OutputStreamWriter(connection.getOutputStream());
  81. writer.write(paramBuffer.toString());
  82. writer.flush();
  83. BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream(),"utf-8"));
  84. String line;
  85. while((line = reader.readLine()) != null){
  86. out.println(line);
  87. }
  88. writer.close();
  89. reader.close();
  90. }
  91. }


对于问题2


(1)响应数据解决中文乱码的方法:保证页面端定义的charsethttp响应头的Content-Type中定义的charset一致。


http响应头的Content-Typecharset设置为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对象实现,搜索SuggestGoogleMap等应用的友好体验使得此对象的使用愈显重要,希望本文对读者更好的使用XMLHttpRequest提供了一定帮助。

猜你在找的Ajax相关文章