Ajax 应用

Ajax的工做原理

Ajax不是新技术，而是一种技巧。是以JavaScript、xhtml、css、dom、xml、xstl、XMLHttpRequest综合而造成的开发平台。传统的Web工做模式很是简单，就是浏览器发送http请求，服务器接收请求处理返回一个html/xhtml页面到客户端，这种方式不免会出现用户等待的状况。而Ajax就是是浏览器和Web服务器之间新增的一层引擎，这是一种异步通讯方式。

技术元素	做用
HTML/XHTML CSS	用于Web浏览器中呈现页面显示效果和页面布局
XMLHttpRequest	能够直接传输数据到服务器 或从服务器获取数据
JavaScript脚本语言	编写Ajax应用的实现，在浏览器中实现相关处理逻辑
XML	客户端和服务器的数据传输的格式
XSLT	将Web服务器传回的XML数据转换为html输出到浏览器
DOM	处理XML的API，html的表述结构，并能够利用它来改变html的内容， javascript经过DOM才能够和页面交互； 文件的属性、方法、 事件都以对象来展现，如document表示页面对象自己

 

 

 

 

 

 

 

 

 

 

Ajax优缺点：

优势：

一、数据和呈现分离。也就是先后端分离，有利于分工合做。

二、减轻服务器压力。

三、减小带宽消耗。

四、用户体验提高。

五、市场承认。当年谷歌地图采用ajax技术吸引了大量的目光，如今几乎全部网站都采用ajax技术，已经变的很是广泛。

缺点：

一、用户习惯改变。一个最为明显的是浏览器后退键失效，虽然经过一些方法能够解决，但也给开发人员带来更大的工做量。

二、浏览器兼容问题。若是是用原生的js编写就要考虑这个问题了，固然最好用jquery。

三、安全问题。跨域脚本攻击、sql注入等问题。

四、对搜索引擎不友好。

相信随着ajax的发展这些问题都会获得很好的解决。

 

Ajax简单实例

原生JS

核心：XMLHttpRequest

过程：建立XMLHttpRequest对象，链接服务器，发起请求，接受响应数据

全部现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

经过一行简单的 JavaScript 代码，咱们就能够建立 XMLHttpRequest 对象。

建立XMLHttpRequest对象

 var xmlhttp=new XMLHttpRequest();

老版本IE（IE6）使用ActiveX对象

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

//完整代码
<script type="text/javascript">
    var xhr;
    if (window.XMLHttpRequest) {//全部现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera)
        xhr = new XMLHttpRequest();
    } else {//IE6如下
        xhr = new new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.onreadystatechange=function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //...
        }
    }
    xhr.open("GET", "/test/test", true);
    xhr.send();
</script>

 

Jquery

参考地址：http://www.w3school.com.cn/jquery/ajax_ajax.asp

 $.ajax({
        url: "http://api.b.com/getapi",
        dataType: "JSON",
        type: "GET",
        async: true,
        data: {},
        success: function (data) {  },
        error: function () { }
    });