AJAX应用技巧

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

一、XMLHTTPRequest浏览器缓存问题

在Firefox浏览器中,XMLHTTPRequest对象相相同的url发送请求时,浏览器每次都会向服务器发送请求,不存在缓存的问题,而IE浏览器如果url请求地址相同时,浏览器会读取其缓存中的内容进行响应,而不再向服务器发送请求,解决浏览器缓存的办法是:在url后面加上时间戳参数,使浏览器认为请求的url不同,而不再读取缓存。

二、AJAX传递中文乱码问题

当使用AJAX处理中文参数时,浏览器会显示乱码,解决方法有如下两种解决方案:

方案一:

页面端:使用endcodeURI(参数)对中文参数进行编码。

服务器端:使用new String(参数.getBytes(“ISO8859-1”),”UTF-8”);对参数进行重新编码为UTF-8。

缺点:服务器可能不是使用ISO8859-1,硬编码不方便修改

方案二:

页面端:使用endcodeURI(endcodeURI(参数))对中文参数进行两次编码。

服务器端:使用URLDecoder.decode(参数,”UTF-8”);进行UTF-8解码。

方法是推荐使用。

三、AJAX跨域访问问题

Web页面跨域访问时,会引起安全问题,因此,Firefox浏览器不允许跨越访问,IE浏览器会给出一个警告提示。如果要使AJAX程序可以顺利地跨域访问解决方案如下:

页面端:将跨域访问的http url请求地址中的“?”用“&”代替,然后将当前的url变为Proxy?url=改变后的url;

服务器端:编写一个名为Proxy的servlet用于处理跨域访问,其编写思路如下:

A.解析url和其参数,将其重新拼接成原始跨域访问的url。

B.访问URL地址,并将获得的内容返回给页面端。

POST方式和GET方式有所不同,POST方式的参数是在HTTP请求的body中,而GET方式的参数是在请求的url中,因此代码有所不同。

POST方式核心代码如下:

[javascript] view plain copy
  1. PrintWriterout=response.getWriter();@H_301_57@
  2. If(url!=null){//url为解析拼接出来的跨域访问url@H_301_57@
  3. URLconnect=newURL(url.toString());@H_301_57@
  4. URLConnectionconnection=connect.openConnection();@H_301_57@
  5. Connection.setDoOutput(true);@H_301_57@
  6. OutputStreamWriterparamout=newOutputStreamWriter(connection.getOutputStream());@H_301_57@
  7. //post方式参数是在请求的body中,需要和请求头分开发送@H_301_57@
  8. paramout.writer(解析出来的参数);@H_301_57@
  9. paramout.flush();@H_301_57@
  10. BufferedReaderreader=newBufferedReader(newInputStreamReader(connection.getInputStream(),"UTF-8"));@H_301_57@
  11. Stringline;@H_301_57@
  12. while((line=reader.readLine())!=null){@H_301_57@
  13. out.println(line);@H_301_57@
  14. }@H_301_57@
  15. paramout.close();@H_301_57@
  16. reader.close();@H_301_57@
  17. }@H_301_57@
  18. }@H_301_57@

GET方式核心代码如下:

[javascript]
  • PrintWriterout=response.getWriter();@H_301_57@
  • if(url!=null){@H_301_57@
  • URLconnect=newURL(url.toString());@H_301_57@
  • BufferedReaderreader=newInputStreamReader(connect.openStream(),153)">null){@H_301_57@
  • out.println(line);@H_301_57@
  • }@H_301_57@
  • reader.close();@H_301_57@
  • }@H_301_57@
  • 猜你在找的Ajax相关文章