Ajax入门——使用XMLHttpRequest的常见问题及解决方案

来源：互联网发布：和珅王刚知乎编辑：程序博客网时间：2024/05/22 11:04

使用Ajax进行web开发中，经常会遇到下面三个基本问题：

1.XMLHttpRequest请求的缓存问题

2.Ajax应用中的中文乱码问题

3.Ajax应用中的跨域访问问题

一、XMLHttpRequest请求的缓存问题

由于浏览器的缓存机制，当我们使用XMLHttpRequest发出请求的时候，浏览器会将请求的地址与缓存中的地址进行比较，如果存在相同记录则返回与上一次请求相同内容。其实不光是在Ajax应用中，在我们项目开发中使用一个基本的JavaScript更换验证码时，也会发生发出请求之后，并没有得到服务器端更新的结果的问题。以上皆是缓存问题，解决这类缓存问题并不麻烦，而且方法很多。

1.时间戳方法——即在每次请求的url后面加上当前时间的字符串或其他类似的不会重复的随机字符串，这样浏览器每次发出的是不同的url，即会当做不同的请求来处理，而不会从缓存中读取。

　　　　if(url.indexOf("?")>=0){//判断url中是否已经带有参数
                    url = url + "&t=" + (new Date()).valueOf();
                }else{
                    url = url + "?t=" + (new Date()).valueOf();
                }

2、在HTTP header上处理缓存

3. 在XMLHttpRequest发送请求之前加上：

　　　　XMLHttpRequest.setRequestHeader("If-Modified-Since","0");
　　　　XMLHttpRequest.send(null);

二、Ajax应用中的中文乱码问题分为两种：

1.请求数据中包含中文，服务器端接收数据时出现乱码；

解决方案：

在页面端，将包含中文信息的请求数据利用JavaScript中的encodeURL进行两次编码：

　　　　//获取文本框中用户输入的内容
var email = document.getElementById("email").value;
//encodeURL进行两次编码

email = encodeURI(encodeURI(email));

在服务器端，对获得到的请求数据用URLDecoder类的decode方法按照utf-8的方式进行decode操作

　　　　String email = request.getParameter("email");

　　　　email = URLDecoder.decode(email, "utf-8");

这里为什么在页面端要进行两次encodeURL编码，而在服务器端却只进行一次decode操作呢？因为在调用getParameter方法的时候，应用服务器内部会进行一次解码，所以String email = request.getParameter("email")中的email已经是经过一次解码之后的数据，然后我们只需进行一个decode即可得到原始数据。(视频上是这么说的，关于服务器端getParameter的内部机制，感兴趣的只有自己去Google了。)

2.响应数据中包含中文，由于编码设置错误导致浏览器显示时出现乱码

解决方案：

保证页面端定义的charset和http响应头的content-type中定义的charset一致即可。

这里有一个特殊情况，就是在IE6.0中如果页面端和服务器端对应的charset都设置为gb2312时，还是会出现中文的响应时乱码，其他浏览器没有。针对这个问题，第一套解决方案是将charset设置为除gb1312之外的编码方式，如utf-8等；第二套解决方案是在我们创建XMLHttpRequest对象的时候，仅仅使用MSXML2.XMLHTTP和Microsoft.XMLHTTP来创建，这也是我们通常采用的做法。

三、跨域访问问题

即在XMLHttpRequest对象中访问远程服务器地址：

　　　　 xmlhttp.open("GET", "http://192.168.0.102:8080/Demo/Email?email="+email, true, "admin", "admin");

在IE6.0中当然执行此操作时，会弹出一个对话框：

提示会存在安全风险，问是否继续，如果选择"Yes"会继续访问你所请求的远程页面，否则停止响应。

但在IE7.0及以上版本、Firefox等上访问时，默认的会不支持这样的跨域访问。

就像我们有时候直接访问国外网站是访问不了的，这时我们可以给浏览器加一个代理。在这里我们也可以利用代理的思想来解决。即先让XMLHttpRequest对象访问同域的服务器，然后通过该服务器再去请求远程服务器上的数据。我们可以通过代码实现，鉴于代码有点多，有空再贴出。