一.ajax自我介绍

AJAX =AsynchronousJavaScript and XML (异步的javaScript 和XML).AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下,通过在后台与服务器进行少量数据交换,使网页实现异步更新.是一种用于创建快速动态网页的技术.

Ajax 主要是由下面几个部分组成:

1.基于标准的XHTML结构和CSS 样式.

2.通过DOM(Document Object Model) 实现动态显示和交互.

3.通过XML 和XSLT 进行数据交换和处理.

4.通过XMLHttpRequest 插件进行异步通信.

5.使用javaScript 实施逻辑控制,以便整合以上所有的技术.

所谓异步请求,就是浏览器不必等待HTTP响应完毕才继续执行,而是立即执行javascript 命令或用户请求,也就是说,HTTP请求与浏览器操作不是同步的.而是在同步请求下,浏览器只有在响应完毕之后,才能继续执行后续任务或操作.

一个Ajax解决方案中涉及的技术有以下四个方面:

1.JavaScript,通过用户或其他与浏览器相关事件捕获交互作用.

2.XMLHttpRequest对象,通过这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求.

3.服务器上的XML文件,或者其他类似的数据格式.

4.其他JavaScript,解决来自服务器的数据并将其呈现到页面上.

二.Ajax解决问题

在一个优秀的HTML 网页中,总会伴有javascript,jquery,ajax 这三姐妹,jquery是javascript 的一个函数库,做最少的功干最多的事情.不是所有的事情jquery 都能解决的,这是ajax 的出现,就是解决简单的javascript无法解决的事情.那么我们来看看ajax 经常解决的一些问题.

1.解决浏览器缓存问题

浏览器缓存(Browser Caching)是为了加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览.

缓存的方式节约了网络的资源,提高了网络的效率,但是对于某些需要统计访问量 的网站,缓存问题却称为了最让人头疼的问题的了,那么使用Ajax 如何解决这个问题.其实 解决方法就是增加时间戳.关键的代码如下:

if(url.indexOf("?")>=0){
     url=url+"&t="+(new Date()).valueOf();
}
else{
   url=url+"?+"+(new Date()).valueOf();
}

2.解决中文乱码问题

出现中文乱码的两种情况:

(1).请求数据中包含中文,服务器程序接收错误导致出现乱码.

(2).响应数据中包含中文,编码设置错误导致浏览器中看到的结果数据是乱码.

响应数据乱码的解决方法:保证页面端定义的charset和http响应头的Content-Type中定义的charset一致即可.

解决中文响应数据出现乱码有两种方法:

(1).http响应头的Content-Type中的charset设置为utf-8l

(2).仅仅用"MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"这两个中的一个来创建XMLHttpRequest对象

那么解决中文乱码问题的原理是:

3.解决跨域访问问题

IE6:默认访问跨域页面时会给出提示,用户确认后会访问.

IE7以上.Mozilla FireFox及其他,默认不允许访问跨域页面

跨域问题的图解如下:

从上图可以看出,可以从页面端和服务器端解决跨域问题.

页面端:

If(url.indexOf("http://")==0){
  url=url.replace("?","&");
  url="Proxy?url="+url;
}

服务器端

Get 和Post 方式分开处理

(1).获取原始的请求url地址和参数

(2)get方式利用URL 和远程地址交互

(3)post方式利用URL和URLConnection和远程地址交互,还要向远程发送请求参数信息

4.解决空白问题

HTML文档body的子孙节点或XML根节点的子孙节点中,如果两个元素节点之间只有空格,缩进,回车这样的不包含文字信息的内容,那这些信息就都是空白信息.

解决空白信息这个问题的方法就是采用深度遍历的方式进行遍历,移除所有空白信息,保证IE和FireFox下的dom树结构相同.

Function removeBlank(doc){
  if(doc.childNodes.length>1){
     for(var loopIndex=0.loopIndex<doc.childNodes.length;loopIndex++){
       var currentNode=doc.childNodes[loopIndex];
       if(currentNode.nodeType==1){
            removeBlank(currentNode);
        }
       if(((/^\s+$/.test(currentNode.nodeValue)))&&(currentNode.nodeType==3)){
           doc.removeChild(doc.childNodes[loopIndex--]);
       }
      }
  }
}