AJAX编程模板

　　AJAX一直以来没怎么接触，主要是作JSON数据在服务器和客户端之间传递的时候，被玩坏了，对它莫名的不可爱，最近心理阴影小了，因而又来看看它.......

　　AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种建立交互式网页应用的网页开发技术。AJAX 是一种用于建立快速动态网页的技术。经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

　　以上是百度到的。。。

　　下面本身找着教程概括了一些。

　　Asynchronous 异步通讯。实现局部刷新。好比说表单注册，若是传统的页面中，若是总体传送，浪费资源。而如今的方式则是部分发送，并且能够后台发送。这就是异步的特色。而不是单一的流水线过程。提升用户体验，节约网页流量。数据通常用JSON。

　　通常涉及到javascript，JSON，DOM操做。

　　下面经过一个搜索框提示功能演示实例来体现AJAX的原理。

　　典型的AJAX编程模板：1.建立XMLHttpReqeust对象  2.open操做初始化请求信息 3.监听处理相应结果 4.send操做发出请求。

　　1.建立XMLHttpReqeust对象 ：var xhr=new XMLHttpRequest();要注意浏览器的状态码：4，200，404等记得是什么意思。

　　大部分浏览器都有这个函数，可是ie6浏览器低版本没有内置XMLHttpRequest()，可是ie6有一个ActiveXObject。这时候比较兼容性的建立XMLHttpRequest对象的方法以下：

//1.建立XMLHttpReqeust对象
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                try{
                    xhr=new ActiveXObject('Msxml2.XMLHTTP');
                }catch (e){
                    try{
                        xhr=new ActiveXObject('Microsoft.XMLHTTP');
                    }catch (e){}
                }
            }

　　2.AJAX请求的发起

　　重点有两个方法要掌握：open和send。open是初始化，而send是真正发起请求的方法。

　　xhr.open('GET','http://test/keyword/hit?keyword=c',true);

　　第一个参数是确认当前请求的提交方式，第二个参数是肯定当前请求的目标，即url，第三个参数是肯定请求时同步（false）仍是异步（true），第四和第五通常不用，是账户名和密码。

　　open执行以后，就能够执行send方法了。若是open方法用的是GET方法，请求内容放到了url中，这时候send方法就不用传递参数，直接send()；若是是post方法，则send方法加如参数，如xhr.send('keyword=c&other=');这是编码的方式urlencoded。固然还能够用JSON数据处理的方式，send一个字符串的形式。即：

　　xhr.setRequestHeader("Content-Type","application/json");//给当前的请求设置json标志。

　　xhr.send(JSON.stringify({keyword:'c',other:'test'}));JSON对象序列化格式化成JSON格式数据。不支持JSON的浏览器，有一库json2.js实现兼容。

　　setRequestHeader除了Content-Type方法外，还能够加自定义的头。

　　3.AJAX响应的接收和处理

　　onreadystatechange接收时要先通知服务器能够接了。onreadystate的值，包括5种状态：

　　0：未初始化；1：链接创建，请求发出；2：服务器返回响应；3：交互（处理相应数据）；4：完成，数据可交付客户端使用。同时还要知道HTTP status的状态码：200，403，404，500..

　　xhr.onreadystatechange=function(e){

　　if(xhr.readyState===4&&xhr.status==200){}}

　　数据准备就绪后，怎么处理？

　　responseText：JSON.parse(xhr.responseText);字符串变为对象。

　　还能够从响应结果中获取：getResponseHeader，getAllResponseHeader，status，statusTe。

　　在浏览器F12中的Network中数据包中查看具体的数据。

 

总结：

XMLHttpReqeust API
AJAX编程模板

jQuery中的ajax。

    $.ajax({
        url:'',
        datatype:'',
        success:function(data){
            
        },
        error:function(){
            
        }
    });